Connect DataGrid to ASP.NET JSON Web Service

15 posts, 0 answers
  1. Aron
    Aron avatar
    24 posts
    Member since:
    Sep 2011

    Posted 01 Nov 2011 Link to this post

    I have been unable to connect the Kendo Grid to my ASP.NET JSON Web Service as no data is appearing. Can you tell me how to fix the Kendo Grid so it consumes the web service.  Thanks

        $(document).ready(function() {
                        $("#grid").kendoGrid({
             dataSource: {
                 type: "jsonp",
              serverPaging: true,
              serverSorting: true,
              pageSize: 13,
              transport: {
               read: "../../emrwebservices/service.asmx/getSampleSQLDataKendo"}
               },
                 schema: {
                     data: 'items',
                     total : function(data) {return data.totalCount;
                  }
             },
          height: 250,
          scrollable: true,
          sortable: true,
          pageable: true,
          columns: [
                                { field: "userID", title: "User ID" },
                                { field: "fullName", title: "Name" },
                                { field: "userName", title: "User Name" },
                                { field: "eMail" },
                                { field: "isActive"}
                            ]
                        });
                    });

    Web Service data is below.  Also viewable at http://www.speechtodocs.com/emrwebservices/service.asmx

    {"totalCount":80,"items":[{"userID":"227","fullName":"Dr. Hank Aaron","userName":"HankAaron","eMail":"melissa@dmmt.com","isActive":"True"},{"userID":"197","fullName":"Dr. Jeffrey Aronoff","userName":"4690","eMail":"melissa@dmmt.com","isActive":"True"},{"userID":"189","fullName":"Dr. Sunil Asnani","userName":"4749","eMail":"melissa@dmmt.com","isActive":"True"},{"userID":"165","fullName":"Dr. Kalman etc..................
  2. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 02 Nov 2011 Link to this post

    Hello Aron,

    I have looked at the service you have pasted. It seems that it is an XML service and getSampleSQLDataKendo returns a string containing data in JSON format instead of an JSON data. Therefore, please correct you service to return an JSON result. If you would like to use an XML service, please take a look at this forum thread.

    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Aron
    Aron avatar
    24 posts
    Member since:
    Sep 2011

    Posted 02 Nov 2011 Link to this post

    Thanks for the quick reply.  I prefer to deliver the data in JSON, not XML.  But I'm not sure what you mean by "data in JSON format instead of an JSON data".  The web service is an ASP.NET Web Service.  Is there something I need to change in the Web Service or in the web service code to produce the JSON string?  Here is the web service code that creates the output string:
    // Get data from a SQL Server database, then
    // Create a multidimensional array object
    Author[] author = new Author[myDataSet.Tables[0].Rows.Count];
    int i = 0;
    foreach (DataRow rs in myDataSet.Tables[0].Rows)
    {
        author[i] = new Author();
        author[i].userID = rs["userid"].ToString();
        author[i].fullName = rs["fullname"].ToString();
        author[i].userName = rs["username"].ToString();
        author[i].eMail = rs["email"].ToString();
        author[i].isActive = rs["isactive"].ToString();
        //p1.address.city = "Bangalore";
        i = i + 1;
    }
     
    // Return JSONP data
    JavaScriptSerializer js = new JavaScriptSerializer();
    string tc =@"{""totalCount""" + ":" + myDataSet.Tables[0].Rows.Count + ",";
    string items = @"""items""" + ":" + js.Serialize(author);
    strJSON = tc + items + "}";
  5. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 02 Nov 2011 Link to this post

    Hello Aron,

    If you looked at the response generated by the service method getSampleSQLDataKendo, you may noticed that the response is actually an XML. There is a single element which contains a JSON formatted string. Although, how to setup ASP.NET WebServices to return JSON is out of the scope of  out JavaScript library, you may find such information on the web for example in the following article.

    All the best,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Aron
    Aron avatar
    24 posts
    Member since:
    Sep 2011

    Posted 02 Nov 2011 Link to this post

    Thanks again.  This was very helpful.  I downloaded the sample article and ran the app.  It is sending a simple array.
    I decided to take a simpler approach, that is to first download the JSON with JQuery to a local variable and then consume it in KendoGrid.
    I verified the data arrived correctly.  Now I'm just missing a proper link via "DataSource".  What's wrong with my code? 
    The web service is at: http://www.speechtodocs.com/emrwebservices/service.asmx/getSampleSQLDataJSON

    var value = "";     
          
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "../../emrwebservices/service.asmx/getSampleSQLDataJSON",
        data: '{}',
        dataType: "json",
        success: function(jsonText) {
            value = eval( "(" + jsonText.d + ")" );
            var v1 = value[0].userID;
            var v2 = value[0].fullName;
            var v3 = value[0].userName;
            var v4 = value[0].eMail;
            var v5 = value[0].isActive;
            alert (v1 + " " + v2 + " " + v3 + " " + v4 + " " + v5);
            },
        error: function(msg) {
            alert("Error: " + msg.d);
            }
    });
      
     $("#grid").kendoGrid({
        dataSource: {
            data: value,
            pageSize: 10
            },
        height: 250,
        scrollable: true,
        sortable: true,
        pageable: true,
        columns: [
            { field: "userID", title: "User ID" },
            { field: "fullName", title: "Name" },
            { field: "userName", title: "User Name" },
            { field: "eMail" },
            { field: "isActive"}
            ]
        });
      });

  7. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 03 Nov 2011 Link to this post

    Hello Aron,

    In order to bind the grid with the code you have pasted, the grid should be inside the ajax success callback. Using the provided code, grid widget will be bound (to an empty string, which is not supported) before response from the ajax request is received as ajax call is asynchronous. 

    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Aron
    Aron avatar
    24 posts
    Member since:
    Sep 2011

    Posted 03 Nov 2011 Link to this post

    Perfect!!  That worked.  Thanks for your help.
  9. wizmagister
    wizmagister avatar
    37 posts
    Member since:
    Nov 2011

    Posted 28 Nov 2011 Link to this post

    Hello, I'm having the same kind of issue, but I'm not using XML. I'm accessing an ASP.NET WebServices that return JSON. I can see the data correctly from the server to in FireBUG:

    {"d":[{"__type":"AstusTimeSheet.Data.Activity_Client","ID":19500,"Description":"- Test Kendo UI"},
    {"__type"
    :"AstusTimeSheet.Data.Activity_Client","ID":19501,"Description":"- Second test of Kendo UI"}]}

    To counter the famous "d", I used the following schema:
                columns: ["ID""CREA_TS""ACTIVITY_TS""EMPLOYEE_ID""PROJECT_ID""TASK_ID""DURATION""DESCRIPTION""IS_RD""RD_DESCRIPTION"],
                dataSource: 
                {
                  transport:
                  {
                    read:
                    {
                      type: "POST",
                      url: "/Data/Activity.asmx/GetOpenedActivity",
                      data: null,
                      contentType: "application/json; charset=utf-8",
                      dataType: "json",
                      async: false
                    }
                  }
                },
                schema:
                { data: "d" }
    

    All this works great in another demo site ...

    When I assigned it to KendGrid, nothing is displayed !

    My question is, is there a way (LOG or Function) that would allow me to get the  error from Kendo ? It's hard to debug something when there's no error shown ...

    Thanks !
  10. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 29 Nov 2011 Link to this post

    Hi Marc,

    In order to receive errors which take place during the remote call, you may handle the error event of the DataSource:

    dataSource: {
      error: function(e) {
      }
    //...
    }

    Greetings,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. wizmagister
    wizmagister avatar
    37 posts
    Member since:
    Nov 2011

    Posted 29 Nov 2011 Link to this post

    OK, but there's no error with the remote call ? (I just tried and error is not called).

    The problem is KendoGrid is not doing anything with the data. Not even an error ...

    I've tried displaying information in dataBound event, it gets called but it doesn't say much:
    Object { preventDefault=function(), isDefaultPrevented=function()}

    Thanks !
  12. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 29 Nov 2011 Link to this post

    Hello Marc,

    Could you please provide a small sample in which this behavior can be observed?

    Best wishes,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. wizmagister
    wizmagister avatar
    37 posts
    Member since:
    Nov 2011

    Posted 29 Nov 2011 Link to this post

    I've tried but it's too complicated. This is an intranet Web site and security is killing my chances. I'm gonna try with other controls and see what happens. I'll keep you posted. If you find a way to display any error happening while binding the data, please let me know ...
  14. muhammad toori
    muhammad toori avatar
    12 posts
    Member since:
    Jan 2010

    Posted 27 Dec 2011 Link to this post

    it works for me. are you specifying the schema as below. My JSON string is in the following fomat. so the value for schema is not d but List in my case.

     

     

     

    "List": [

     

    {

     

    "Description": "Screen ID: is missing.", "Version": "1.0", "QueryStatusName": "Active", "QueryType": "Required", "QueryID": "Scr_SCRNID_Required" },

     

    {

     

    "Description": "Patient Initials: is missing.", "Version": "1.0", "QueryStatusName": "Active", "QueryType": "Required", "QueryID": "Scr_SCRNIDENT_Required" }
    ]

     

     

     




    $(

     

    "#grid").kendoGrid({

     

    dataSource: {

    data: getData(),

    pageSize: 10,

    schema: {

    data:

     

    'List'

     

    }

    },

    scrollable:

     

    true,

     

    pageable:

     

    true,

     

    sortable: {

    mode:

     

    "single",

     

    allowUnsort:

     

    false

     

    },

    columns: [

    { field:

     

    "Description", title: "Description" },

     

    { field:

     

    "Version", title: "Version" },

     

    { field:

     

    "QueryStatusName", title: "Status" },

     

    { field:

     

    "QueryType", title: "Query Type" },

     

    { field:

     

    "QueryID", title: "Query ID" }

     

    ]

    });

     

    //end .kendoGrid

     

  15. Vijay
    Vijay avatar
    5 posts
    Member since:
    Apr 2012

    Posted 07 May 2012 Link to this post

    it would be helpful if you can add a working example of a grid, using web service returning JSON string. Like below

        <ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
        <WebMethod(EnableSession:=True)> _
        Public Function GenerateJsonData(ByVal id As Guid, ByVal filter As Type) As String
            Return ReportCommand.Jsondata()
        End Function

    it would be of help.

    Cheers Vijay
  16. Engifaar
    Engifaar avatar
    15 posts
    Member since:
    May 2012

    Posted 31 May 2012 Link to this post

    Hello friends, I'm accessing an ASP.NET WebServices that return JSON. I can see the data correctly from the server to in FireBUG: (See Below)
     I am unable to fill my grid with my URL data returned.. What is my mistake?

    var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "WebService.asmx/getAllCustomerName",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                }
            },
            schema: {
                data: function (data) {
                    alert(data.d);   /*Data Return Successfully*/
                    return data.d;
                }
            },
            error: function (e) {
                alert("Error");
            },
            change: function (e) {
                alert("Change");
            },
            requestStart: function (e) {
                alert("Request Start");
            }
        });


        $("#try").kendoGrid({
            dataSource: dataSource, //No data...
            pageable: true,
            sortable: true,
            height: 450,
            scrollable: { virtual: true },
            selectable: true,
            dataBound: function (e) {
                alert("DataBound");
            },
            columns: [
                        { field: "CustomerID", title: "CustomerID" },
                        { field: "FirstName", title: "FirstName" },
                        { field: "LastName", title: "LastName" },
                        { field: "BalancePoint", title: "BalancePoint" }
                    ]
        });


    My URL return data of json type:--

    {"d":"[{\"BalancePoint\":\"2017.000\",\"CustomerID\":\"000\",\"FirstName\":\"AA\",\"LastName\":\"ZX\"},
    {\"BalancePoint\":\"224.000\",\"CustomerID\":\"001\",\"FirstName\":\"AB\",\"LastName\":\"ZY\"},
    {\"BalancePoint\":\"1094.000\",\"CustomerID\":\"002\",\"FirstName\":\"AC\",\"LastName\":\"ZZ\"}
    
    ]"}
Back to Top
Kendo UI is VS 2017 Ready