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.
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
:selectable option also accepts the following values:
The following example demonstrates how to implement the multiple-row selection of the Kendo UI Grid wrapper for Vue.
The following example demonstrates how to implement the multiple-cell selection of the Kendo UI Grid wrapper for Vue.
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.
- The built-in checkbox selection, which is enabled through the
selectableoption 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
persistSelectionproperty is not enabled, the selection is not persisted. The
persistSelectionoption 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.