How to implement remote paging in infragistic ASP.net MVC grid?

Question

I'm reading about igGrid remote paging here : http://help.infragistics.com/NetAdvantage/jQuery/2013.1/CLR4.0?page=igGrid_Paging.html.

As per the link above, it says :

"If you are implementing your own remote service (for example in ASP.NET or PHP), in order to properly initialize and render the pager, your service must specify both the responseDataKey (grid option) and the recordCountKey (paging option). The recordCountKey member tells the Paging widget how many records in total are in the backend. The responseDataKey specifies which property in the response contains the resulting data.

I am returning my data in responseDataKey and recordCountKey but it is not working for me. I have tried by removing [GridDataSourceAction] attribute from my Action.

CSHTML :

@( Html.Infragistics().Grid<Searchclient>()
.ID("igGrid1")
.Width("auto")
.EnableHoverStyles(false)

// Enable continuous virtualization
.PrimaryKey("PartyId1")

.Columns(column =>
{
column.For(x => x.FullName).DataType("string").HeaderText("Full Name").Template("<div style='min-width:100px'>${FullName}</div> ");

column.For(x => x.CompanyName).DataType("string").HeaderText("Company Name").Template("<div style='min-width:150px'>${CompanyName}</div> ").Hidden(true);
column.For(x => x.FirstName1).DataType("string").HeaderText("FirstName1").Template("<div style='min-width:130px'>${FirstName1}</div> ").Hidden(true);
column.For(x => x.LastName1).DataType("string").HeaderText("Last Name1").Template("<div style='min-width:130px'>${LastName1}</div> ").Hidden(true);
column.For(x => x.Firstname2).DataType("string").HeaderText("First Name2").Hidden(true);
column.For(x => x.Lastname2).DataType("string").HeaderText("Last Name2").Hidden(true);
column.For(x => x.StreetNo).DataType("string").HeaderText("Street No").Template("<div style='min-width:100px'>${StreetNo}</div> ").Hidden(true);
column.For(x => x.Street).DataType("string").HeaderText("Street").Template("<div style='min-width:100px'>${Street}</div> ").Hidden(true);
column.For(x => x.Address).DataType("string").HeaderText("Address").Template("<div style='min-width:100px'>${Address}</div> ");
column.For(x => x.City).DataType("string").HeaderText("City").Template("<div style='min-width:80px'>${City}</div> ");
column.For(x => x.State).DataType("string").HeaderText("State").Template("<div style='min-width:80px'>${State}</div> ");
column.For(x => x.Zipcode).DataType("string").HeaderText("Zipcode").Template("<div style='min-width:100px'>${Zipcode}</div> ");
column.For(x => x.CustomerNumber).DataType("string").HeaderText("Customer Number").Hidden(true);
column.For(x => x.AccountNumber).DataType("string").HeaderText("Account Number").Template("<div style='min-width:120px'>${AccountNumber}</div> ");
column.For(x => x.Email1).DataType("string").HeaderText("Email1").Template("<div style='min-width:100px'>${Email1}</div> ");
column.For(x => x.Email2).DataType("string").HeaderText("Email2").Template("<div style='min-width:100px'>${Email2}</div> ");
column.For(x => x.Email3).DataType("string").HeaderText("Email3").Hidden(true);
column.For(x => x.Email4).DataType("string").HeaderText("Email4").Hidden(true);
column.For(x => x.PartyId1).HeaderText("PartyId").DataType("int").Hidden(true);

})
.Features(features =>
{
features.Responsive().ForceResponsiveGridWidth(false).EnableVerticalRendering(false).ColumnSettings(setting =>
{
setting.ColumnSetting().ColumnKey("FullName").Classes("ui-visible-phone ui-visible-tablet ui-visible-desktop").Configuration(conf => conf.AddColumnModeConfiguration("phone", c => c.Template("<span>${FullName}</span>")));

setting.ColumnSetting().ColumnKey("telpremise").Classes("ui-hidden-phone");
setting.ColumnSetting().ColumnKey("firstname1").Classes("ui-visible-desktop");
setting.ColumnSetting().ColumnKey("telcell").Classes("ui-visible-desktop");
setting.ColumnSetting().ColumnKey("street").Classes("ui-visible-desktop");
setting.ColumnSetting().ColumnKey("address").Classes("ui-hidden-phone");
setting.ColumnSetting().ColumnKey("lastname1").Classes("ui-visible-desktop");
setting.ColumnSetting().ColumnKey("email1").Classes("ui-hidden-phone");
setting.ColumnSetting().ColumnKey("address").Classes("ui-hidden-phone");
setting.ColumnSetting().ColumnKey("zipcode").Classes("ui-visible-desktop");
setting.ColumnSetting().ColumnKey("accountnumber").Classes("ui-visible-desktop");
setting.ColumnSetting().ColumnKey("email2").Classes("ui-visible-desktop");
setting.ColumnSetting().ColumnKey("city").Classes("ui-visible-desktop");
setting.ColumnSetting().ColumnKey("state").Classes("ui-hidden-phone");
setting.ColumnSetting().ColumnKey("PartyId1").Classes("ui-hidden-phone");

});

features.Hiding().HiddenColumnIndicatorHeaderWidth(14).ColumnSettings(s => s.ColumnSetting().ColumnKey("CompanyName").AllowHiding(true));
features.Resizing().AllowDoubleClickToResize(true).DeferredResizing(true);
features.Paging().Type(OpType.Remote).PageSize(10).PrevPageLabelText("Prev").NextPageLabelText("Next");
features.Sorting().Type(OpType.Local).Mode(SortingMode.Single).ColumnSettings(settings =>
{
settings.ColumnSetting().ColumnKey("PartyId").AllowSorting(true);

});
features.RowSelectors().EnableCheckBoxes(true).EnableRowNumbering(false);
features.Selection().MouseDragSelect(false).MultipleSelection(false).Mode(SelectionMode.Row);
features.Filtering().Mode(FilterMode.Simple);
features.Sorting().Type(OpType.Remote);
})
.DataSourceUrl(Url.Action("GetAccountList"))
.Width("auto")
.DataBind()
.Render()
)

