Grid

Example

Razor

<kendo-grid>
    <ai></ai>
    <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></search>
    <selectable></selectable>
    <sortable />
    <stacked-layout-settings />
    <toolbar></toolbar>
</kendo-grid>

ChildTags

Tag Name	Details
ai	GridAiSettingsTagHelper
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
stacked-layout-settings	GridStackedLayoutSettingsSettingsTagHelper
toolbar	GridToolbarTagHelper

Attributes

Attribute	Type	Description
name	String	Sets the name of the component.
as-module	Boolean	Specifies whether the initialization script of the component will be rendered as a JavaScript module.
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.
adaptive-mode	AdaptiveMode	Specifies the adaptive rendering 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. This option expects the name of a JavaScript function that will be called to return the template.
alt-row-template-id	String	The id of the template used for rendering the alternate rows in the grid. This option expects the ID of the script element that contains the template.
alt-row-template-view	IHtmlContent	The id of the template used for rendering the alternate rows in the grid. This option expects the instance containing the created HTML.
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.
deferred	Boolean	Suppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
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.
data-layout-mode	DataLayoutMode	Defines the data layout mode of the grid.
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. This option expects the name of a JavaScript function that will be called to return the template.
detail-template-id	String	The id of the template used for rendering the detail rows in the grid. This option expects the ID of the script element that contains the template.
detail-template-view	IHtmlContent	The id of the template used for rendering the detail rows in the grid. This option expects the instance containing the created HTML.
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.
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	The name of the JavaScript function that will handle the beforeEdit event. 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	The name of the JavaScript function that will handle the cancel event. 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	The name of the JavaScript function that will handle the cellClose event. 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	The name of the JavaScript function that will handle the change event. 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	The name of the JavaScript function that will handle the changing event. 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	The name of the JavaScript function that will handle the columnHide event. 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	The name of the JavaScript function that will handle the columnLock event. 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	The name of the JavaScript function that will handle the columnMenuInit event. 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	The name of the JavaScript function that will handle the columnMenuOpen event. 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	The name of the JavaScript function that will handle the columnReorder event. 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	The name of the JavaScript function that will handle the columnResize event. 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	The name of the JavaScript function that will handle the columnShow event. 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	The name of the JavaScript function that will handle the columnStick event. 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	The name of the JavaScript function that will handle the columnUnlock event. 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	The name of the JavaScript function that will handle the columnUnstick event. 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	The name of the JavaScript function that will handle the dataBinding event. 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	The name of the JavaScript function that will handle the dataBound event. 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	The name of the JavaScript function that will handle the detailCollapse event. 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	The name of the JavaScript function that will handle the detailExpand event. 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	The name of the JavaScript function that will handle the detailInit event. 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	The name of the JavaScript function that will handle the edit event. 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	The name of the JavaScript function that will handle the excelExport event. Fired when the user clicks the "Export to Excel" toolbar button.
on-filter	String	The name of the JavaScript function that will handle the filter event. 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	The name of the JavaScript function that will handle the filterMenuInit event. 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	The name of the JavaScript function that will handle the filterMenuOpen event. 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	The name of the JavaScript function that will handle the group event. 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	The name of the JavaScript function that will handle the groupCollapse event. 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	The name of the JavaScript function that will handle the groupExpand event. 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	The name of the JavaScript function that will handle the navigate event. 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	The name of the JavaScript function that will handle the page event. 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	The name of the JavaScript function that will handle the paste event. 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	The name of the JavaScript function that will handle the pdfExport event. Fired when the user clicks the "Export to PDF" toolbar button.
on-remove	String	The name of the JavaScript function that will handle the remove event. 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	The name of the JavaScript function that will handle the rowReorder event. 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	The name of the JavaScript function that will handle the rowResize event. 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	The name of the JavaScript function that will handle the save event. 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	The name of the JavaScript function that will handle the saveChanges event. Fired when the user clicks the "Save changes" command button in the toolbar.The event handler function context (available via the this keyword) will be set to the widget instance.
on-sort	String	The name of the JavaScript function that will handle the sort event. 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. This option expects the name of a JavaScript function that will be called to return the template.
row-template-id	String	The id of the template used for rendering the rows in the grid. This option expects the ID of the script element that contains the template.
row-template-view	IHtmlContent	The id of the template used for rendering the rows in the grid. This option expects the instance containing the created HTML.
script-attributes	IDictionary<String,Object>	Sets the attributes that will be added to the script tag of the component's initialization script.
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. This option expects the name of a JavaScript function that will be called to return the template.
status-bar-template-id	String	The template which renders the Status Bar/Aggregates Bar. This option expects the ID of the script element that contains the template.
status-bar-template-view	IHtmlContent	The template which renders the Status Bar/Aggregates Bar. This option expects the instance containing the created HTML.
width	String	Sets the width of the Grid.