This is a migrated thread and some comments may be shown as answers.

ServerPaging Request always null

6 Answers 260 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Philipp
Top achievements
Rank 1
Philipp asked on 08 Oct 2014, 09:59 PM
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 ?

6 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 10 Oct 2014, 01:22 PM
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.

 
0
Philipp
Top achievements
Rank 1
answered on 12 Oct 2014, 02:26 PM
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 ?
0
Daniel
Telerik team
answered on 14 Oct 2014, 01:33 PM
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.

 
0
Philipp
Top achievements
Rank 1
answered on 15 Oct 2014, 10:11 PM
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.
0
Accepted
Daniel
Telerik team
answered on 17 Oct 2014, 02:29 PM
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.

 
0
Philipp
Top achievements
Rank 1
answered on 20 Oct 2014, 11:18 AM
perfect, now it works :-)
Tags
Grid
Asked by
Philipp
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Philipp
Top achievements
Rank 1
Share this question
or