Selection

The native Vue Grid by Kendo UI enables the user to select a single row or multiple rows.

Getting Started

To implement row selection:

  1. Use the onRowClick event.
  2. Set the selectedField option.

As a result, the Grid allows you to set the currently clicked item as selected. The selectedField option represents a field inside the data collection which determines the rows that will render as selected.

<div id="vueapp" class="vue-app">
   Selected Item:  {{selectedItem && selectedItem.ProductID}} , {{selectedItem && selectedItem.ProductName}}
        <Grid
        ref="grid"
        :style="{height: '520px'}"
        :data-items="items"
        :selected-field="selectedField"
        :columns="columns"
        @rowclick="onRowClick">
    </Grid>
</div>
import { Grid } from '@progress/kendo-vue-grid';

Vue.component('Grid', Grid);
new Vue({
    el: '#vueapp',
    data: function () {
        return {
            selectedField: 'selected',
            selectedID: 1,
            products: [],
            columns: [
                { field: 'ProductID', title: 'ID', width: '50px' },
                { field: 'ProductName', title: 'Product Name' },
                { field: 'UnitPrice', filter: 'numeric', title: 'Unit Price' },
                { field: 'UnitsInStock', title: 'Units In Stock' }
            ]
        };
    },
    computed: {
        items () {
            return this.products.map((item) => ({ ...item, selected: item.ProductID === this.selectedID }));
        },
        selectedItem () {
            return this.products.find((item) => item.ProductID === this.selectedID);
        }
    },
    methods: {
        onRowClick (event) {
            this.selectedID = event.dataItem.ProductID;
        },
        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]

            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: Math.floor(Math.random() * 100)
            }));
        }
    },
     mounted() {
        this.products = this.createRandomData(1000);
    },
});

Customizing the Selection

The Grid provides both checkbox and row-click selection options which can be applied to single or multiple records.

  • The checkbox selection enables the selection upon a checkbox click and implements a master checkbox in the header which selects and deselects all items.
  • The row-click selection allows the selection of items on row click. Depending on the selection logic of the project, you can implement multiple-row selection through the Ctrl and Shift keys by handling the onRowClick event and by specifying the selectedField.

To configure the checkbox selection:

  1. Set a selection column by setting the field option and passing the select value to field.
  2. Handle the GridSelectionChangeEvent, and the onHeaderSelectionChange events which will be fired once the user clicks a checkbox.
  3. Depending on the selected state of an item, set the selectedField value.

The following example demonstrates how to implement multiple selection both on row click and with checkboxes.

<div id="vueapp" class="vue-app">
    <Grid
        ref="grid"
        :style="{height: '520px'}"
        :data-items="products"
        :selected-field="selectedField"
        :columns="columns"
        @selectionchange="onSelectionChange"
        @headerselectionchange="onHeaderSelectionChange"
        @rowclick="onRowClick">
    </Grid>
</div>
import { Grid } from '@progress/kendo-vue-grid';
var products = [
    {
        "ProductID": 1,
        "ProductName": "Chai",
        "UnitPrice": 18.0000,
        "UnitsInStock": 39
    },
    {
        "ProductID": 2,
        "ProductName": "Chang",
        "UnitPrice": 19.0000,
        "UnitsInStock": 17
    },
    {
        "ProductID": 3,
        "ProductName": "Aniseed Syrup",
        "UnitPrice": 10.0000,
        "UnitsInStock": 13
    },
    {
        "ProductID": 4,
        "ProductName": "Chef Anton's Cajun Seasoning",
        "UnitPrice": 22.0000,
        "UnitsInStock": 53
    },
    {
        "ProductID": 5,
        "ProductName": "Chef Anton's Gumbo Mix",
        "UnitPrice": 21.3500,
        "UnitsInStock": 0
    },
    {
        "ProductID": 6,
        "ProductName": "Grandma's Boysenberry Spread",
        "UnitPrice": 25.0000,
        "UnitsInStock": 120
    },
    {
        "ProductID": 7,
        "ProductName": "Uncle Bob's Organic Dried Pears",
        "UnitPrice": 30.0000,
        "UnitsInStock": 15
    },
    {
        "ProductID": 8,
        "ProductName": "Northwoods Cranberry Sauce",
        "UnitPrice": 40.0000,
        "UnitsInStock": 6
    },
    {
        "ProductID": 9,
        "ProductName": "Mishi Kobe Niku",
        "UnitPrice": 97.0000,
        "UnitsInStock": 29
    },
    {
        "ProductID": 10,
        "ProductName": "Ikura",
        "UnitPrice": 31.0000,
        "UnitsInStock": 31
    },
    {
        "ProductID": 11,
        "ProductName": "Queso Cabrales",
        "UnitPrice": 21.0000,
        "UnitsInStock": 22
    },
    {
        "ProductID": 12,
        "ProductName": "Queso Manchego La Pastora",
        "UnitPrice": 38.0000,
        "UnitsInStock": 86
    },
    {
        "ProductID": 13,
        "ProductName": "Konbu",
        "SupplierID": 6,
        "UnitPrice": 6.0000,
        "UnitsInStock": 24
    },
    {
        "ProductID": 14,
        "ProductName": "Tofu",
        "UnitPrice": 23.2500,
        "UnitsInStock": 35
    },
    {
        "ProductID": 15,
        "ProductName": "Genen Shouyu",
        "UnitPrice": 15.5000,
        "UnitsInStock": 39
    },
    {
        "ProductID": 16,
        "ProductName": "Pavlova",
        "UnitPrice": 17.4500,
        "UnitsInStock": 29
    },
    {
        "ProductID": 17,
        "ProductName": "Alice Mutton",
        "UnitPrice": 39.0000,
        "UnitsInStock": 0
    },
    {
        "ProductID": 18,
        "ProductName": "Carnarvon Tigers",
        "UnitPrice": 62.5000,
        "UnitsInStock": 42
    },
    {
        "ProductID": 19,
        "ProductName": "Teatime Chocolate Biscuits",
        "UnitPrice": 9.2000,
        "UnitsInStock": 25
    },
    {
        "ProductID": 20,
        "ProductName": "Sir Rodney's Marmalade",
        "UnitPrice": 81.0000,
        "UnitsInStock": 40
    }
];

Vue.component('Grid', Grid);
new Vue({
    el: '#vueapp',
    data: function () {
        return {
            selectedField: 'selected',
            products: products.map(item => { return {...item, selected: false} }),
            staticColumns: [
                { field: 'ProductID', title: 'ID', width: '50px' },
                { field: 'ProductName', title: 'Product Name' },
                { field: 'UnitPrice', filter: 'numeric', title: 'Unit Price' },
                { field: 'UnitsInStock', title: 'Units In Stock' }
            ]
        };
    },
    computed: {
        areAllSelected () {
            return this.products.findIndex(item => item.selected === false) === -1;
        },
        columns () {
            return [
                { field: 'selected', width: '50px', headerSelectionValue: this.areAllSelected },
                ...this.staticColumns
            ]
        }
    },
    methods: {
        onHeaderSelectionChange (event) {
            let checked = event.event.target.checked;
            Vue.set(this, 'products', this.products.map((item) => { return {...item, selected: checked} }));
        },
        onSelectionChange (event) {
            Vue.set(event.dataItem, this.selectedField, !event.dataItem[this.selectedField]);
        },
        onRowClick (event) {
            Vue.set(event.dataItem, this.selectedField, !event.dataItem[this.selectedField]);
        },
        createRandomData(count) {
            return
        }
    }
});

In this article