Grid

Directive

kendo-grid

Child Components

• GridColumn

Props

allow-copy Boolean | Object

If allow-copy is set to true and the selection of the Grid is enabled, the user can copy the selection into the clipboard and paste it in Excel or other programs that read TSV and CSV formats (allowCopy in Kendo UI for jQuery). By default, allow-copy is disabled and the default format is TSV. Can be set to a JavaScript object which represents the allow-copy configuration. The supported composite props are available in AllowCopyProps.

alt-row-template String | Function

The template for rendering the alternating table rows (altRowTemplate in Kendo UI for jQuery). Be default, the Grid renders a table row (<tr>) for every data source item.

auto-bind Boolean

If auto-bind is set to false, the Grid will not bind to the data source during initialization, that is, it will not call the fetch method of the dataSource instance (autoBind in Kendo UI for jQuery). In such scenarios data binding will occur when the change event of the dataSource instance is fired. By default, auto-bind is set to true and the Grid will bind to the data source that is specified in the configuration.

column-resize-handle-width Number

Defines the width (in pixels) of the resize handle for the column (columnResizeHandleWidth in Kendo UI for jQuery). For an easier grasping, apply a larger value.

columns Array

The configuration of the Grid columns (columns in Kendo UI for jQuery).

The supported values are:

• An array of JavaScript objects—JavaScript objects are interpreted as column configurations.
• Strings—Strings are interpreted as the field to which the column is bound.

The Grid creates a column for every item of the array.

column-menu Boolean | Object

If column-menu is set to true, the Grid displays the column menu when the user clicks the Chevron icon in the column headers (columnMenu in Kendo UI for jQuery). The column menu allows the user to show and hide columns and, if sorting and filtering are enabled, to filter and sort columns. By default, the column menu is disabled. Accepts a JavaScript object which represents the column menu configuration. The supported composite props are available in ColumnMenuProps.

data-source Object | Array

The data source of the Grid which is used for rendering the table rows (dataSource in Kendo UI for jQuery).

You can set data-source to:

• A JavaScript object which represents any valid data source configuration.
• A JavaScript array.
• An existing kendo.data.DataSource instance.

If the dataSource option is set to a JavaScript object or an array, the Grid will initialize a new kendo.data.DataSource instance by using that value as a data source configuration. If the dataSource option is an existing kendo.data.DataSource instance, the Grid will use that instance and will not initialize a new one.

detail-template String | Function

The template for rendering the detail rows (detailTemplate in Kendo UI for jQuery).

editable Boolean | String | Object

If editable is set to true, the user will be able to edit the data to which the Grid is bound (editable in Kendo UI for jQuery). By default, editing is disabled. Accepts a JavaScript object which represents the edit mode.

The supported edit modes are:

• inline
• (Default) incell
• popup

The supported composite props are available in EditableProps.

excel Object

Configures the Excel-export settings of the Grid (excel in Kendo UI for jQuery). The supported composite props are available in ExcelProps.

filterable Boolean | Object

If filterable is set to true, the user can filter the data source by using the filter menu of the Grid (filterable in Kendo UI for jQuery). By default, filtering is disabled. Accepts a JavaScript object which represents the filter menu configuration. The supported composite props are available in FilterableProps.

groupable Boolean | Object

If groupable is set to true, the user can group the Grid by dragging the column header cells (groupable in Kendo UI for jQuery). By default, grouping is disabled. Accepts a JavaScript object which represents the grouping configuration. The supported composite props are available in GroupableProps

height Number | String

The height of the Grid (height in Kendo UI for jQuery). Numeric values are treated as pixels.

messages Object

The text of the command buttons that are displayed within the Grid (messages in Kendo UI for jQuery). Primarily used for localization. The supported composite props are available in MessagesProps.

mobile Boolean | String

If mobile is set to true and the Grid is viewed in a mobile browser, the Grid will use adaptive rendering (mobile in Kendo UI for jQuery).

The supported values are:

• phone
• tablet

Both strings will force the Grid to use adaptive rendering regardless of the browser type. The Grid uses same layout for both phone and tablet.

navigatable Boolean

If navigatable is set to true, the user can navigate the Grid by using its keyboard navigation (navigatable in Kendo UI for jQuery). By default, the keyboard navigation is disabled.

no-records Boolean | Object

If no-records is set to true and the current view contains no records, a message similar to No records available will be displayed (noRecords in Kendo UI for jQuery). By default, no-records is disabled. The supported composite props are available in NoRecordsProps.

pageable Boolean | Object

If pageable is set to true, the Grid will display a pager (pageable in Kendo UI for jQuery). By default, paging is disabled. Accepts a JavaScript object which represents the pager configuration. The supported composite props are available in PageableProps.

pdf Object

Configures the PDF-export settings of the Grid (pdf in Kendo UI for jQuery). The supported composite props are available in PdfProps.

persist-selection Boolean

Sets a value which indicates whether the selection will be persisted when sorting, paging, filtering and other data operations are performed (persistSelection in Kendo UI for jQuery).

reorderable Boolean

If reorderable is set to true, the user can reorder the columns by dragging their header cells (reorderable in Kendo UI for jQuery). By default, reordering is disabled. Multi-level headers allow reordering only for the same level.

resizable Boolean

If resizable is set to true, users can resize columns by dragging the edges (resize handles) of their header cells (resizable in Kendo UI for jQuery). As of Kendo UI Q1 2015, users can also auto-fit a column by double-clicking its resize handle—the column will assume the smallest possible width which allows the column content to fit without the need to be wrapped. By default, column-resizing is disabled.

row-template String | Function

The template for rendering rows (rowTemplate in Kendo UI for jQuery). Be default, row-template renders a table row (<tr>) for every data source item.

