Hello.
I am using remote paging in my iggrid, but I cannot get the paging to work.
I have about 700 rows in my backend data but I am querying them and displaying them in the iggrid 10 rows at a time. My problem is that it would display the 10 items but I dont have a way to move to the next page to see the next 10 items and so on because i can only see page 1 and the button/dropdown for pages do not have page 2,3,4 etc.
Here's the snippet I'm using:
features.Paging().PageSize(10).Type(OpType.Remote).PageSizeUrlKey("pageSize").PageIndexUrlKey("pageIndex").TotalRecordsCount(100);
Hi Jessica,
PageSizeUrlKey, PageIndexUrlKey and TotalRecordsCount are not needed if you're using Grid MVC Wrapper to do the paging for you (they are used when you're implementing custom paging). Are you implementing paging yourself?
If you're not implementing paging yourself then in order for remote paging to work you need to set DataSourceUrl to point to an action method decorated with GridDataSourceAction attribute. Check out this sample which demonstrates remote paging: http://www.infragistics.com/products/jquery/sample/grid/paging-api
What is your backend data? Is it IQueryable or DataSet or DataTable? All of the tree support paging, but note that you should pass the whole data (do not try to extract only the records needed for one page. This is done by the Grid MVC wrapper internally).
It will be good if you post more of your grid chaining configuration and also controller action methods involved in grid data binding.
Hope this helps,
Martin Pavlov
Infragistics, Inc.
I am using GridDataSourceAction attribute, and I my data is a List<>.AsQueryable()
[GridDataSourceAction]
public ActionResult GetItemList(int pageSize, int pageIndex)
{
var list = GetList(pageSize, pageIndex);
return View(list.AsQueryable());
}
Here's my grid
@(Html.Infragistics().Grid<CatalogItem>().ID("thisGrid") .Columns(columns =>
columns.For(x => x.SKU).DataType("string").HeaderText(" ").Template(" ").Width("25px");
columns.For(x => x.Id).DataType("string").HeaderText("Image").Template("<img src=\"/Products/show?id=${Id}\" style='width:100px;' />").Width("110px");
columns.For(x => x.Quantity).DataType("string").HeaderText("Quantity").Width("70px");
})
.Features(features =>
features.Paging().PageSize(10).Type(OpType.Remote).PageSizeUrlKey("pageSize").PageIndexUrlKey("pageIndex").TotalRecordCount(100);
features.Resizing().AllowDoubleClickToResize(true).DeferredResizing(false);
features.GroupBy().InitialExpand(true).Type(OpType.Local).EmptyGroupByAreaContent(" ").GroupByAreaVisibility(GroupAreaVisibility.Hidden) .ColumnSettings(settings => settings.ColumnSetting().ColumnKey("SKU").ColumnIndex(0).IsGroupBy(true)).GroupedRowTextTemplate("SKU: ${val}");
features.Sorting().Mode(SortingMode.Single);
.Width("100%") .Height("520px")
.DataSourceUrl(Url.Action("GetCatalogItemList", new {partnerCoId = ViewBag.PartnerCoId}))
.ClientDataSourceType(ClientDataSourceType.JSON) .DataBind() .Render() )
I'm guessing the problem is that it does not know that I have 700 rows in my backend data because I am only giving it 10 rows at a time.