Sorting

Sorting is a function that you can push to the server to increase the performance of the Kendo UI Grid wrapper for Vue.

To enable the sorting functionality of the native Vue Grid by Kendo UI, refer to the native Vue Grid by Kendo UI documentation.

To implement sorting, use the DataSource component and set the serverSorting option on the dataSource instance to true. If you delegate the sorting to the server, you will receive the default orderBy parameter. The orderBy field contains the field name of the column in the dataset by which the data is sorted.

By default, the sorting of Kendo UI Data Grid wrapper for Vue data is disabled. The Grid supports the following sorting formats:

  • Single-column sorting—To enable it, set the sortable option of the Grid to true.
  • Multi-column sorting—To enable it, set the mode option to multiple.

The following example demonstrates how to implement a Grid with its multiple-column sorting enabled.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource1"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders'"
                      :type="'odata'"
                      :page-size='20'
                      :schema-model-fields="schemaModelFields">
    </kendo-datasource>

    <kendo-grid :height="600"
                :data-source-ref="'datasource1'"
                :sortable-mode="'multiple'"
                :sortable-allow-unsort="true"
                :sortable-show-indexes="true"
                :pageable-button-count="5">
        <kendo-grid-column :field="'OrderID'"
                           :width="120"></kendo-grid-column>
        <kendo-grid-column :field="'ShipName'"
                           :title="'Ship Name'"
                           :width="240"></kendo-grid-column>
        <kendo-grid-column :field="'ShipCountry'"
                           :title="'Ship Country'"
                           :filterable-multi="true"
                           :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'ShipCity'"
                           :title="'Ship City'"
                           :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'Freight'"
                           :width="180" ></kendo-grid-column>
        <kendo-grid-column :field="'OrderDate'"
                           :title="'Order Date'"
                           :format="'{0:MM/dd/yyyy}'"
                           :width="180"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            schemaModelFields: {
                OrderID: { type: 'number' },
                ShipName: { type: 'string' },
                ShipCountry: { type: 'string' },
                ShipCity: { type: 'string' },
                Freight: { type: 'string' },
                OrderDate: { type: 'date' }
            }
        }
    }
})

In this article