Отображение раскрывающегося списка размеров страниц и кнопки обновления в сетке кендо MVVM

Кто-нибудь знает, как отображать раскрывающийся список размеров страниц и кнопку обновления в сетке кендо нижнего колонтитула. MVVM нравится это

Вот мой код просмотра:

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

Заранее спасибо.


person Hendra    schedule 08.05.2014    source источник


Ответы (1)


Вы должны определить 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/

person OnaBai    schedule 08.05.2014
comment
спасибо за ваш быстрый ответ, и ваш ответ работает, как я и ожидал :) - person Hendra; 08.05.2014