Grid

Example

<kendo-grid>
    <allow-copy />
    <column-menu></column-menu>
    <columns></columns>
    <context-menu></context-menu>
    <datasource></datasource>
    <editable></editable>
    <excel />
    <filterable />
    <grid-alt-row-template></grid-alt-row-template>
    <grid-detail-template></grid-detail-template>
    <grid-row-template></grid-row-template>
    <grid-toolbar-template></grid-toolbar-template>
    <groupable></groupable>
    <messages />
    <no-records />
    <pageable></pageable>
    <pdf></pdf>
    <reorderable></reorderable>
    <resizable></resizable>
    <scrollable />
    <search />
    <selectable></selectable>
    <sortable />
    <toolbar></toolbar>
</kendo-grid>

ChildTags

Tag Name Details
allow-copy GridAllowCopySettingsTagHelper
column-menu GridColumnMenuSettingsTagHelper
columns GridColumnsTagHelper
context-menu GridContextMenuSettingsTagHelper
datasource DataSourceTagHelper
editable GridEditableSettingsTagHelper
excel GridExcelSettingsTagHelper
filterable GridFilterableSettingsTagHelper
grid-alt-row-template TemplateTagHelper
grid-detail-template TemplateTagHelper
grid-row-template TemplateTagHelper
grid-toolbar-template TemplateTagHelper
groupable GridGroupableSettingsTagHelper
messages GridMessagesSettingsTagHelper
no-records GridNoRecordsSettingsTagHelper
pageable GridPageableSettingsTagHelper
pdf GridPdfSettingsTagHelper
reorderable GridReorderableSettingsTagHelper
resizable GridResizableSettingsTagHelper
scrollable GridScrollableSettingsTagHelper
search GridSearchSettingsTagHelper
selectable GridSelectableSettings
sortable GridSortableSettingsTagHelper
toolbar GridToolbarTagHelper

Attributes

