Kendo grid sorting stops working after refresh

Question

I'm getting data for the kendo-grid DataSource by calling web-API. The sorting and filtering works. Then after I choose a date range from the DatePicker / Range selection I send the range as an object to the server where I cut off the date range needed from an original JSON file and return a new cropped json object back to DataSource. The grid is filled by the data correctly but the sorting/filtering stops working. What can be the problem and solution!? Thanks!

The grid:

 var result = $("#grid")
        .kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        url: "/api/GridData/GetCustomers",
                        dataType: "json"
                    }
                },
                pageSize: 20

            },

            height: 550,
            filterable: true,
            groupable: true,
            sortable: true,

            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            detailTemplate: kendo.template($("#template").html()),
            detailInit: detailInit
        },
        {
            columns: [
                { field: "UniqueClientCode", title: "Уникальный код клиента" },
                { field: "ClientName", title: "Имя клиента" },
                { field: "ClientOKPO", title: "ОКПО клиента" },
                { field: "RegistrationDate", title: "Дата регистрации" },
                { field: "RemovalFromClientsDate", title: "Дата удаления из клиентов" }
            ]
        })
        .data("kendoGrid");

How I refresh the grid

function refreshDatePicker () {


    // Create new object with date to pass it to API controller and refresh grid

    var dateForDatePicker = new Object;
    dateForDatePicker.startDate = start._oldText;
    dateForDatePicker.endDate = end._oldText;

    $.ajax({
        type: "POST",
        data: dateForDatePicker,
        url: "/api/GridData/postDate",
        dataType: "json",


        success: function (result) {

            $("#grid").data("kendoGrid").dataSource = new kendo.data.DataSource({ data: result });
            $("#grid").data("kendoGrid").dataSource.read();
            $("#grid").data("kendoGrid").refresh();
        }

    });
}

  $("button").on( "click", function() {
          refreshDatePicker();
      alert("submit clicked");

      }

 );

});

Instead of initializing a new dataSource, just call dataSource.data(result) on the grid. This will set the new data items without wiping the whole dataSource. — Bobby Caldwell

Vijai Vijai · Accepted Answer · 2016-08-04T00:54:05

Use this to manually set dataSource to kendo Grid

var dataSource = new kendo.data.DataSource({
        data: result 
});

var grid = $("#grid").data("kendoGrid");
grid.setDataSource(dataSource);

Refer : http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setDataSource

Kendo grid sorting stops working after refresh

1 Answers