How can I do server paging, filtering and sorting?

[Paul Wood]

I'm trying to build a simple grid with server paging, filtering and sorting, but I'm having trouble. Currently my grid is loading in all items from the server, when it should be loading just five. I think I previously had it loading just five, but it was always getting the first five.

Here's my HTML:

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource1"
            :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Products'"
            :transport-read-data-type="'jsonp'"
            :transport-update-url="'https://demos.telerik.com/kendo-ui/service/Products/Update'"
            :transport-update-data-type="'jsonp'"
            :transport-destroy-url="'https://demos.telerik.com/kendo-ui/service/Products/Destroy'"
            :transport-destroy-data-type="'jsonp'"
            :transport-create-url="'https://demos.telerik.com/kendo-ui/service/Products/Create'"
            :transport-create-data-type="'jsonp'"
            :transport-parameter-map="parameterMap"
            :server-paging="true"
            :page-size='5'>
    </kendo-datasource>

    <kendo-grid :height="600"
            :data-source-ref="'datasource1'"
            :pageable='true'
            :editable="'inline'"
            :page-size='5'
            :toolbar="['create']">
        <kendo-grid-column field="ProductName"></kendo-grid-column>
        <kendo-grid-column field="UnitPrice" title="Unit Price" :width="120" :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column field="UnitsInStock" title="Units In Stock" :width="120"></kendo-grid-column>
        <kendo-grid-column field="Discontinued" :width="120" :editor="customBoolEditor"></kendo-grid-column>
        <kendo-grid-column :command="['edit', 'destroy']" title=" " width="170px"></kendo-grid-column>
    </kendo-grid>
</div>

 

And here's my JS (using webpack):

Vue.use(GridInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp',
    data: {
        schemaModelFields: {
            ProductID: { editable: false, nullable: true },
            ProductName: { validation: { required: true } },
            UnitPrice: { type: 'number', validation: { required: true, min: 1 } },
            Discontinued: { type: 'boolean' },
            UnitsInStock: { type: 'number', validation: { min: 0, required: true } }
        }
    },
    methods: {
        customBoolEditor: function(container, options) {
            kendo.jQuery('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container)
            kendo.jQuery('<label class="k-checkbox-label"></label>').appendTo(container)
        },
        parameterMap: function(options, operation) {
            if (operation !== 'read' && options.models) {
                return { models: kendo.stringify(options.models) }
            }
        }
    }
})

 

Am I doing something wrong, or is this functionality not supported yet?

[Paul Wood]

Here's a link of the code running: https://plnkr.co/edit/8O7LeJtQxISAUuBF6GYj?p=preview

[Veselin Tsvetanov]

Hello Paul,

Note, that the Kendo UI demos service Products endpoint used for the Grid in question does not implement server paging logic. Therefore, it will always return the full list of items, which will be then populated in the Grid Vue component. As a result, the Grid will display 77 items on each of its pages.

In order to properly implement serverPaging, the remote service should always return the required number of items. In addition, the response should also return the Total number of items, so the pager displays properly. Here you could find a modified version of the Plunkr sent. It uses the Producs/Read endpoint which returns paged results. Note, that I have modified accordingly the parameterMap function in order to send the skip and take values. Also, I have hard-coded the value for the schema.total returned from a function.

I hope, that the above helps you. In case you have any other questions, please do not hesitate to contact us.

Regards,
Veselin Tsvetanov
Progress Telerik

[Paul Wood]

Thanks for this. Are there any examples with server-side paging without hard-coding figures like item counts to client scripts?

There just doesn't seem to be many code examples for Kendo UI Vue, which makes it difficult for considering it against the alternative options.

[Veselin Tsvetanov]

Hi Paul,

Currently, we do not have a live demo service which would return data paged on the server and the total count of items. Nevertheless, here is what could be the JSON returned from the server to the client:

{
    "Total": 77,
    "Data": [
        {
            "ProductID": 77,
            "ProductName": "Original Frankfurter grüne Soße",
            "UnitPrice": 13,
            "UnitsInStock": 32,
            "Discontinued": false
        },
        {
            "ProductID": 76,
            "ProductName": "Lakkalikööri",
            "UnitPrice": 18,
            "UnitsInStock": 57,
            "Discontinued": false
        },
        {
            "ProductID": 75,
            "ProductName": "Rhönbräu Klosterbier",
            "UnitPrice": 7.75,
            "UnitsInStock": 125,
            "Discontinued": false
        },
        {
            "ProductID": 74,
            "ProductName": "Longlife Tofu",
            "UnitPrice": 10,
            "UnitsInStock": 4,
            "Discontinued": false
        },
        {
            "ProductID": 73,
            "ProductName": "Röd Kaviar",
            "UnitPrice": 15,
            "UnitsInStock": 101,
            "Discontinued": false
        }
    ]
}

In such case the schema-total and the schema-data options should be defined for the DataSource in the following way:

<kendo-datasource ref="datasource1"
...
  :schema-total="'Total'"
  :schema-data="'Data'"
...>

The above will tell the DataSource to look for the total number of products in the Total field of the response and the data collection of items in the Data field.

As per the reduced number Kendo UI for Vue examples, we are currently working on the improvement of our documentation / demos. Thank you for sharing your observation on that, as it points us what needs to be improved in the suite.

Regards,
Veselin Tsvetanov
Progress Telerik