Attribute Type Description
name String Sets the name of the component.
allow-paste Boolean If set to true and the selection functionality of the Grid is enabled, the user can paste the current textual content of the clipboard into the Grid.
alt-row-template String The id of the template used for rendering the alternate rows in the grid.
alt-row-template-handler String The id of the template used for rendering the alternate rows in the grid.
alt-row-template-id String The id of the template used for rendering the alternate rows in the grid.
alt-row-template-view IHtmlContent The id of the template used for rendering the alternate rows in the grid.
as-module Boolean
deferred Boolean Suppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
auto-bind Boolean If set to false, the Grid will not bind to the data source during initialization, i.e. it will not call the fetch method of the dataSource instance. In such scenarios data binding will occur when the change event of the dataSource instance is fired. By default, autoBind is set to true and the widget will bind to the data source specified in the configuration.
column-resize-handle-width Double Defines the width of the column resize handle in pixels. Apply a larger value for easier grasping.
datasource-id String Sets the ID of the DataSource widget used by the Grid.
detail-template String The id of the template used for rendering the detail rows in the grid.
detail-template-handler String The id of the template used for rendering the detail rows in the grid.
detail-template-id String The id of the template used for rendering the detail rows in the grid.
detail-template-view IHtmlContent The id of the template used for rendering the detail rows in the grid.
encode-titles Boolean If set to true the column title will be HTML-encoded before it is displayed. If set to false the column title will be displayed as is.
is-in-client-template Boolean When placing a Tag Helper within a Kendo Template, set the type to text/html and add the is-in-client-template="true" attribute.
context-menu Boolean If set to true, the context menu for the Grid will be enabled. Use the context-menu TagHelper to customize the context menu.
has-client-component Boolean
height Double The height of the grid. Numeric values are treated as pixels.When string is used the format can be "number" + "px" or "number" alone. For example: "100px" or "100".
loader-type GridLoaderType Defines what loader will be used while loading the data. Possible values are: "loadingPanel" - a panel with a circular loading indicator. or "skeleton" - a skeleton enabled loader..
mobile String Can be set to "phone". This will force the Grid to use adaptive rendering regardless of browser type.
mobile-enabled Boolean If set to true and the Grid is viewed on mobile browser it will use adaptive rendering.
navigatable Boolean If set to true the user could navigate the component using the keyboard navigation. By default keyboard navigation is disabled.
on-before-edit String Fired when the user tries to edit or create a data item, before the editor is created. Can be used to preventing editing according to any custom logic.The event handler function context (available via the this keyword) will be set to the widget instance.
on-cancel String Fired when the user clicks the "cancel" button (in inline or popup editing mode) or closes the popup window.The event handler function context (available via the this keyword) will be set to the widget instance.
on-cell-close String Fired when "incell" edit mode is used and the cell is going to be closed. The event is triggerd after saving or canceling the changes, but before the cell is closed.The event handler function context (available via the this keyword) will be set to the widget instance.
on-change String Fired when the user selects or deselects a table row or cell in the grid. To retrieve the selected elements, use the select method.The event handler function context (available via the this keyword) will be set to the widget instance.The event will be fired only when the Grid is selectable.
on-changing String Fired when the user is about to select a table row or cell.The event will be fired only when the Grid is selectable.
on-column-hide String Fired when the user hides a column.The event handler function context (available via the this keyword) will be set to the widget instance.
on-column-lock String Fired when the user lock a column.The event handler function context (available via the this keyword) will be set to the widget instance.
on-column-menu-init String Fired when the column menu is initialized.The event handler function context (available via the this keyword) will be set to the widget instance.
on-column-menu-open String Fired when the grid column menu is opened, after the animations are completed.The event handler function context (available via the this keyword) will be set to the widget instance.
on-column-reorder String Fired when the user changes the order of a column.The event handler function context (available via the this keyword) will be set to the widget instance.
on-column-resize String Fired when the user resizes a column.The event handler function context (available via the this keyword) will be set to the widget instance.
on-column-show String Fired when the user shows a column.The event handler function context (available via the this keyword) will be set to the widget instance.
on-column-stick String Fired when the user sticks a column.The event handler function context (available via the this keyword) will be set to the widget instance.
on-column-unlock String Fired when the user unlock a column.The event handler function context (available via the this keyword) will be set to the widget instance.
on-column-unstick String Fired when the user unsticks a column.The event handler function context (available via the this keyword) will be set to the widget instance.
on-data-binding String Fired before the widget binds to its data source.The event handler function context (available via the this keyword) will be set to the widget instance.
on-data-bound String Fired when the widget is bound to data from its data source.The event handler function context (available via the this keyword) will be set to the widget instance.
on-detail-collapse String Fired when the user collapses a detail table row.The event handler function context (available via the this keyword) will be set to the widget instance.
on-detail-expand String Fired when the user expands a detail table row.The event handler function context (available via the this keyword) will be set to the widget instance.
on-detail-init String Fired when a detail table row is initialized.The event handler function context (available via the this keyword) will be set to the widget instance.
on-edit String Fired when the user edits or creates a data item.The event handler function context (available via the this keyword) will be set to the widget instance.
on-excel-export String Fired when the user clicks the "Export to Excel" toolbar button.
on-filter String Fired when the user is about to filter the DataSource via the filter UI.The event handler function context (available via the this keyword) will be set to the widget instance.Introduced in the Kendo UI 2016 R3 (2016.3.914) release.
on-filter-menu-init String Fired when the grid filter menu is initialized, when it is opened for the first time.The event handler function context (available via the this keyword) will be set to the widget instance.
on-filter-menu-open String Fired when the grid filter menu is opened, after the animations are completed.The event handler function context (available via the this keyword) will be set to the widget instance.
on-group String Fired when the user is about to group the DataSource or modify the group descriptors state via the Grid group panel.The event handler function context (available via the this keyword) will be set to the widget instance.Introduced in the Kendo UI 2016 R3 (2016.3.914) release.
on-group-collapse String Fired when the user collapses a group row.The event handler function context (available via the this keyword) will be set to the widget instance.Introduced in the Kendo UI 2017 R3 (2017.3.913) release.
on-group-expand String Fired when the user expands a group row.The event handler function context (available via the this keyword) will be set to the widget instance.Introduced in the Kendo UI 2017 R3 (2017.3.913) release.
on-navigate String Fired when navigatable is enabled and the user change current item with either mouse or keyboard interaction.The event handler function context (available via the this keyword) will be set to the widget instance.
on-page String Fired when the user is about change the current page index of DataSource via the pager UI.The event handler function context (available via the this keyword) will be set to the widget instance.Introduced in the Kendo UI 2016 R3 (2016.3.914) release.
on-paste String Fired when the user pastes data using the Grid's built-in paste mechanism.The event handler function context (available via the this keyword) will be set to the widget instance.
on-pdf-export String Fired when the user clicks the "Export to PDF" toolbar button.
on-remove String Fired when the user clicks the "destroy" command button and delete operation is confirmed in the confirmation window, if the cancel button in the window is clicked the event will not be fired.The event handler function context (available via the this keyword) will be set to the widget instance.
on-row-reorder String Fired when the user changes the order of a row.The event handler function context (available via the this keyword) will be set to the widget instance.
on-row-resize String Fired when the user resizes a row (rows).The event handler function context (available via the this keyword) will be set to the widget instance.
on-save String Fired when a data item is saved.The event handler function context (available via the this keyword) will be set to the widget instance.
on-save-changes String Fired when the user clicks the "save" command button.The event handler function context (available via the this keyword) will be set to the widget instance.
on-sort String Fired when the user is about to modify the current state of sort descriptors of DataSource via the sort UI.The event handler function context (available via the this keyword) will be set to the widget instance.Introduced in the Kendo UI 2016 R3 (2016.3.914) release.
persist-selection Boolean Sets a value indicating whether the selection will be persisted when sorting, paging, filtering and etc are performed.
resizable-enabled Boolean If set to true, column resizing will be enabled. Use the resizable TagHelper to enable row resizing
row-template String The id of the template used for rendering the rows in the grid.
row-template-handler String The id of the template used for rendering the rows in the grid.
row-template-id String The id of the template used for rendering the rows in the grid.
row-template-view IHtmlContent The id of the template used for rendering the rows in the grid.
sanitize-id Boolean
script-attributes IDictionary<String,Object>
selectable String Specifies the selection type of the grid.
size ComponentSize
status-bar-template String The template which renders the Status Bar/Aggregates Bar.
status-bar-template-handler String The template which renders the Status Bar/Aggregates Bar.
status-bar-template-id String The template which renders the Status Bar/Aggregates Bar.
status-bar-template-view IHtmlContent The template which renders the Status Bar/Aggregates Bar.
width String Sets the width of the Grid.
In this article
Related articles
Not finding the help you need?