在kendo网格MVVM上显示页面大小下拉列表和刷新按钮

时间:2014-05-08 03:32:12

标签: kendo-ui kendo-grid kendo-mvvm

有没有人知道如何在页脚剑道网格上显示页面大小下拉列表和刷新按钮MVVM喜欢this

这是我的观看代码:

<div id="customer-grid"
            data-role="grid"
            data-sortable="true"
            data-selectable="true"
            data-pageable="true"
            data-pagesizes="[5, 10, 20]"
            data-columns='[
            { field: "CustomerID", title: "ID", width: "75px" },
            { field: "CompanyName", title: "Company"},
            { field: "ContactName", title: "Contact" },
            { field: "ContactTitle", title: "Title" },
            { field: "Address" },
            { field: "City" },
            { field: "Region" },
            { field: "PostalCode" },
            { field: "Country" },
            { field: "Phone" },
            { field: "Fax" } ]'
            data-bind="source: customerSource">
    </div>

这是我的数据源代码:

var customerSource = new kendo.data.DataSource({
        transport: {
            read: {
                async: false,
                url: crudServiceBaseUrl,
                dataType: "json"
            }
        },

        serverPaging: true,
        pageSize: 10,
        schema: {
            model: customerModel,
            data: "data",
            total: "count"
        },
    });

提前致谢。

1 个答案:

答案 0 :(得分:2)

您应该将data-pageable定义为:

data-pageable="{ refresh: true, pageSizes: [5, 10, 20]  }"

请注意,页面大小数组在data-pageable中定义,而不在data-pagesizes中定义。

所以你的网格定义是:

<div id="customer-grid"
        data-role="grid"
        data-sortable="true"
        data-selectable="true"
        data-pageable="{ refresh: true, pageSizes: [5, 10, 20] }"
        data-columns='[
            { field: "CustomerID", title: "ID", width: "75px" },
            { field: "CompanyName", title: "Company"},
            { field: "ContactName", title: "Contact" },
            { field: "ContactTitle", title: "Title" },
            { field: "Address" },
            { field: "City" },
            { field: "Region" },
            { field: "PostalCode" },
            { field: "Country" },
            { field: "Phone" },
            { field: "Fax" } ]'
        data-bind="source: customerSource">
</div>

在此处查看:http://jsfiddle.net/9zL6J/