分页kendo网格客户端

Question

我想使用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配置不同......我该如何处理？

Answer 1

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