Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
C J
960
igGrid problem with remote paging not recognizing the returned Json object
posted


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.

Parents
  • 17590
    Offline posted

    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;
    

    }
    

     

    Please let me know if you need any further assistance with this matter.

     

     

     

     

     

    igGrid_GridModel.zip
Reply Children