Sorting

The native Vue Grid by Kendo UI enables you to sort single and multiple data-bound columns.

Getting Started

To enable sorting:

  1. Set the sortable option of the Grid.
  2. Utilize the sort option to apply the sorting styles and buttons to the affected columns.
  3. When sortable is configured and the user tries to sort a column, the sortchange event is emitted. Handle the onSortChange event where you have the option to sort the data programmatically, to make a request to the server for server sorting, or to use the process method of the DataQuery library which automatically processes the data.

The following example demonstrates the minimum required configuration for sorting the Grid records.

<div id="vueapp" class="vue-app">
    <Grid :style="{height: '300px'}"
          :data-items="result"
          :sortable="true"
          :sort= "sort"
          :columns = "columns"
          @sortchange="sortChangeHandler">
        </Grid>
</div>
import { orderBy } from '@progress/kendo-data-query';
import { Grid } from '@progress/kendo-vue-grid';

Vue.component('Grid', Grid);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            sort: [
                { field: 'ProductName', dir: 'asc' }
            ],
            columns: [
                { field: 'ProductID'},
                { field: 'ProductName', title: 'Product Name' },
                { field: 'UnitPrice', title: 'Unit Price' }
            ]
        };
    },
    computed: {
        result: {
            get: function() {
                return orderBy(this.createRandomData(500), this.sort);
            }
        }
    },
    methods: {
        sortChangeHandler: function(e) {
            this.sort = e.sort;
        },
        createRandomData(count) {
            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120];
            const units = [2, 7, 12, 25,  67, 233, 123, 53, 67, 89];

            return Array(count).fill({}).map((_, idx) => ({
                ProductID: idx + 1,
                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)],
                UnitsInStock: units[Math.floor(Math.random() * units.length)]
            }));
        }
    }
});

Customize Sorting

The sorting feature of the Grid enables you to unsort the columns and sort the records by multiple columns.

  • To enable the unsorting of columns, utilize the sortable.allowUnsort option which determines if the columns can be unsorted.
  • To enable the sorting of multiple columns, set the sortable.mode option which accepts a single or multiple value.
<div id="vueapp" class="vue-app">
    <div class="example-config">
            <input
                type="checkbox"
                class="k-checkbox"
                id="unsort"
                :checked= "allowUnsort"
                @change="changeHandler"
            />
            <label for="unsort"
                class="k-checkbox-label"
                :style="{lineHeight: '1.2', marginBottom: '1em'}">
                Enable unsorting
            </label>
            <br />
            <input
                type="checkbox"
                class="k-checkbox"
                id="multiSort"
                :checked="multiple"
                @change="changeMultiHandler"
            />
            <label for="multiSort"
                class="k-checkbox-label"
                :style="{lineHeight: '1.2'}">
                Enable multiple columns sorting
            </label>
        </div>
        {{sortable}}
        <Grid
            :style="{height: '300px'}"
            :data-items="result"
            :sortable="sortable"
            :sort= "sort"
            @sortchange="sortChangeHandler"
            :columns = "columns">
        </Grid>
    </div>
</div>
import { orderBy } from '@progress/kendo-data-query';
import { Grid } from '@progress/kendo-vue-grid';

Vue.component('Grid', Grid);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            allowUnsort: true,
            multiple: false,
            sort: [
                { field: 'ProductName', dir: 'asc' }
            ],
            columns: [
                { field: 'ProductID'},
                { field: 'ProductName', title: 'Product Name' },
                { field: 'UnitPrice', title: 'Unit Price' }
            ]
        };
    },
    computed: {
        sortable() {
            return {
                allowUnsort: this.allowUnsort,
                mode: this.multiple ? 'multiple' : 'single'
            };
        },
        result: {
            get: function() {
                return orderBy(this.createRandomData(500), this.sort);
            }
        }
    },
    methods: {
        changeHandler: function (e) {
            this.allowUnsort = e.target.checked;
        },
        changeMultiHandler: function (e) {
            this.multiple = e.target.checked;
        },
        sortChangeHandler: function(e) {
            this.sort = e.sort;
        },
        createRandomData(count) {
            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120];
            const units = [2, 7, 12, 25,  67, 233, 123, 53, 67, 89];

            return Array(count).fill({}).map((_, idx) => ({
                ProductID: idx + 1,
                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)],
                UnitsInStock: units[Math.floor(Math.random() * units.length)]
            }));
        }
    }
});

Reversing Sorting Order

The Grid allows you to reverse the sorting order of its columns. To apply a higher priority to the column which was last sorted, place the last column at the beginning of the sorting array before you set the new state. When a column is removed from the sorting state, you do not need to reverse the items.

sortChange(event) {
    const sort = event.sort;
    if (sort.length >= this.state.sort.length) {
        sort.unshift(sort.pop());
    }
    this.setState({
        products: this.GetProducts(sort),
        sort: sort
    });
}

In this article