ServerPaging Request always null

7 posts, 1 answers
  1. Philipp
    Philipp avatar
    8 posts
    Member since:
    Aug 2014

    Posted 08 Oct 2014 Link to this post

    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 ?
  2. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 10 Oct 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Philipp
    Philipp avatar
    8 posts
    Member since:
    Aug 2014

    Posted 12 Oct 2014 Link to this post

    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 ?
  4. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 14 Oct 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Philipp
    Philipp avatar
    8 posts
    Member since:
    Aug 2014

    Posted 15 Oct 2014 in reply to Daniel Link to this post

    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.
  6. Answer
    Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 17 Oct 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Philipp
    Philipp avatar
    8 posts
    Member since:
    Aug 2014

    Posted 20 Oct 2014 Link to this post

    perfect, now it works :-)
Back to Top