分页kendo网格客户端

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了分页kendo网格客户端相关的知识,希望对你有一定的参考价值。

我想使用MVC帮助程序在服务器端构建网格,但在我想在客户端添加和删除行之后。

所以我使用以下包装器:

@(html.Kendo().Grid<SIGEPos.Models.MyGridViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.id).Hidden();
        columns.Bound(p => p.name).Title("Name").Width(130);
        columns.Bound(p => p.quantity).Title("Quantity").Width(130);
    })
    .Pageable()
    .Scrollable(scr=>scr.Height(430)) 
    .DataSource(dataSource => dataSource        
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)        
     )
)

并生成以下标记(仅显示脚本部分):

<script>
    jQuery(function () {
        jQuery("#Grid").kendoGrid({
            "columns": [{
                "title": "id",
                "hidden": true,
                "field": "id",
                "filterable": {},
                "encoded": true
            }, {
                "title": "Name",
                "width": "130px",
                "field": "name",
                "filterable": {},
                "encoded": true
            }, {
                "title": "Quantity",
                "width": "130px",
                "field": "quantity",
                "filterable": {},
                "encoded": true
            }],
            "pageable": {
                "buttonCount": 10
            },
            "dataSource": {
                "transport": {
                    "prefix": "",
                    "read": {
                        "url": ""
                    }
                },
                "pageSize": 20,
                "page": 1,
                "total": 0,
                "type": "aspnetmvc-ajax",
                "schema": {
                    "data": "Data",
                    "total": "Total",
                    "errors": "Errors",
                    "model": {
                        "fields": {
                            "id": {
                                "type": "number"
                            },
                            "quantity": {
                                "type": "number"
                            },
                            "name": {
                                "type": "string"
                            }
                        }
                    }
                }
            }
        });
    });
</script>

有了这个,我无法在客户端分页。我可以添加项目,但grid.dataSource.total()总是0所以分页不起作用...

我检查了这个demo,生成的代码有点不同:

$(document).ready(function() {
                $("#grid").kendoGrid({
                    dataSource: {
                        data: products,
                        schema: {
                            model: {
                                fields: {
                                    ProductName: { type: "string" },
                                    UnitPrice: { type: "number" },
                                    UnitsInStock: { type: "number" },
                                    Discontinued: { type: "boolean" }
                                }
                            }
                        },
                        pageSize: 20
                    },
                    height: 430,
                    scrollable: true,
                    sortable: true,
                    filterable: true,
                    pageable: {
                        input: true,
                        numeric: false
                    },
                    columns: [
                        "ProductName",
                        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                        { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
                        { field: "Discontinued", width: "130px" }
                    ]
                });
            });

似乎dataSource配置不同......我该如何处理?

答案

你必须在serverPaging: false属性下设置filterable。 kendo网格的数据源是一个json,你必须指定行数,当然还有数据匹配列声明。

以上是关于分页kendo网格客户端的主要内容,如果未能解决你的问题,请参考以下文章

Kendo Grid中的服务器端分页?

Kendo UI - 网格分页(服务器端)

Kendo网格服务器端分组

分页剑道网格客户端

在 kendo ui 网格中以编程方式更改 serverSorting

Kendo Ui Angular2 Grid 分页到第一页