scrollable Boolean | Object

If scrollable is set to true, the Grid will display a scrollbar when the total height or width of the rows exceeds the height or width of the Grid (scrollable in Kendo UI for jQuery). By default, scrolling is enabled. Accepts a JavaScript object which represents the scrolling configuration. The supported composite props are available in ScrollableProps.

selectable Boolean | String

If selectable is set to true, the user can select Grid rows (selectable in Kendo UI for jQuery). By default, selection is disabled.

The supported values are:

• row—The user can select a single row.
• cell—The user can select a single cell.
• multiple, row—The user can select multiple rows.
• multiple, cell—The user can select multiple cells.

sortable Boolean | Object

If sortable is set to true, the user can sort the Grid by clicking the column header cells (sortable in Kendo UI for jQuery). By default, sorting is disabled. Accepts a JavaScript object which represents the sorting configuration. The supported composite props are available in SortableProps.

toolbar Array

• If a string value is assigned to the toolbar configuration option, it will be treated as a single string template for the whole Grid toolbar and the string value will be passed as an argument to a kendo.template() function (toolbar in Kendo UI for jQuery).
• If a kendo.template() function call or a generic function reference value is assigned, then the return value of the function will be used to render the content of the Grid toolbar.
• If an array value is assigned, it will be treated as the list of commands that is displayed in the toolbar of the Grid.

Accepts the following commands:

• cancel—A built-in command that reverts the data changes which were made by the user.
• create—A built-in command that adds an empty data item to the Grid.
• save—A built-in command that persists the data changes which were made by the user.
• excel—A built-in command that exports the Grid in the MS Excel format.
• pdf—A built-in command that exports the Grid to PDF.
• Custom

Events

beforeedit: Function

Fires when the user tries to edit or creates a new data item before the editor is created (beforeEdit in Kendo UI for jQuery). Can be used for preventing the editing by using custom logic. The event handler function context (available through the this keyword) will be set to the Grid instance. The event will be fired only if selection is enabled.

cancel: Function

Fires when the user clicks the Cancel button when the Grid is in the inline or popup edit mode, or when the user closes the popup window (cancel in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

cellclose: Function

Fires when the Grid is in the in-cell edit mode and the cell is about to be closed (cellClose in Kendo UI for jQuery). The event is triggered after the user saved or canceled the changes and before the cell is closed. The event handler function context (available through the this keyword) will be set to the Grid instance.

change: Function

Fires when the user selects a table row or cell in the Grid (change in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

columnhide: Function

Fires when the user hides a column (columnHide in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

columnlock: Function

Fires when the user locks a column (columnLock in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

columnmenuinit: Function

Fires when the column menu is initialized (columnMenuInit in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

columnmenuopen: Function

Fires when the Grid column menu is opened and after the animations complete (columnMenuOpen in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

columnreorder: Function

Fires when the user changes the order of a column (columnReorder in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

columnresize: Function

Fires when the user resizes a column (columnResize in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

columnshow: Function

Fires when the user shows a column (columnShow in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

columnunlock: Function

Fires when the user unlocks a column (columnUnlock in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

databinding: Function

Fires before the Grid binds to its data source (dataBinding in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

databound: Function

Fires when the Grid is bound to data from its data source (dataBound in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

detailcollapse: Function

Fires when the user collapses a detail table row (detailCollapse in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

detailexpand: Function

Fires when the user expands a detail table row (detailExpand in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

detailinit: Function

Fires when a detail table row is initialized (detailInit in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

edit: Function

Fires when the user edits or creates a data item (edit in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

excelexport: Function

Fires when the user clicks the Export to Excel toolbar button (excelExport in Kendo UI for jQuery).

filter: Function

Fires when the user is about to filter the data source by using the filter UI (filter in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance. Available as of the Kendo UI 2016 R3 (2016.3.914) release.

filtermenuinit: Function

Fires when the Grid filter menu is initialized and opened for the first time (filterMenuInit in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

filtermenuopen: Function

Fires when the Grid filter menu is opened and after the animations complete (filterMenuOpen in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

group: Function

Fires when the user is about to group the data source or modify the state of the group descriptors by using the Grid group panel (group in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance. Available as of the Kendo UI 2016 R3 (2016.3.914) release.

groupcollapse: Function

Fires when the user collapses a group row (groupCollapse in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance. Available as of the Kendo UI 2017 R3 (2017.3.913) release.

groupexpand: Function

Fires when the user expands a group row (groupExpand in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance. Available as of the Kendo UI 2017 R3 (2017.3.913) release.

navigate: Function

Fires when navigatable is enabled and the user changes the current item by either using the mouse or interacting with the keyboard (navigate in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

page: Function

Fires when the user is about change the current page index of data source through the pager UI (page in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance. Available as of the Kendo UI 2016 R3 (2016.3.914) release.

pdfexport: Function

Fires when the user clicks the Export to PDF toolbar button (pdfExport in Kendo UI for jQuery).

remove: Function

Fires when the user clicks the Destroy command button and the delete operation is confirmed in the confirmation window (remove in Kendo UI for jQuery). If the user clicks the Cancel button in the window, the event will not be fired. The event handler function context (available through the this keyword) will be set to the Grid instance.

save: Function

Fires when a data item is saved (save in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

savechanges: Function

Fires when the user clicks the Save command button (saveChanges in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance.

sort: Function

Fires when the user is about to modify the current state of the data-source sort descriptors through the sort UI (sort in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the Grid instance. Available as of the Kendo UI 2016 R3 (2016.3.914) release.

Methods

For more details about the methods available in the component's API please check its Kendo UI for jQuery API documentation.

kendoWidget

returns

Returns the Kendo UI Grid instance.