telerik kendo ui datarequest sort field always null

Question

I use telerik kendo ui grid.

<script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "POST",
                    prefix: "",
                    dataType: "json",
                    serverFiltering: true,
                    EnableCustomBinding:true,
                    transport: {
                        read: "http://localhost:51618/Home/Customers_Read"
                    },
                    pageSize: 20,
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true,
                    contentType: "application/json; charset=utf-8"
                },
                height: 550,
                groupable: true,
                filterable:true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                    template: "<div class='customer-photo'" +
                                    "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                                "<div class='customer-name'>#: ContactName #</div>",
                    field: "ContactName",
                    title: "Contact Name",
                    width: 240
                }, {
                    field: "ContactTitle",
                    title: "Contact Title"
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 150
                }]
            });
        });
    </script>

my controller is:

  public ActionResult Customers_Read([DataSourceRequest] DataSourceRequest request)
        {
// do something
}

the request send form gird is:

http://localhost:51618/Home/Customers_Read?take=20&skip=0&page=1&pageSize=20&sort%5B0%5D%5Bfield%5D=ContactName&sort%5B0%5D%5Bdir%5D=asc

but datarequest sort field is always null.

Answer 1

if you revise it to this - it should work (it did for me):

$(document).ready(function () {
        var ds = new kendo.data.DataSource({
            type: "aspnetmvc-ajax",     
                    transport: {
                        read: "http://localhost:51618/Home/Customers_Read",
                    dataType: "json",
                    type: "POST"
                    },
                    pageSize: 20,
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true,
                });

            $("#grid").kendoGrid({
                dataSource: ds,
                height: 550,
                groupable: true,
                filterable:true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                    template: "<div class='customer-photo'" +
                                    "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                                "<div class='customer-name'>#: ContactName #</div>",
                    field: "ContactName",
                    title: "Contact Name",
                    width: 240
                }, {
                    field: "ContactTitle",
                    title: "Contact Title"
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 150
                }]
            });
        });