I'm having a problem with remote paging. It is not reading my reply properly and throwing a parse error. Here is my grid definition:
$("#igGrid").igGrid({ dataSource: "/SrvGrid?action=getList", columns: [ { headerText: "ID", key: "dataId", }, { headerText: "Data", key: "data", } ], features: [{ name: 'Paging', type: "remote", pageSize: 2, responseDataKey : "records", recordCountKey : "totalRecordCount", pageSizeUrlKey : 'pageSize', pageIndexUrlKey : 'pageIndex' } ] });
I am getting the proper reqest parms sent to my servlet :
http://localhost:8080/SrvGrid?action=getList&pageIndex=0&pageSize=2&_=1416188204654
My servlet queries the DB to create a list and then I build a Wrapper class around it (I don't know if this is correct or if theres an easier way) :
class Wrapper { public int totalRecordCount; public List<Data> records; }
The return JSon string looks like this :
{"totalRecordCount":5,"records":[{"dataId":1,"data":"AAA"},{"dataId":2,"data":"BBB"}]}
and it looks/parses fine in Firebug - an object with 2 elements, the 'totalRecordCount' and 'records', exactly as specified in the Paging feature of the grid. However, it returns this error:
Error: The remote request to fetch data has failed: (parsererror) There was an error parsing the JSON data and applying the defined data schema: The input data doesn't match the schema, the following field couldn't be mapped: dataId
I have no idea why this is not working. I thought the grid would stripoff the wrapper and and use just the 'records' property to populate the grid.
Strangely enough, if the servlet just passes back my data in the Json 'list' (WITHOUT the Wrapper), it is parsed correctly and the grid is loaded. So it seems to recognize that its remote paging when SENDING the request (by adding the paging parms) but it doesnt recognize that its using remote paging when RECEIVING the result - it doesnt know what to do with the 'totalRecordCount' and 'records' properties.
Can you help?
Thanks.
Hello C J,
Thank you for posting in our community.
When you're using Infragistics ASP.NET MVC wrapper it will handle remote paging automatically for you. You are required to create action method decorated with GridDataSourceActionAttribute attribute which returns ActionResult. In the action method just pass the data as instance of IQueryable. The GridDataSourceActionAttribute class (which implements IActionFilter interface) will transform the data according the request parameters and will return it as JsonResult.
Therefore, when remote paging is used, the grid automatically generates the proper request parameters in the following way:
http://<server>/grid/PagingGetData?page=2&pageSize=25
Some further reference about igGrid Paging could be found at:
http://help.infragistics.com/doc/jQuery/2014.2/CLR4.0/?page=igGrid_Paging.html
I made a small sample illustrating Remote Paging and I am attaching it for your reference. In my sample remote paging is used and DataSourceUrl property is set.
public JsonResult GetData(int pageSize, int page) { GridModel gridModel = GetGridModel(); // put your data in the data source // for example:gridModel.DataSource = GetList(pageSize, pageIndex).AsQueryable(); gridModel.DataSource = this.GetProducts(pageSize, page).AsQueryable(); return gridModel.GetData(); } /* * Dynamically construct the grid configuration * */ private GridModel GetGridModel() { GridModel gridModel = new GridModel(); gridModel.DataSourceUrl = Url.Action("GetData"); gridModel.AutoGenerateColumns = false; gridModel.Columns.Add(new GridColumn() { Key = "ProductID", HeaderText = "ProductID", DataType = "number" }); gridModel.Columns.Add(new GridColumn() { Key = "Name", HeaderText = "Name" }); gridModel.Columns.Add(new GridColumn() { Key = "ProductNumber", HeaderText = "ProductNumber" }); gridModel.Features.Add(new CustomGridPaging() { Type = OpType.Remote, PageSize = 5, CustomTotalRecordsCount = 200 }); return gridModel; }
public JsonResult GetData(int pageSize, int page)
{
GridModel gridModel = GetGridModel();
// put your data in the data source
// for example:gridModel.DataSource = GetList(pageSize, pageIndex).AsQueryable();
gridModel.DataSource = this.GetProducts(pageSize, page).AsQueryable();
return gridModel.GetData();
}
/*
* Dynamically construct the grid configuration
*
*/
private GridModel GetGridModel()
GridModel gridModel = new GridModel();
gridModel.DataSourceUrl = Url.Action("GetData");
gridModel.AutoGenerateColumns = false;
gridModel.Columns.Add(new GridColumn()
Key = "ProductID",
HeaderText = "ProductID",
DataType = "number"
});
Key = "Name",
HeaderText = "Name"
Key = "ProductNumber",
HeaderText = "ProductNumber"
gridModel.Features.Add(new CustomGridPaging()
Type = OpType.Remote,
PageSize = 5,
CustomTotalRecordsCount = 200
return gridModel;
Please let me know if you need any further assistance with this matter.
Hello, and thank you for your reply. However I have no idea what you sent me/attached. I didn't start this project (I just inherited it) so I don't even know if I'm using "ASP.NET MVC wrapper" and by the looks of your sample, I don't think I am. I'm not using visual basic, C# or anything Microsoft.
My pages are JSPs using struts2, and my server code is written in Java using Hibernate to query the database. Do you have a sample using these languages?
Thank you.
I'm not sure how my environment isn't supported. I am using jQuery 1.7.1 and jquery-ui.
CJ for your reference, try specifying the response data key on the igGrid level. Like so :
$("#igGrid").igGrid({ dataSource: "/SrvGrid?action=getList",
responseDataKey : "records", columns: [ { headerText: "ID", key: "dataId", }, { headerText: "Data", key: "data", } ], features: [{ name: 'Paging', type: "remote", pageSize: 2, responseDataKey : "records", recordCountKey : "totalRecordCount", pageSizeUrlKey : 'pageSize', pageIndexUrlKey : 'pageIndex' } ] });
Worked for me!
Since you requested a sample that meets the following requirements: "My pages are JSPs using struts2, and my server code is written in Java using Hibernate to query the database. Do you have a sample using these languages" that is why I sent you the supported environments document. What you are using on the server side is not supported, the jQuery version is supported.
Did you have the chance to try my suggestion and set the responseDataKey property to records?
Please try this approach and let me know what is the result?
Please feel free to contact me if you need any additional information.
Hi,
I am having an issue with igGrid with Angular for Remote binding.
I cant able to get data for pageSizeUrlKey,pageIndexUrlKey to pass in "dataSourceUrl"
The below code i've using for Remote Binding
HTML Page:
<ig-grid #myIgGrid1 [(options)]="IgGridOptionsMain" [(dataSource)]='igdata' auto-generate-columns="false" widgetId='grid1'> </ig-grid>
ts File:import { IgniteUIModule, IgGridComponent, IgGridPagingFeature } from "igniteui-angular2";
@ViewChild("myIgGrid1") myGrid3: IgGridPaging;
var CurrentPage = $("#grid1").igGridPaging("option", "pageIndexUrlKey");//This method of getting key not working
this.pageIndex = this.myGrid2.pageIndexUrlKey; //By call from control id is return undefined only
this.IgGridOptionsMain = { //autoCommit: true, dataSource: this.igdata, dataSourceUrl: "http://localhost:61021/Home/GetDynamicUserList" + "?ParamData=" + encodeURIComponent(JSON.stringify(this.ObjParamArray)), requestType: "GET", responseContentType: "application/json; charset=utf-8", jsonpRequest: true, responseDataKey: "Records", primaryKey: "sNo",
columns: [ { key: "sNo", headerText: "UserId", dataType: "number", hidden: true, },
/*********/
],
], features: [ { name: "Paging", type: "remote", recordCountKey: "RecordCountKey", pageSizeUrlKey: "PageSize", pageIndexUrlKey: "CurrentPage", pageSize: 10, },
Please guide me to get pageSizeUrlKey and pageIndexUrlKey from iggrid to pass it for Controller call for Remote binding
Thanks,
G.Saravanan
Can anyone lookup and suggest me how to pass pageSizeUrlKey and pageIndexUrlKey in angular for remote binding
Saravanan
Hi Eveyone,
Could anyone suggest solution for the above?
Warm regards,