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 />
    <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 selection of the Grid is enabled, the user can paste the current text contents 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.
deferred	Boolean	Suppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
alt-row-template-view	IHtmlContent	The id of the template used for rendering the alternate rows in the grid.
as-child-component	Boolean
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 through 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	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
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.
templates	IDictionary<String,String>
width	String	Sets the width of the Grid.