Doubt regarding manual paging. | Infragistics Forums

515

Doubt regarding manual paging.

Rohit Rawat posted over 1 year 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);

Parents

No Data

Reply

700

Offline Riva Ivanova posted over 1 year ago

Hello Rohit,

In order for you to further test the sample and compare the different parts to your own project, i.e., igGrid configuration, required jQuery and Ignite UI for jQuery js and css files, custom paging methods configuration, etc., I am applying a working MVC project.

Please review the code configuration, test it on your side and let me know if you need any further assistance regarding this matter.

Sincerely,
Riva Ivanova
Associate Software Developer

4152.igGrid Remote Paging MVC.zip
Cancel
Reply

Cancel

Children

515

Offline Rohit Rawat posted over 1 year ago in reply to Riva Ivanova

Hello Riya,

I tried the same thing in my code still it doesnt work.Getting this error.

I m sharing my code below. Can you please let me know what am i doing wrong?

Controller:

[GridDataSourceAction]
public IActionResult Index()
{

var absolutepath1 = Request.QueryString.Value;

Console.WriteLine(absolutepath1);
return View();
}

public JsonResult Data()
{

var absolutepath1 = Request.QueryString.Value;
NameValueCollection parse1 = HttpUtility.ParseQueryString(absolutepath1);
int skip = Convert.ToInt32(parse1["$skip"]);//number of rows to skip
int top = Convert.ToInt32(parse1["$top"]);// entries to be displayed

if (skip != null && top != null)
{

IEnumerable<Student> s12 = data.GetStudents();
IEnumerable<Student> page = s12.Skip(skip).Take(top).ToList();
// var result = new JsonResult(new { Records = s12 , TotalRecordsCount = 77 });
JsonResult result = new JsonResult(new { }, new JsonSerializerOptions { PropertyNamingPolicy = null });
result.Value = new { Records = page, TotalRecordsCount =s12.Count() };
return result;

}

return Json(data.GetStudents());

}

:

@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> .*@

<html>
<head>

</head>
<body>

</table>
</div>

<div class="text-center">
<button id="savechanges" class="btn btn-primary">Save</button>
</div>

</body>
</html>

@section scripts{

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

responseDataKey: 'Records',

columns: [
{ headerText: "Student ID", key: "id", dataType: "number", width: "10%" },
{ headerText: "Student Name", key: "name", dataType: "string", width: "20%" },
{ 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: 'Paging',
recordCountKey: 'TotalRecordsCount',
pageSize: 5,
type: 'remote',
}

]
})

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

</script>

}

This is my code. if you need anything else please do let me know.
Cancel
Reply

Cancel