igGrid problem with remote paging not recognizing the returned Json object

Not Answered This post has 0 verified answers | 15 Replies | 4 Followers Thread's RSS feed.

C J
Points 960
Replied On: Sun, Nov 16 2014 9:08 PM Reply


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.

  • Post Points: 20

All Replies

[Infragistics] Vasya
Points 16,555
Infragistics Employee
Replied On: Mon, Nov 17 2014 5:02 AM Reply

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.

 

 

 

 

 

Regards,

Vasya Kacheshmarova,
Developer Support Engineer,
Infragistics

  • Post Points: 20
C J
Points 960
Replied On: Mon, Nov 17 2014 6:53 AM Reply

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.

  • Post Points: 20
[Infragistics] Vasya
Points 16,555
Infragistics Employee
Replied On: Mon, Nov 17 2014 7:10 AM Reply

Hello C J,

Thank you for getting back to me.

I believe currently your scenario is not supported by Infragistics IgniteUI toolset.

Some further reference to our Supported Environments could be found at:

http://www.infragistics.com/support/supported-environments

Please let me know if you need any additional information.

Supported environments:

  • ENVIRONMENTS

Regards,

Vasya Kacheshmarova,
Developer Support Engineer,
Infragistics

  • Post Points: 20
[Infragistics] Vasya
Points 16,555
Infragistics Employee
Replied On: Mon, Nov 17 2014 7:40 AM Reply

Hello C J,

What I can suggest is try setting igGrid`s  response data key property. This is basically the property in the responses where data records are held. Some further reference could be found at:

http://help.infragistics.com/jQuery/2014.2/ui.iggrid#options:responseDataKey

In your scenario this property could be set as following: responseDataKey: "records"

//Initialize
$(".selector").igGrid({
    responseDataKey : "records"
});

I hope you find this information helpful.

Regards,

Vasya Kacheshmarova,
Developer Support Engineer,
Infragistics

  • Post Points: 20
C J
Points 960
Replied On: Mon, Nov 17 2014 11:36 AM Reply

I'm not sure how my environment isn't supported. I am using jQuery 1.7.1 and jquery-ui.

  • Post Points: 20
adil sulaiman
Points 125
Replied On: Mon, Nov 17 2014 4:04 PM Reply

I wish to accomplish the very same. I dont wish to use your .NET MVC wrapper i would like to use the grid with a remote API through jquery. I cant use the angular directives (https://github.com/IgniteUI/igniteui-angular) associated to the framework if i use .NET MVC wrappers. 

  • Post Points: 5
adil sulaiman
Points 125
Replied On: Mon, Nov 17 2014 4:37 PM Reply

Also how do i encapsulate custom headers in the pagination ajax request? I need the call to authenticate with an api token. 

  • Post Points: 5
adil sulaiman
Points 125
Replied On: Mon, Nov 17 2014 6:01 PM Reply

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! 

  • Post Points: 35
[Infragistics] Vasya
Points 16,555
Infragistics Employee
Replied On: Tue, Nov 18 2014 2:19 AM Reply

Hello C J,

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.

Regards,

Vasya Kacheshmarova,
Developer Support Engineer,
Infragistics

  • Post Points: 5
[Infragistics] Vasya
Points 16,555
Infragistics Employee
Replied On: Tue, Nov 18 2014 3:12 AM Reply

Hello Adil Sulaiman,

Thank you for sharing your experience with the community.

What I can suggest is have a separate thread for the issues that you are experiencing. This will ensure that your issue is going to be addressed correctly and we will provide you with better and more accurate support.

Please let me know if you have any additional questions.

Regards,

Vasya Kacheshmarova,
Developer Support Engineer,
Infragistics

  • Post Points: 20
adil sulaiman
Points 125
Replied On: Tue, Nov 18 2014 10:10 AM Reply

I dont see the point of creating a separate thread when this one is addressing the same issue as mine. Anyway, i managed to solve it myself. If i run into any more issues, i shall open another thread. 

  • Post Points: 20
[Infragistics] Vasya
Points 16,555
Infragistics Employee
Replied On: Sun, Nov 23 2014 6:01 AM Reply

Hello Adil,

I am glad that you have been able to resolve this issue.

Please feel free to contact us and create either a support request on our web site or a new forum thread in case that you have any questions.

 Thank you for choosing Infragistics components.

Regards,

Vasya Kacheshmarova,
Developer Support Engineer,
Infragistics

  • Post Points: 5
[Infragistics] Vasya
Points 16,555
Infragistics Employee
Replied On: Sun, Nov 23 2014 6:02 AM Reply

Hello C J,

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

Regards,

Vasya Kacheshmarova,
Developer Support Engineer,
Infragistics

  • Post Points: 20
saravanan
Points 90
Replied On: Thu, Oct 12 2017 9:44 AM Reply

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

  • Post Points: 5
Page 1 of 2 (16 items) 1 2 Next > | RSS