CS :

// [GridDataSourceAction]
public ActionResult GetAccountList(int page, int pageSize)
{
if (Session["Condition"] != null)
{
string condition = (string)Session["Condition"];

var searchlist = DBmain.GetSearchClientPaging(condition, page, pageSize, out TotalRecordsCount);

return Json(new
            {
              responseDataKey = searchlist,
              recordCountKey = TotalRecordsCount
              }, JsonRequestBehavior.AllowGet);


}
}

you used wrong tag "jqgrid" instead of "iggrid". igGrid and jqGrid are absolutely different products. I fixed the tag. — Oleg, Jun 23 '19 at 07:48

score 1 · Answer 1 · answered Jun 25 '19 at 16:18

You should probably have a look at this topic as well:

https://www.igniteui.com/help/handling-remote-features-manually

If you want to use the [GridDataSourceAction] you shouldn't be formatting the response yourself (that's what the attribute does). Instead, like the doc says, you should be returning the view as usual with IQueryable data.

This might warrant a better explanation in the Paging doc, but by "specify both the responseDataKey (grid option) and the recordCountKey (paging option)" it means you should set:

responseDataKey (.ResponseDataKey() in ASP.NET MVC) option of the Grid itself
recordCountKey (.RecordCountKey() in ASP.NET MVC) on the Paging feature

match your returned object format.

This is simply due to the fact the endpoint the Grid will query for data should return more than a simple array. For example, if you MVC action returns:

{
   items: [1..20],
   totalItems: 2000
}

You need to tell the Grid how to interpret that object. In this case it'd be a responseDataKey of items to tell the Grid where the current page data is and recordCountKey of totalItems to let Paging know there are 1980 more items so it can build the pager.

@( Html.Infragistics().Grid<Searchclient>()
  .ResponseDataKey("items")
  // ..
  .Features(features =>
    features.Paging().Type(OpType.Remote).RecordCountKey("totalItems")
    // ...

There's also a demo handling remote paging manually in our samples that does just that.

How to implement remote paging in infragistic ASP.net MVC grid?

1 Answers1