【问题标题】:Kendo UI Grid: I lose pagination after datasource refreshKendo UI Grid:数据源刷新后我失去了分页
【发布时间】:2016-09-01 14:38:36
【问题描述】:

我在一个 cshtml 文件中有这个定义:

@{Html.Kendo().Grid<OrderItem>()
    .Name("OrderList")                                            
    .Columns(columns => {
                       .........
                    })
    .DataSource(binding => binding
        .Ajax()
        .PageSize(14)
        .Model(model => model.Id(p => p.No))
        .Read(read => read.Action("SearchSalesOrder", "SalesOrder"))        
    )
    .Sortable()
    .Pageable()
    .Filterable()
    .Scrollable()
    .Render();
}

在控制器中,我使用.ToDataSourceResult(request),它运行良好(网格有分页)。当我必须更改数据源时会出现问题。这是因为用户可以过滤、搜索...我通过 Ajax 调用具有更多参数的相同方法“SearchSalesOrder”。使用 Javascript,我从响应中获取 json,并以这种方式更改数据源:

var dataSource = new kendo.data.DataSource({
    data: result.Data,
    pageSize: 14
});
grid.setDataSource(dataSource);
grid.refresh();

之后,寻呼机只显示一页。我需要更改保持分页的数据源。

谢谢。

【问题讨论】:

    标签: javascript c# pagination kendo-grid


    【解决方案1】:

    我想我明白了。 这很简单。我必须在schema 中添加total 属性。基本上在 Javascript 中,当我需要更改数据源时,我有以下代码:

    var grid = $("#OrderList").data("kendoGrid");
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                    url: '/Sales/SearchSalesOrder',
                    type: 'POST',
                    data: {
                        page: 1, pageSize: 14, startDate: startDateParam, endDate: endDateParam,.....
                    }
            }
        },
        pageSize: 14,
        serverPaging: true,
        schema: {
            parse: function (response) {
                // Charts refresh
                .......
    
                return response.Data;
            },
            total: function (response) {
                return response.Total;
            },
            data: "Data"
        }
    });
    grid.setDataSource(dataSource);
    grid.refresh();
    

    它有效。 :)

    【讨论】:

    • 它有效,如果我们想刷新或更改网格的数据源,我们必须设置 Total 选项。当我们使用分页功能时,我们也应该设置 Total 选项。
    猜你喜欢
    • 2012-09-19
    • 2018-03-12
    • 2018-04-30
    • 1970-01-01
    • 2014-06-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-27
    相关资源
    最近更新 更多