Doubt regarding manual paging. | Infragistics Forums

515

Doubt regarding manual paging.

Rohit Rawat posted 10 months ago

Hello everyone,

So, i want to perform manual paging where i bring data in pages only when user change the page number. I m unable to perform this. Please help me out with this.

note : In below code i have not enabled manual paging as i m confused how to extract parameter from query string and how to bring data only when user switch pages.(server side paging)

Code:

@using Infragistics.Web.Mvc;
@using System.Text.Json

@*@model IEnumerable<GridTransaction.Models.Student>*@
@* The Ignite UI for MVC Grid data source uses LINQ and therefore only accepts instances of IQueryable<T>.
Even when you opt to use the GridMode you will explicitly set the DataSource property which
requires an instance of IQueryable<T> .*@

</head>
<body>

@* @(
Html.Infragistics().Grid(Model).ID("grid").PrimaryKey("Id").AutoGenerateColumns(false).Width("100%").AutoCommit(false)

.Columns(columns =>
{
columns.For(model => model.Id).DataType("number").HeaderText("Student ID").Width("15%");
columns.For(model => model.Name).DataType("string").HeaderText("Student Name").Width("30%");
columns.For(model => model.Marks).DataType("number").HeaderText("Marks").Width("30%");
columns.For(model => model.subject).DataType("string").HeaderText("Subject").Width("15%");
columns.For(model => model.Imagepath).DataType("string").HeaderText("Imagepath").Template("<img src='${Imagepath}' width='50' height='50' />");

}).DataSource(Model)
// Set the data source URL
.Features(features =>
{
features.Selection().MultipleSelection(true);
features.GroupBy();
features.Paging().PageSize(10);
features.Updating();
features.Tooltips().Visibility(TooltipsVisibility.Always);// provide informaion about grid when you hover over
features.RowSelectors().EnableCheckBoxes(true);
features.RowSelectors().EnableRowNumbering(true);
features.Updating().EnableAddRow(true).EnableDeleteRow(true);
features.Sorting().Type(OpType.Remote).SortUrlKey("hi");

features.Updating().ColumnSettings(set =>
{
set.ColumnSetting().ColumnKey("Id").ReadOnly(true);
});
features.Filtering();
}).UpdateUrl(Url.Action("put"))
.ResponseContentType("Json")
.UpdateUrl(Url.Action("put"))
.DataBind()
.Render()
) *@

</table>
</div>

</body>
</html>

@section scripts{

@*Batch Update*@
<script>
$(function () {
$("#grid").igGrid({
primaryKey: "id",
renderCheckboxes: true,
autoGenerateColumns: false,
updateUrl: "/Student/put/",
width: "100%",

columns: [
{ headerText: "Student ID", key: "id", dataType: "number", width: "15%" },
{ headerText: "Student Name", key: "name", dataType: "string", width: "30%" },
{ headerText: "Marks", key: "marks", dataType: "number", width: "30%" },
{
headerText: "Image",
key: "imagepath",
dataType: "string",
width: "15%",
template: "<img src='${imagepath}' width='50' height='50' />"
},
{ headerText: "Subject", key: "subject", dataType: "string", width: "15%" }
],
dataSourceUrl: "/Student/Data12",
dataSource: "/Student/Data",

features: [
{
name: "Selection",
mode: "row",
multipleSelection: true
},
{
name: "RowSelectors",
enableCheckBoxes: true,
enableRowNumbering: true
},
{
name: "GroupBy"
},
{
name :"Paging",
type:"local",
pageSize : 7
},

{
name: "Filtering",
type:"remote",
filterExprUrlKey: "filter",
columnSettings: [
{
columnKey: "selectColumn",
allowFiltering: false
}
]
},
{
name: "Sorting",
type: "remote",
// sortUrlKey: 'sort',
// sortUrlKeyAscValue: 'asc',
// sortUrlKeyDescValue: 'desc'
},
{
name: "Updating",
enableAddRow: true,
editMode: "row",
validation: true,
enableDeleteRow: true,
rowAdded: function (evt, ui) {
// Custom logic to execute when a row is added
console.log("Event arguments (ui):", ui);
console.log("Row data:", ui.rowId);
console.log(typeof (ui.values));
},
columnSettings: [
{
columnKey: "id",
readOnly: true

},

{
columnKey: "name",
editorType: "text",
validation: true,
editorOptions: {

validatorOptions:
{
required: {
errorMessage: "You must enter a value to submit."

},
custom: function(ui,evt){
var validator = $("#grid").igGridUpdating("editorForKey", "name").data("igValidator").element;

console.log(validator);
if (ui == "rohit") {

$(validator).igValidator("option", "errorMessage", "cant enter name rohit");

return false;
}
return true;

}

}
}
},
{
columnKey: "marks",
editorType: "number",
validation: true,
editorOptions: {
validatorOptions: {
required: {
errorMessage: "You must enter a value to submittt."

},
custom:function(ui,evt){
console.log(ui);
console.log("hi");
if (ui >= 50) {
var validator1 = $("#grid").igGridUpdating("editorForKey", "imagepath").data("igValidator").element;
// var validator11 = $("#grid").igGridUpdating("editorForKey", "imagepath");
// console.log(validator11);
// console.log("hi");
// console.log(validator11);

// var validator12 = $("#grid").igGridUpdating("editorForKey", "imagepath").data("igValidator");

// console.log(validator12);

//Set
$(validator1).igValidator("option", "required", true);

$(validator1).igValidator("option", "errorMessage", 'This field is required for marks between 50-100');

return true;
}
else {
var validator1 = $("#grid").igGridUpdating("editorForKey", "imagepath").data("igValidator").element;

//Set
$(validator1).igValidator("option", "required", false);

return true;
}
}
}
}
}
]
}
]
});

$("#savechanges").on("click", function () {
alert("Save button clicked");
// Save changes when the button is clicked
$("#grid").igGrid("saveChanges");
});
});

</script>

}

ASP CODE TO HANDLE PAGING:

public JsonResult Data12()
{

var absolutepath1 = HttpContext.Request.QueryString.ToString();
var absolutepath = HttpContext.Request.Query["$orderby"].ToString();

Console.WriteLine(absolutepath1);

string[] m = absolutepath.Split(' ');
//foreach(var m2 in m)
//{
// Console.WriteLine(m2);
//}
// absolutepath.Remove("?");

var colname = m[0];
var orderb1y = m[1];

IEnumerable<Student> sat = data.sort(colname, orderb1y);

// IEnumerable<Student> students = data.GetStudents();

return Json(sat);