what data format igGrid is expected from web service? databinding successful only with .ajax call first, but not direct binding call

400

Betty posted over 12 years ago

Hi all,

I encountered an error when binding data returned from web service to igGrid. The error is occurred in ig.ui.min.js when JSON.parse(s) is called.

stringToJSONObject:function(s){var data={};try{data=JSON.parse(s)}catch(e)

The message is "there was an error in parsing/evaluating json string: Syntax Error"

I have the following from code on my server side:

List<MyTransaction> Transactions = new List<MyTransaction>

{ new MyTransaction{ TransactionID=12235, PlanID=63, Premium=225f},

new MyTransaction{ TransactionID=12236, PlanID=64, Premium=256f},

new MyTransaction{ TransactionID=12237, PlanID=77, Premium=355f}

};

[WebMethod]

public List<MyTransaction> GetAllTransactions()

{return Transactions;}

In my aspx page (Version 1) I have:

var url = "/Vertex/CarService.asmx/GetAllTransactions";

var json = new $.ig.DataSource({ type: "json", dataSource: url });

            $("#igGrid").igGrid({
                virtualization: false,
                autoGenerateColumns: false,
                jQueryTemplating: false,

                columns: [
            { headerText: "TransactionID", key: "TransactionID", dataType: "number", width: "150px" },
            { headerText: "PlanID", key: "PlanID", dataType: "number", width: "120px" },
            { headerText: "Premium", key: "Premium", dataType: "number", width: "400px" }
           ],

                dataSource: json,
                responseDataKey: "d",
                scrollbars: true,
                height: '800px',
                features: [
            {
                name: 'Paging',
                pageSize: 20
            },
            {
                name: 'Sorting'
            },
            {
                name: 'Filtering',
                filterDropDownItemIcons: false,
                filterDropDownWidth: 200
            }
           ]
            });
        }

However, if I change my aspx into the following(version 2), the data binding is OK. That means using ajax call to get data first, then data binding is OK.

What am I missing in version 1? should I use responseDataKey: "d" option?

$(function () {

$.ajax({

type: "POST",

url: "/Vertex/CarService.asmx/GetAllTransactions",

data: "{}",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (response) {

records = response.d;

                $("#igGrid").igGrid({
                    virtualization: false,
                    autoGenerateColumns: false,

                    columns: [
            { headerText: "TransactionID", key: "TransactionID", dataType: "number", width: "150px" },
            { headerText: "PlanID", key: "PlanID", dataType: "number", width: "120px" },
            { headerText: "Premium", key: "Premium", dataType: "number", width: "400px" }
           ],

dataSource: records,

                    scrollbars: true,
                    height: '400px',
                    features: [
            {
                name: 'Paging',
                type: "local",
                pageSize: 5
            },
            {
                name: 'Sorting'
            },
            {
                name: 'Filtering',
                type: 'local',
                filterDropDownItemIcons: false,
                filterDropDownWidth: 200
            }
           ]
                });

            failure: function (msg) {
                $('#dailyTransaction').text(msg);
            }

});

Betty

Parents

23953

Verified Answer
Offline Martin Pavlov posted over 12 years ago
Hi,

You got this error because your configuration is wrong. Here is the correct code:

Code Snippet

var url = "/Vertex/CarService.asmx/GetAllTransactions";

var json = new $.ig.DataSource({ type: "remoteUrl", dataSource: url, responseContentType: "application/json; charset=UTF8;", responseDataKey: "d"});

$("#grid1").igGrid({

    virtualization: false,

    autoGenerateColumns: false,

    jQueryTemplating: false,

    dataSource: json,

    columns: [

        { headerText: "TransactionID", key: "TransactionID", dataType: "number", width: "150px" },

        { headerText: "PlanID", key: "PlanID", dataType: "number", width: "120px" },

        { headerText: "Premium", key: "Premium", dataType: "number", width: "400px" }

        ],

    height: '800px',

    features: [

        {

            name: 'Paging',

            pageSize: 20

        },

        {

            name: 'Sorting'

        },

        {

            name: 'Filtering',

            filterDropDownItemIcons: false,

            filterDropDownWidth: 200

        }

    ]

});

In this case you need to decorate your WebMethod with ScriptMethod attribute and set UseHttpGet = true property to true. (This is needed because igDataSource uses GET requests internally.) Here is the code:

Code Snippet

[System.Web.Script.Services.ScriptMethod(UseHttpGet = true)]

[WebMethod]

public List<MyTransaction> GetAllTransactions()

{

    return transactions;

}

Hope this helps,

Martin Pavlov

Infragistics, Inc.
Cancel
Reply

Reject Answer

Cancel
400

Betty posted over 12 years ago in reply to Martin Pavlov
Martin,

You rock. it works now!!! I have been pulling my hair all the week.

[System.Web.Script.Services.ScriptMethod(UseHttpGet = true)] is required in this case. Why your igDataSource's default request is not "Get"? I thought this is by default.

Your api/developer's guide doesn't give me the impression that "remoteUrl" is required. I looked at your odata and wcf sample. I don't remember that remoteUrl is specified in the samples. Maybe I missed. I don't remember responseContentType: "application/json; charset=UTF8;" is required either.

You are just great!!!
Cancel
Reply

Cancel
6279

Verified Answer
[Infragistics] Borislav Traykov posted over 12 years ago in reply to Betty
Hi Betty,

Just to compliment on what Martin has already advised you on and to answer your current questions.

bettysun said:
Why your igDataSource's default request is not "Get"? I thought this is by default.
Our igGrid does make a GET request by default - the problem is that a script-callable WCF service's web methods use the POST verb by default due to a security precaution that Microsoft placed some time ago.

bettysun said:
Your api/developer's guide doesn't give me the impression that "remoteUrl" is required.
Usually it isn't - I believe that Martin placed in the code just to be on the safe side.
bettysun said:
I don't remember responseContentType: "application/json; charset=UTF8;" is required either.
Actually this isn't a requirement of the igGrid, but one of the HTTP request to the script-callable WCF service. If you don't specify this encoding (application/json), your response will come in XML format (which is used by default).
Instead of specifying the content type of the request, you can place the

[WebInvoke(Method = "GET", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]

attribute on your service's method - that'll have the same effect. (A more detailed explanations is also available at http://stackoverflow.com/questions/2086666/wcf-how-do-i-return-clean-json)

Cheers,
Borislav
Cancel
Reply

Reject Answer

Cancel
400

Betty posted over 12 years ago in reply to [Infragistics] Borislav Traykov

Hi Borislav,

That's really help. You are very

knowledgeable.

Betty
Cancel
Reply

Cancel
6279

[Infragistics] Borislav Traykov posted over 12 years ago in reply to Betty

No problem, Betty :)
It's all in a day's work.

Cheers,
Borislav
Cancel
Reply

Cancel

Reply

10

Rameshwar Vyevhare posted over 10 years ago in reply to [Infragistics] Borislav Traykov

You can try out my solution, posted few days back on stackoverflow

http://stackoverflow.com/questions/13294447/reloading-infragistics-grid
Cancel
Reply

Cancel

Children

No Data