Connect DataGrid to ASP.NET JSON Web Service

[Aron]

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":"[e-mail]","isActive":"True"},{"userID":"197","fullName":"Dr. Jeffrey Aronoff","userName":"4690","eMail":"[e-mail]","isActive":"True"},{"userID":"189","fullName":"Dr. Sunil Asnani","userName":"4749","eMail":"[e-mail]","isActive":"True"},{"userID":"165","fullName":"Dr. Kalman etc..................

[Rosen]

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

[Aron]

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 + "}";

[Rosen]

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

[Aron]

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"}

        ]

    });

  });

. 

[Rosen]

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

[Aron]

Perfect!!  That worked.  Thanks for your help.

[wizmagister]

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 !

[Rosen]

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

[wizmagister]

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 !

[Rosen]

Hello Marc,

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

Best wishes,
Rosen
the Telerik team

[wizmagister]

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 ...

[muhammad toori]

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

 

[Vijay]

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

[Engifaar]

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\"}
]"}