All Components

Selection

The Kendo UI Grid for Vue allows the user to select single or multiple rows, and multiple cells, as well as utilize the checkbox row selection.

For more information on selection, refer to the documentation of the Kendo UI Grid for jQuery.

Single-Row Selection

By default, the single-row selection option of the Kendo UI DataGrid for Vue is disabled. To enable the single-row selection functionality, set the :selectable option of the Grid to true.

The :selectable option also accepts the following values:

  • row
  • cell
  • multiple row
  • multiple cell
<div id="vueapp" class="vue-app">
    <kendo-grid :data-source="localDataSource"
                :selectable="true">
        <kendo-grid-column :field="'ProductName'" :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'UnitPrice'"
                           :title="'Unit Price'"
                           :width="120"
                           :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column :field="'Category'"
                           :title="'Category'"
                           :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'Discontinued'" :width="120"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            localDataSource: {
                data: [{
                    "ProductID": 1,
                    "ProductName": "Chai",
                    "UnitPrice": 18,
                    "UnitsInStock": 39,
                    "Discontinued": false,
                    "Category": "Beverages"
                },
                {
                    "ProductID": 4,
                    "ProductName": "Chef Anton",
                    "UnitPrice": 22,
                    "UnitsInStock": 53,
                    "Discontinued": false,
                    "Category": "Beverages"
                },
                {
                    "ProductID": 5,
                    "ProductName": "Chef Gumbo Mix",
                    "UnitPrice": 21.35,
                    "UnitsInStock": 0,
                    "Discontinued": true,
                    "Category": "Dairy Products"
                },
                {
                    "ProductID": 6,
                    "ProductName": "Boysenberry Spread",
                    "UnitPrice": 25,
                    "UnitsInStock": 120,
                    "Discontinued": false,
                    "Category": "Condiments"
                }]
            }
        }
    }
})

Multiple-Row Selection

The following example demonstrates how to implement the multiple-row selection of the Kendo UI Grid for Vue.

<div id="vueapp" class="vue-app">
    <kendo-grid :data-source="localDataSource"
                :selectable="'multiple'">
        <kendo-grid-column :field="'ProductName'" :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'UnitPrice'"
                           :title="'Unit Price'"
                           :width="120"
                           :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column :field="'Category'"
                           :title="'Category'"
                           :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'Discontinued'" :width="120"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            localDataSource: {
                data: [{
                    "ProductID": 1,
                    "ProductName": "Chai",
                    "UnitPrice": 18,
                    "UnitsInStock": 39,
                    "Discontinued": false,
                    "Category": "Beverages"
                },
                {
                    "ProductID": 4,
                    "ProductName": "Chef Anton",
                    "UnitPrice": 22,
                    "UnitsInStock": 53,
                    "Discontinued": false,
                    "Category": "Beverages"
                },
                {
                    "ProductID": 5,
                    "ProductName": "Chef Gumbo Mix",
                    "UnitPrice": 21.35,
                    "UnitsInStock": 0,
                    "Discontinued": true,
                    "Category": "Dairy Products"
                },
                {
                    "ProductID": 6,
                    "ProductName": "Boysenberry Spread",
                    "UnitPrice": 25,
                    "UnitsInStock": 120,
                    "Discontinued": false,
                    "Category": "Condiments"
                }]
            }
        }
    }
})

Multiple-Cell Selection

The following example demonstrates how to implement the multiple-cell selection of the Kendo UI Grid for Vue.

<div id="vueapp" class="vue-app">
    <kendo-grid :data-source="localDataSource"
                :selectable="'multiple cell'">
        <kendo-grid-column :field="'ProductName'" :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'UnitPrice'"
                           :title="'Unit Price'"
                           :width="120"
                           :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column :field="'Category'"
                           :title="'Category'"
                           :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'Discontinued'" :width="120"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            localDataSource: {
                data: [{
                    "ProductID": 1,
                    "ProductName": "Chai",
                    "UnitPrice": 18,
                    "UnitsInStock": 39,
                    "Discontinued": false,
                    "Category": "Beverages"
                },
                {
                    "ProductID": 4,
                    "ProductName": "Chef Anton",
                    "UnitPrice": 22,
                    "UnitsInStock": 53,
                    "Discontinued": false,
                    "Category": "Beverages"
                },
                {
                    "ProductID": 5,
                    "ProductName": "Chef Gumbo Mix",
                    "UnitPrice": 21.35,
                    "UnitsInStock": 0,
                    "Discontinued": true,
                    "Category": "Dairy Products"
                },
                {
                    "ProductID": 6,
                    "ProductName": "Boysenberry Spread",
                    "UnitPrice": 25,
                    "UnitsInStock": 120,
                    "Discontinued": false,
                    "Category": "Condiments"
                }]
            }
        }
    }
})

Checkbox Selection

The Kendo UI DataGrid for Vue provides the columns.selectable property which enables multiple-row selection through a checkbox column. When enabled, the selectable property of a column also renders a checkbox in its header and allows the selection and deselection of all rows on the current page.

<div id="vueapp" class="vue-app">
    <kendo-grid :data-source="localDataSource">
        <kendo-grid-column :selectable="true" :width="60"></kendo-grid-column>
        <kendo-grid-column :field="'ProductName'" :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'UnitPrice'"
                           :title="'Unit Price'"
                           :width="120"
                           :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column :field="'Category'"
                           :title="'Category'"
                           :width="180" ></kendo-grid-column>
        <kendo-grid-column :field="'Discontinued'" :width="120"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            localDataSource: {
                data: [{
                    "ProductID": 1,
                    "ProductName": "Chai",
                    "UnitPrice": 18,
                    "UnitsInStock": 39,
                    "Discontinued": false,
                    "Category": "Beverages"
                },
                {
                    "ProductID": 4,
                    "ProductName": "Chef Anton",
                    "UnitPrice": 22,
                    "UnitsInStock": 53,
                    "Discontinued": false,
                    "Category": "Beverages"
                },
                {
                    "ProductID": 5,
                    "ProductName": "Chef Gumbo Mix",
                    "UnitPrice": 21.35,
                    "UnitsInStock": 0,
                    "Discontinued": true,
                    "Category": "Dairy Products"
                },
                {
                    "ProductID": 6,
                    "ProductName": "Boysenberry Spread",
                    "UnitPrice": 25,
                    "UnitsInStock": 120,
                    "Discontinued": false,
                    "Category": "Condiments"
                }]
            }
        }
    }
})

Known Limitations

  • The built-in checkbox selection, which is enabled through the selectable option of the column, is not integrated with the selection functionality of the Grid. The features are mutually exclusive and to enable the selection, use either of the two approaches.
  • When the Grid is rebound (when paging, filtering, sorting, editing, or virtual scrolling occurs) and if the persistSelection property is not enabled, the selection is not persisted. The persistSelection option is applicable for row selection only.
  • The performance of a selectable Grid which renders hundreds or thousands of items decreases if the page size is too large or if paging is not used. This behavior most frequently occurs in Internet Explorer. Grouping, hierarchy, and frozen columns also have a negative impact on the selection performance because grouping, hierarchy, and frozen columns make the HTML output of the Grid more complex. To work around such issues, use paging with a reasonable page size.
In this article