ServerPaging Request always null

[Philipp]

Hi

i'm using a Kendo UI Grid (Version: 2014.2.716.545) within a ASP .NET MVC 5 Project to bind XML Data from a local hosted REST Webservice. I would like to "activate" ServerPaging. Here is my Datasource Definition

var dataSource = new kendo.data.DataSource({
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true,
            transport: {
                read: function (options) {
                    $.ajax({
                        url: ".../api/{Controller}/GetData",
                        type: "POST",
                        success: function (data) {
                            options.success(data);
                        },
                        error: function (errorThrown) {
                            alert(errorThrown);
                        }
                    });
                },
                create: function (options) {
                    SaveData(options);
                },
                update: function (options) {
                    SaveData(options);
                },
            },
            schema: {
                type: "xml",
                data: "/ArrayOfType/Type",
                model: {
                    id: "Type_ID",
                    fields: {
                        Type_ID: {
                            field: "Type_ID/text()", type: "number",
                            validation: { required: true }
                        },
                        FieldA: {
                            field: "FieldA/text()", type: "string",
                            validation: {
                                required: true,
                                min: 1
                            }
                        },
                        FieldB: {
                            field: "FieldB/text()", type: "string",
                        }
                    }
                }
            },
            pageSize: 50
        });

and my Controller Method:

[System.Web.Http.ActionName("GetData")]
        [System.Web.Http.HttpPost]
        public ResponseMessageResult GetData([DataSourceRequest] DataSourceRequest request)
        {
            try
            {
                var list = _db.Load().ToDataSourceResult(request);

                var resp = ResponseMessage(new HttpResponseMessage(HttpStatusCode.OK)
                {
                    Content = new ObjectContent<DataSourceRequest>(list, new System.Net.Http.Formatting.XmlMediaTypeFormatter
                    {
                        UseXmlSerializer = true
                    })
                });
                resp.Response.Headers.Add("Access-Control-Allow-Origin", "*");
                return resp;
            }
            catch (Exception ex)
            {
                Logger.LogError(ex);
                throw;
            }
        }

The client calls the Controller Method correctly, but the request Parameter is always NULL. Is something wrong with my Client Definition ?

[Daniel]

Hello,

Are you trying to use the MVC wrappers server API? If yes, then you should:

• Use the webapi transport to serialize the state values:
  

  var transport = new kendo.data.transports.webapi({});
  var dataSource = new kendo.data.DataSource({
      serverPaging: true,
      serverFiltering: true,
      serverSorting: true,
      transport: {
          read: function (options) {
              $.ajax({
                  url: ".../api/{Controller}/GetData",
                  type: "POST",
                  data: transport.parameterMap(options.data, "read"),
                  success: function (data) {
                      options.success(data);
                  },
                  error: function (errorThrown) {
                      alert(errorThrown);
                  }
              });
          }

• Use the WebApiDataSourceRequestModelBinder on the server to bind the DataSourceRequest as demonstrated in this documentation topic.

Regards,
Daniel
Telerik

 

 

[Philipp]

Hi Daniel

thanks for your reply. I changed my Definition like this

var transport = new kendo.data.transports.webapi({});
var dataSource = new kendo.data.DataSource({

            serverPaging: true,

            serverFiltering: true,

            serverSorting: true,

            transport: {

                read: function (options) {

                    $.ajax({

                        url: ".../api/{Controller}/GetData",

                        type: "POST",

                        data: transport.parameterMap(options.data, "read"),
success: function (data) {

                            options.success(data);

                        },

                        error: function (errorThrown) {

                            alert(errorThrown);

                        }

                    });

                },

                create: function (options) {

                    SaveData(options);

                },

                update: function (options) {

                    SaveData(options);

                },

            },

            schema: {

                type: "xml",

                data: "/ArrayOfType/Type",

                model: {

                    id: "Type_ID",

                    fields: {

                        Type_ID: {

                            field: "Type_ID/text()", type: "number",

                            validation: { required: true }

                        },

                        FieldA: {

                            field: "FieldA/text()", type: "string",

                            validation: {

                                required: true,

                                min: 1

                            }

                        },

                        FieldB: {

                            field: "FieldB/text()", type: "string",

                        }

                    }

                }

            },

            pageSize: 50

        });

and my Controllermethod

[System.Web.Http.ActionName("GetData")]
        [System.Web.Http.HttpPost]
        public ResponseMessageResult GetData([DataSourceRequest] DataSourceRequest request)
        {
            try
            {
                var list = _db.Load().ToDataSourceResult(request);

                var resp = ResponseMessage(new HttpResponseMessage(HttpStatusCode.OK)
                {
                    Content = new ObjectContent<DataSourceRequest>((List<MyObject>)list.data, new System.Net.Http.Formatting.XmlMediaTypeFormatter
                    {
                        UseXmlSerializer = true
                    })
                });
                resp.Response.Headers.Add("Access-Control-Allow-Origin", "*");
                return resp;
            }
            catch (Exception ex)
            {
                Logger.LogError(ex);
                throw;
            }
        }

The "Page" and "PageSize" Property from the DataSourceRequest object is correct now, but it shows me the wrong Total Count (only 50) and the paging doesn't work. How can i bind the "Total" Property correctly ? and how can i "active" the ServerFiltering ? the "Filters" Parameter (DataSourceRequest) is always null. What is wrong with my Definition ?

[Daniel]

Hello again,

In order for the paging to work, you should include the total records count in the response from the server and specify a function for the schema total option that retrieves the total count from the response.
As for the problem with the filters - you should use the WebApiDataSourceRequestModelBinder instead of the DataSourceRequestAttribute:

public ResponseMessageResult GetData([System.Web.Http.ModelBinding.ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest request)

Regards,
Daniel
Telerik

 

 

[Philipp]

Hi Daniel

Thanks for your reply. The ServerPaging works now, but only without the Attribute [System.Web.Http.ModelBinding.ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]. With this Attribute it doesn't work, because PageSize is always 0 and the Filters is always null.

[Daniel]

HI,

Sorry, I missed that you are using a POST request. The data will be added to the request body in this case and the ModelBinder will bind the parameters only from the URL. You should add the parameters to URL in this case in order for the DataSourceRequest to be bound e.g.

read: function (options) {
    $.ajax({
        url: ".../api/{Controller}/GetData?" + $.param(transport.parameterMap(options.data, "read")),
        type: "POST",
success: function (data) {
            options.success(data);
        },
        error: function (errorThrown) {
            alert(errorThrown);
        }
    });
}

Regards,
Daniel
Telerik

 

 

[Philipp]

perfect, now it works :-)