刷新后,Kendo网格排序停止工作

时间:2016-08-03 19:40:42

标签: jquery kendo-ui kendo-grid kendo-asp.net-mvc

我通过调用web-API获取了kendo-grid DataSource的数据。排序和过滤工作。然后在我从DatePicker / Range选择中选择日期范围后,我将作为对象的范围发送到服务器,在那里我从原始JSON文件中截断所需的日期范围,并将新的裁剪json对象返回给DataSource。网格由数据正确填充,但排序/过滤停止工作。可能是什么问题和解决方案!?谢谢!

网格:

 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");

如何刷新网格

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");

      }

 );

});

1 个答案:

答案 0 :(得分:1)

使用此选项手动将dataSource设置为kendo Grid

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

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

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