Kendo Grid Server side paging in ASP.Net WebForms gives error: Cannot read property 'slice' of undefined

Question

I am trying to integrate server side paging in Telerik Kendo Grid in my ASP.Net WebForms Application. I am using web service for getting data from database. I have integrate everything as documented on Telerik website. But Grid is not populating the data. It gives javascript error in console like :

Uncaught TypeError: Cannot read property 'slice' of undefined ............... kendo.all.min.js:27

Here is what I have used so far:

In ASPX Page:

<script type="text/javascript">
    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    read: "/AjaxPages/KendoGrid.asmx/GetUserListPageWise",
                    dataType: "json",
                    contentType: "application/json;charset=utf-8"
                },
                schema: {
                    data: "data", // records are returned in the "data" field of the response
                    total: "total"
                },
                pageSize: 10,
                serverPaging: true,
                //serverFiltering: true,
            },
            height: 430,
            filterable: true,
            sortable: true,
            pageable: true,
            columns: [
                    {
                        field: "Id",
                        title: "Id",
                        filterable: true
                    },
                    {
                        field: "FirstName",
                        title: "Name",
                        filterable: true
                    }
            ]
        });
    });
</script>

In Code Behind Page (Web Service) :

[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]
public string GetUserListPageWise(int take, int skip, int page, int pageSize)
{
    JavaScriptSerializer js = new JavaScriptSerializer();
    Context.Response.Clear();
    Context.Response.ContentType = "application/json";
    int companyid = Convert.ToInt32(HttpContext.Current.Session["CompanyId"]);
    List<UserList> lst = new List<UserList>();
    UserMaster user = new UserMaster();
    lst = user.GetPagingGridList(skip, pageSize, companyid);
    //KendoResponse d = new KendoResponse { results = lst, __count = lst.Count };
    //return lst;

    var result = new KendoResponse(lst.ToArray(), lst.Count);
    //return result;
    return new JavaScriptSerializer().Serialize(result);
    //return new JavaScriptSerializer().Serialize(new { total = lst.Count, data = lst });
}

And here is the model class used :

public class KendoResponse
{
    public Array data { get; set; }
    public int total { get; set; }

    public KendoResponse(Array _data, int _total)
    {
        this.data = _data;
        this.total = _total;
    }
}

I am getting response of ajax call made by Kendo Grid, the response is like :

<?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://mywebsite.net/">{"data":[{"Id":9,"FirstName":"Sachin","LastName":"Patel","EmailId":"admin@a.com","Password":null,"MobileNo":"","CompanyName":"Company","RoleName":"Admin","ModifiedOn":"\/Date(1465465583063)\/"},{"Id":8,"FirstName":"Abc","LastName":"Xyz","EmailId":"user@user.com","Password":null,"MobileNo":"","CompanyName":"Company2","RoleName":"User","ModifiedOn":"\/Date(1465277042557)\/"},{"Id":2,"FirstName":"Aaabb","LastName":"Xxxyy","EmailId":"a@a.com","Password":null,"MobileNo":"","CompanyName":"Company2","RoleName":"Admin","ModifiedOn":"\/Date(1463737813523)\/"}],"total":3}</string>

But still its not binding data to Grid. It is giving an error in Kendo js file.

Can any one help me?

Thanks in advance..

score 0 · Accepted Answer · edited May 23 '17 at 12:15

Finally I found solution after stretching my hairs for 2 days:

Grid was not binding as I am not getting json response from my web service. It is giving me json object as a string in xml format due to which the grid is not binding. I have resolved the issue by simply sending json response in HTTPContext by following way: (thanks to Saranya, I have read this SO answer)

[WebMethod(EnableSession = true)]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public void GetUserListPageWise(int take, int skip, int page, int pageSize)
{
    JavaScriptSerializer js = new JavaScriptSerializer();
    Context.Response.Clear();
    Context.Response.ContentType = "application/json";
    int companyid = Convert.ToInt32(HttpContext.Current.Session["CompanyId"]);
    List<UserList> lst = new List<UserList>();
    UserMaster user = new UserMaster();
    lst = user.GetPagingGridList(skip, pageSize, companyid);
    int lstCount = user.GetPagingGridListCount(companyid);

    var result = new KendoResponse(lst.ToArray(), lst.Count);
    //Context.Response.Write(result);
    Context.Response.Write(new JavaScriptSerializer().Serialize(new KendoResponse(lst.ToArray(), lstCount)));
    //return new JavaScriptSerializer().Serialize(result);
}

Kendo Grid Server side paging in ASP.Net WebForms gives error: Cannot read property 'slice' of undefined

1 Answers1