This is a migrated thread and some comments may be shown as answers.

How can I do server paging, filtering and sorting?

4 Answers 301 Views
This is a migrated thread and some comments may be shown as answers.
Paul Wood
Top achievements
Rank 1
Paul Wood asked on 30 May 2018, 07:25 AM

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?

4 Answers, 1 is accepted

Sort by
0
Paul Wood
Top achievements
Rank 1
answered on 30 May 2018, 07:26 AM
Here's a link of the code running: https://plnkr.co/edit/8O7LeJtQxISAUuBF6GYj?p=preview
0
Veselin Tsvetanov
Telerik team
answered on 31 May 2018, 12:38 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Paul Wood
Top achievements
Rank 1
answered on 01 Jun 2018, 03:39 AM

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.

0
Veselin Tsvetanov
Telerik team
answered on 04 Jun 2018, 01:39 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Paul Wood
Top achievements
Rank 1
Answers by
Paul Wood
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Share this question
or