Selection

The Kendo UI Grid wrapper 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.

To enable selection in the native Vue Grid by Kendo UI, refer to the native Vue Grid by Kendo UI documentation.

Single-Row Selection

By default, the single-row selection option of the Kendo UI Data Grid wrapper 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

Multiple-Row Selection

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

Multiple-Cell Selection

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

Checkbox Selection

The Kendo UI Data Grid wrapper 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.

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.

Suggested Links

• Kendo UI Grid for jQuery
• API Reference of the Grid Widget
• Selection in the Native Vue Grid by Kendo UI