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
Betty
400
what data format igGrid is expected from web service? databinding successful only with .ajax call first, but not direct binding call
posted

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 posted

    Hi,

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

    Code Snippet
    1. var url = "/Vertex/CarService.asmx/GetAllTransactions";
    2.  
    3. var json = new $.ig.DataSource({ type: "remoteUrl", dataSource: url, responseContentType: "application/json; charset=UTF8;", responseDataKey: "d"});
    4. $("#grid1").igGrid({
    5.     virtualization: false,
    6.     autoGenerateColumns: false,
    7.     jQueryTemplating: false,
    8.     dataSource: json,
    9.     columns: [
    10.         { headerText: "TransactionID", key: "TransactionID", dataType: "number", width: "150px" },
    11.         { headerText: "PlanID", key: "PlanID", dataType: "number", width: "120px" },
    12.         { headerText: "Premium", key: "Premium", dataType: "number", width: "400px" }
    13.         ],
    14.     height: '800px',
    15.     features: [
    16.         {
    17.             name: 'Paging',
    18.             pageSize: 20
    19.         },
    20.         {
    21.             name: 'Sorting'
    22.         },
    23.         {
    24.             name: 'Filtering',
    25.             filterDropDownItemIcons: false,
    26.             filterDropDownWidth: 200
    27.         }
    28.     ]
    29. });

     

    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
    1. [System.Web.Script.Services.ScriptMethod(UseHttpGet = true)]
    2. [WebMethod]
    3. public List<MyTransaction> GetAllTransactions()
    4. {
    5.     return transactions;
    6. }

     

     

    Hope this helps,

    Martin Pavlov

    Infragistics, Inc.

Reply Children