Showing page sizes drop down list and refresh button on kendo grid MVVM

Question

Does anyone know how to showing page sizes drop down list and refresh button on the footer kendo grid MVVM likes this

Here is my view code:

<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>

and here is my data source code:

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

Thanks in advance.

Answer 1

You should define data-pageable as:

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

Please, note that the array of page sizes is defined in data-pageable and not in data-pagesizes.

So your grid definition would be:

<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>

Check it here : http://jsfiddle.net/9zL6J/