<kendo:grid>

A JSP wrapper for Kendo UI Grid.

Configuration Attributes

allowCopy boolean

If set to true and selection of the Grid is enabled the user could copy the selection into the clipboard and paste it into Excel or other similar programs that understand TSV/CSV formats. By default allowCopy is disabled and the default format is TSV. Can be set to a JavaScript object which represents the allowCopy configuration. Further configuration is available via kendo:grid-allowCopy.

Example

<kendo:grid allowCopy="allowCopy">
</kendo:grid>

altRowTemplate java.lang.String

The id of the template used for rendering the alternate rows in the grid.

Example

<kendo:grid altRowTemplate="altRowTemplate">
</kendo:grid>

autoBind 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.

Example

<kendo:grid autoBind="autoBind">
</kendo:grid>

columnMenu boolean

If set to true the grid will display the column menu when the user clicks the chevron icon in the column headers. The column menu allows the user to show and hide columns, filter and sort (if filtering and sorting are enabled). By default the column menu is not enabled.Can be set to a JavaScript object which represents the column menu configuration. Further configuration is available via kendo:grid-columnMenu.

Example

<kendo:grid columnMenu="columnMenu">
</kendo:grid>

columnResizeHandleWidth float

Defines the width of the column resize handle in pixels. Apply a larger value for easier grasping.

Example

<kendo:grid columnResizeHandleWidth="columnResizeHandleWidth">
</kendo:grid>

detailTemplate java.lang.String

The id of the template used for rendering the detail rows in the grid.

Example

<kendo:grid detailTemplate="detailTemplate">
</kendo:grid>

editable boolean

If set to true the user would be able to edit the data to which the grid is bound. By default editing is disabled.Can be set to a string ("inline", "incell" or "popup") to specify the editing mode. The default editing mode is "incell".Can be set to a JavaScript object which represents the editing configuration. Further configuration is available via kendo:grid-editable.

Example

<kendo:grid editable="editable">
</kendo:grid>

filterable boolean

If set to true the user can filter the data source using the grid filter menu. Filtering is disabled by default.Can be set to a JavaScript object which represents the filter menu configuration. Further configuration is available via kendo:grid-filterable.

Example

<kendo:grid filterable="filterable">
</kendo:grid>

groupable boolean

If set to true the user could group the grid by dragging the column header cells. By default grouping is disabled.Can be set to a JavaScript object which represents the grouping configuration. Further configuration is available via kendo:grid-groupable.

Example

<kendo:grid groupable="groupable">
</kendo:grid>

height java.lang.Object

The height of the grid. Numeric values are treated as pixels.

Example

<kendo:grid height="height">
</kendo:grid>

mobile java.lang.Object

If set to true and the grid is viewed on mobile browser it will use adaptive rendering.Can be set to a string phone or tablet which will force the widget to use adaptive rendering regardless of browser type. The grid uses same layout for both phone and tablet.

Example

<kendo:grid mobile="mobile">
</kendo:grid>

If set to true the use could navigate the widget using the keyboard navigation. By default keyboard navigation is disabled.

Example

<kendo:grid navigatable="navigatable">
</kendo:grid>

noRecords boolean

If set to true and current view contains no records, message similar to "No records available" will be displayed. By default this option is disabled. Further configuration is available via kendo:grid-noRecords.

Example

<kendo:grid noRecords="noRecords">
</kendo:grid>

pageable boolean

If set to true the grid will display a pager. By default paging is disabled.Can be set to a JavaScript object which represents the pager configuration. Further configuration is available via kendo:grid-pageable.

Example

<kendo:grid pageable="pageable">
</kendo:grid>

persistSelection boolean

Sets a value indicating whether the selection will be persisted when sorting, paging, filtering and etc are performed.

Example

<kendo:grid persistSelection="persistSelection">
</kendo:grid>

reorderable boolean

If set to true the user could reorder the columns by dragging their header cells. By default reordering is disabled. Multi-level headers allow reordering only in same level.

Example

<kendo:grid reorderable="reorderable">
</kendo:grid>

resizable boolean

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

Example

<kendo:grid resizable="resizable">
</kendo:grid>

rowTemplate java.lang.String

The id of the template used for rendering the rows in the grid.

Example

<kendo:grid rowTemplate="rowTemplate">
</kendo:grid>

scrollable boolean

If set to true the grid will display a scrollbar when the total row height (or width) exceeds the grid height (or width). By default scrolling is enabled.Can be set to a JavaScript object which represents the scrolling configuration. Further configuration is available via kendo:grid-scrollable.

Example

<kendo:grid scrollable="scrollable">
</kendo:grid>

selectable java.lang.Object

If set to true the user would be able to select grid rows. By default selection is disabled.Can also be set to the following string values: "row" - the user can select a single row.; "cell" - the user can select a single cell.; "multiple, row" - the user can select multiple rows. or "multiple, cell" - the user can select multiple cells..

Example

<kendo:grid selectable="selectable">
</kendo:grid>

sortable boolean

If set to true the user could sort the grid by clicking the column header cells. By default sorting is disabled.Can be set to a JavaScript object which represents the sorting configuration. Further configuration is available via kendo:grid-sortable.

Example

<kendo:grid sortable="sortable">
</kendo:grid>

toolbar java.lang.String

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.If a Function value is assigned (it may be a kendo.template() function call or a generic function reference), then the return value of the function will be used to render the Grid Toolbar contents.If an Array value is assigned, it will be treated as the list of commands displayed in the grid's Toolbar. Commands can be custom or built-in ("cancel", "create", "save", "excel", "pdf").The "cancel" built-in command reverts any data changes done by the end user.The "create" command adds an empty data item to the grid.The "save" command persists any data changes done by the end user.The "excel" command exports the grid data in MS Excel format.The "pdf" command exports the grid data in PDF format. Further configuration is available via kendo:grid-toolbar.

Example

<kendo:grid toolbar="toolbar">
</kendo:grid>

Configuration JSP Tags

kendo:grid-allowCopy

If set to true and selection of the Grid is enabled the user could copy the selection into the clipboard and paste it into Excel or other similar programs that understand TSV/CSV formats. By default allowCopy is disabled and the default format is TSV. Can be set to a JavaScript object which represents the allowCopy configuration.

More documentation is available at kendo:grid-allowCopy.

Example

<kendo:grid>
    <kendo:grid-allowCopy></kendo:grid-allowCopy>
</kendo:grid>

kendo:grid-columnMenu

If set to true the grid will display the column menu when the user clicks the chevron icon in the column headers. The column menu allows the user to show and hide columns, filter and sort (if filtering and sorting are enabled). By default the column menu is not enabled.Can be set to a JavaScript object which represents the column menu configuration.

More documentation is available at kendo:grid-columnMenu.

Example

<kendo:grid>
    <kendo:grid-columnMenu></kendo:grid-columnMenu>
</kendo:grid>

kendo:grid-columns

The configuration of the grid columns. An array of JavaScript objects or strings. JavaScript objects are interpreted as column configurations. Strings are interpreted as thefield to which the column is bound. The grid will create a column for every item of the array.

More documentation is available at kendo:grid-columns.

Example

<kendo:grid>
    <kendo:grid-columns></kendo:grid-columns>
</kendo:grid>

kendo:grid-editable

If set to true the user would be able to edit the data to which the grid is bound. By default editing is disabled.Can be set to a string ("inline", "incell" or "popup") to specify the editing mode. The default editing mode is "incell".Can be set to a JavaScript object which represents the editing configuration.

More documentation is available at kendo:grid-editable.

Example

<kendo:grid>
    <kendo:grid-editable></kendo:grid-editable>
</kendo:grid>

kendo:grid-excel

Configures the Kendo UI Grid Excel export settings.

More documentation is available at kendo:grid-excel.

Example

<kendo:grid>
    <kendo:grid-excel></kendo:grid-excel>
</kendo:grid>

kendo:grid-filterable

If set to true the user can filter the data source using the grid filter menu. Filtering is disabled by default.Can be set to a JavaScript object which represents the filter menu configuration.

More documentation is available at kendo:grid-filterable.

Example

<kendo:grid>
    <kendo:grid-filterable></kendo:grid-filterable>
</kendo:grid>

kendo:grid-groupable

If set to true the user could group the grid by dragging the column header cells. By default grouping is disabled.Can be set to a JavaScript object which represents the grouping configuration.

More documentation is available at kendo:grid-groupable.

Example

<kendo:grid>
    <kendo:grid-groupable></kendo:grid-groupable>
</kendo:grid>

kendo:grid-messages

Defines the text of the command buttons that are shown within the Grid. Used primarily for localization.

More documentation is available at kendo:grid-messages.

Example

<kendo:grid>
    <kendo:grid-messages></kendo:grid-messages>
</kendo:grid>

kendo:grid-noRecords

If set to true and current view contains no records, message similar to "No records available" will be displayed. By default this option is disabled.

More documentation is available at kendo:grid-noRecords.

Example

<kendo:grid>
    <kendo:grid-noRecords></kendo:grid-noRecords>
</kendo:grid>

kendo:grid-pageable

If set to true the grid will display a pager. By default paging is disabled.Can be set to a JavaScript object which represents the pager configuration.

More documentation is available at kendo:grid-pageable.

Example

<kendo:grid>
    <kendo:grid-pageable></kendo:grid-pageable>
</kendo:grid>

kendo:grid-pdf

Configures the Kendo UI Grid PDF export settings.

More documentation is available at kendo:grid-pdf.

Example

<kendo:grid>
    <kendo:grid-pdf></kendo:grid-pdf>
</kendo:grid>

kendo:grid-scrollable

If set to true the grid will display a scrollbar when the total row height (or width) exceeds the grid height (or width). By default scrolling is enabled.Can be set to a JavaScript object which represents the scrolling configuration.

More documentation is available at kendo:grid-scrollable.

Example

<kendo:grid>
    <kendo:grid-scrollable></kendo:grid-scrollable>
</kendo:grid>

kendo:grid-sortable

If set to true the user could sort the grid by clicking the column header cells. By default sorting is disabled.Can be set to a JavaScript object which represents the sorting configuration.

More documentation is available at kendo:grid-sortable.

Example

<kendo:grid>
    <kendo:grid-sortable></kendo:grid-sortable>
</kendo:grid>

kendo:grid-toolbar

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.If a Function value is assigned (it may be a kendo.template() function call or a generic function reference), then the return value of the function will be used to render the Grid Toolbar contents.If an Array value is assigned, it will be treated as the list of commands displayed in the grid's Toolbar. Commands can be custom or built-in ("cancel", "create", "save", "excel", "pdf").The "cancel" built-in command reverts any data changes done by the end user.The "create" command adds an empty data item to the grid.The "save" command persists any data changes done by the end user.The "excel" command exports the grid data in MS Excel format.The "pdf" command exports the grid data in PDF format.

More documentation is available at kendo:grid-toolbar.

Example

<kendo:grid>
    <kendo:grid-toolbar></kendo:grid-toolbar>
</kendo:grid>

Event Attributes

beforeEdit String

Fired when the user try to edit or create a data item, before the editor is created. Can be used for preventing the editing depending on custom logic.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the beforeEdit event documentation.

Example

<kendo:grid beforeEdit="handle_beforeEdit">
</kendo:grid>
<script>
    function handle_beforeEdit(e) {
        // Code to handle the beforeEdit event.
    }
</script>

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.

For additional information check the cancel event documentation.

Example

<kendo:grid cancel="handle_cancel">
</kendo:grid>
<script>
    function handle_cancel(e) {
        // Code to handle the cancel event.
    }
</script>

cellClose 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 chages, but before the cell is closed.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the cellClose event documentation.

Example

<kendo:grid cellClose="handle_cellClose">
</kendo:grid>
<script>
    function handle_cellClose(e) {
        // Code to handle the cellClose event.
    }
</script>

change String

Fired when the user selects a table row or cell in the grid.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the change event documentation.

Example

<kendo:grid change="handle_change">
</kendo:grid>
<script>
    function handle_change(e) {
        // Code to handle the change event.
    }
</script>

columnHide 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.

For additional information check the columnHide event documentation.

Example

<kendo:grid columnHide="handle_columnHide">
</kendo:grid>
<script>
    function handle_columnHide(e) {
        // Code to handle the columnHide event.
    }
</script>

columnMenuInit 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.

For additional information check the columnMenuInit event documentation.

Example

<kendo:grid columnMenuInit="handle_columnMenuInit">
</kendo:grid>
<script>
    function handle_columnMenuInit(e) {
        // Code to handle the columnMenuInit event.
    }
</script>

columnMenuOpen 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.

For additional information check the columnMenuOpen event documentation.

Example

<kendo:grid columnMenuOpen="handle_columnMenuOpen">
</kendo:grid>
<script>
    function handle_columnMenuOpen(e) {
        // Code to handle the columnMenuOpen event.
    }
</script>

columnReorder 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.

For additional information check the columnReorder event documentation.

Example

<kendo:grid columnReorder="handle_columnReorder">
</kendo:grid>
<script>
    function handle_columnReorder(e) {
        // Code to handle the columnReorder event.
    }
</script>

columnResize 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.

For additional information check the columnResize event documentation.

Example

<kendo:grid columnResize="handle_columnResize">
</kendo:grid>
<script>
    function handle_columnResize(e) {
        // Code to handle the columnResize event.
    }
</script>

columnShow 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.

For additional information check the columnShow event documentation.

Example

<kendo:grid columnShow="handle_columnShow">
</kendo:grid>
<script>
    function handle_columnShow(e) {
        // Code to handle the columnShow event.
    }
</script>

dataBinding 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.

For additional information check the dataBinding event documentation.

Example

<kendo:grid dataBinding="handle_dataBinding">
</kendo:grid>
<script>
    function handle_dataBinding(e) {
        // Code to handle the dataBinding event.
    }
</script>

dataBound 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.

For additional information check the dataBound event documentation.

Example

<kendo:grid dataBound="handle_dataBound">
</kendo:grid>
<script>
    function handle_dataBound(e) {
        // Code to handle the dataBound event.
    }
</script>

detailCollapse 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.

For additional information check the detailCollapse event documentation.

Example

<kendo:grid detailCollapse="handle_detailCollapse">
</kendo:grid>
<script>
    function handle_detailCollapse(e) {
        // Code to handle the detailCollapse event.
    }
</script>

detailExpand 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.

For additional information check the detailExpand event documentation.

Example

<kendo:grid detailExpand="handle_detailExpand">
</kendo:grid>
<script>
    function handle_detailExpand(e) {
        // Code to handle the detailExpand event.
    }
</script>

detailInit 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.

For additional information check the detailInit event documentation.

Example

<kendo:grid detailInit="handle_detailInit">
</kendo:grid>
<script>
    function handle_detailInit(e) {
        // Code to handle the detailInit event.
    }
</script>

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.

For additional information check the edit event documentation.

Example

<kendo:grid edit="handle_edit">
</kendo:grid>
<script>
    function handle_edit(e) {
        // Code to handle the edit event.
    }
</script>

excelExport String

Fired when the user clicks the "Export to Excel" toolbar button.

For additional information check the excelExport event documentation.

Example

<kendo:grid excelExport="handle_excelExport">
</kendo:grid>
<script>
    function handle_excelExport(e) {
        // Code to handle the excelExport event.
    }
</script>

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.

For additional information check the filter event documentation.

Example

<kendo:grid filter="handle_filter">
</kendo:grid>
<script>
    function handle_filter(e) {
        // Code to handle the filter event.
    }
</script>

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.

For additional information check the group event documentation.

Example

<kendo:grid group="handle_group">
</kendo:grid>
<script>
    function handle_group(e) {
        // Code to handle the group event.
    }
</script>

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.

For additional information check the page event documentation.

Example

<kendo:grid page="handle_page">
</kendo:grid>
<script>
    function handle_page(e) {
        // Code to handle the page event.
    }
</script>

pdfExport String

Fired when the user clicks the "Export to PDF" toolbar button.

For additional information check the pdfExport event documentation.

Example

<kendo:grid pdfExport="handle_pdfExport">
</kendo:grid>
<script>
    function handle_pdfExport(e) {
        // Code to handle the pdfExport event.
    }
</script>

filterMenuInit 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.

For additional information check the filterMenuInit event documentation.

Example

<kendo:grid filterMenuInit="handle_filterMenuInit">
</kendo:grid>
<script>
    function handle_filterMenuInit(e) {
        // Code to handle the filterMenuInit event.
    }
</script>

filterMenuOpen 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.

For additional information check the filterMenuOpen event documentation.

Example

<kendo:grid filterMenuOpen="handle_filterMenuOpen">
</kendo:grid>
<script>
    function handle_filterMenuOpen(e) {
        // Code to handle the filterMenuOpen event.
    }
</script>

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.

For additional information check the remove event documentation.

Example

<kendo:grid remove="handle_remove">
</kendo:grid>
<script>
    function handle_remove(e) {
        // Code to handle the remove event.
    }
</script>

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.

For additional information check the save event documentation.

Example

<kendo:grid save="handle_save">
</kendo:grid>
<script>
    function handle_save(e) {
        // Code to handle the save event.
    }
</script>

saveChanges 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.

For additional information check the saveChanges event documentation.

Example

<kendo:grid saveChanges="handle_saveChanges">
</kendo:grid>
<script>
    function handle_saveChanges(e) {
        // Code to handle the saveChanges event.
    }
</script>

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.

For additional information check the sort event documentation.

Example

<kendo:grid sort="handle_sort">
</kendo:grid>
<script>
    function handle_sort(e) {
        // Code to handle the sort event.
    }
</script>

columnLock 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.

For additional information check the columnLock event documentation.

Example

<kendo:grid columnLock="handle_columnLock">
</kendo:grid>
<script>
    function handle_columnLock(e) {
        // Code to handle the columnLock event.
    }
</script>

columnUnlock 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.

For additional information check the columnUnlock event documentation.

Example

<kendo:grid columnUnlock="handle_columnUnlock">
</kendo:grid>
<script>
    function handle_columnUnlock(e) {
        // Code to handle the columnUnlock event.
    }
</script>

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.

For additional information check the navigate event documentation.

Example

<kendo:grid navigate="handle_navigate">
</kendo:grid>
<script>
    function handle_navigate(e) {
        // Code to handle the navigate event.
    }
</script>

Event Tags

kendo:grid-beforeEdit

Fired when the user try to edit or create a data item, before the editor is created. Can be used for preventing the editing depending on custom logic.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the beforeEdit event documentation.

Example

<kendo:grid>
    <kendo:grid-beforeEdit>
        <script>
            function(e) {
                // Code to handle the beforeEdit event.
            }
        </script>
    </kendo:grid-beforeEdit>
</kendo:grid>

kendo:grid-cancel

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.

For additional information check the cancel event documentation.

Example

<kendo:grid>
    <kendo:grid-cancel>
        <script>
            function(e) {
                // Code to handle the cancel event.
            }
        </script>
    </kendo:grid-cancel>
</kendo:grid>

kendo:grid-cellClose

Fired when "incell" edit mode is used and the cell is going to be closed. The event is triggerd after saving or canceling the chages, but before the cell is closed.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the cellClose event documentation.

Example

<kendo:grid>
    <kendo:grid-cellClose>
        <script>
            function(e) {
                // Code to handle the cellClose event.
            }
        </script>
    </kendo:grid-cellClose>
</kendo:grid>

kendo:grid-change

Fired when the user selects a table row or cell in the grid.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the change event documentation.

Example

<kendo:grid>
    <kendo:grid-change>
        <script>
            function(e) {
                // Code to handle the change event.
            }
        </script>
    </kendo:grid-change>
</kendo:grid>

kendo:grid-columnHide

Fired when the user hides a column.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the columnHide event documentation.

Example

<kendo:grid>
    <kendo:grid-columnHide>
        <script>
            function(e) {
                // Code to handle the columnHide event.
            }
        </script>
    </kendo:grid-columnHide>
</kendo:grid>

kendo:grid-columnMenuInit

Fired when the column menu is initialized.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the columnMenuInit event documentation.

Example

<kendo:grid>
    <kendo:grid-columnMenuInit>
        <script>
            function(e) {
                // Code to handle the columnMenuInit event.
            }
        </script>
    </kendo:grid-columnMenuInit>
</kendo:grid>

kendo:grid-columnMenuOpen

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.

For additional information check the columnMenuOpen event documentation.

Example

<kendo:grid>
    <kendo:grid-columnMenuOpen>
        <script>
            function(e) {
                // Code to handle the columnMenuOpen event.
            }
        </script>
    </kendo:grid-columnMenuOpen>
</kendo:grid>

kendo:grid-columnReorder

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.

For additional information check the columnReorder event documentation.

Example

<kendo:grid>
    <kendo:grid-columnReorder>
        <script>
            function(e) {
                // Code to handle the columnReorder event.
            }
        </script>
    </kendo:grid-columnReorder>
</kendo:grid>

kendo:grid-columnResize

Fired when the user resizes a column.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the columnResize event documentation.

Example

<kendo:grid>
    <kendo:grid-columnResize>
        <script>
            function(e) {
                // Code to handle the columnResize event.
            }
        </script>
    </kendo:grid-columnResize>
</kendo:grid>

kendo:grid-columnShow

Fired when the user shows a column.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the columnShow event documentation.

Example

<kendo:grid>
    <kendo:grid-columnShow>
        <script>
            function(e) {
                // Code to handle the columnShow event.
            }
        </script>
    </kendo:grid-columnShow>
</kendo:grid>

kendo:grid-dataBinding

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.

For additional information check the dataBinding event documentation.

Example

<kendo:grid>
    <kendo:grid-dataBinding>
        <script>
            function(e) {
                // Code to handle the dataBinding event.
            }
        </script>
    </kendo:grid-dataBinding>
</kendo:grid>

kendo:grid-dataBound

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.

For additional information check the dataBound event documentation.

Example

<kendo:grid>
    <kendo:grid-dataBound>
        <script>
            function(e) {
                // Code to handle the dataBound event.
            }
        </script>
    </kendo:grid-dataBound>
</kendo:grid>

kendo:grid-detailCollapse

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.

For additional information check the detailCollapse event documentation.

Example

<kendo:grid>
    <kendo:grid-detailCollapse>
        <script>
            function(e) {
                // Code to handle the detailCollapse event.
            }
        </script>
    </kendo:grid-detailCollapse>
</kendo:grid>

kendo:grid-detailExpand

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.

For additional information check the detailExpand event documentation.

Example

<kendo:grid>
    <kendo:grid-detailExpand>
        <script>
            function(e) {
                // Code to handle the detailExpand event.
            }
        </script>
    </kendo:grid-detailExpand>
</kendo:grid>

kendo:grid-detailInit

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.

For additional information check the detailInit event documentation.

Example

<kendo:grid>
    <kendo:grid-detailInit>
        <script>
            function(e) {
                // Code to handle the detailInit event.
            }
        </script>
    </kendo:grid-detailInit>
</kendo:grid>

kendo:grid-edit

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.

For additional information check the edit event documentation.

Example

<kendo:grid>
    <kendo:grid-edit>
        <script>
            function(e) {
                // Code to handle the edit event.
            }
        </script>
    </kendo:grid-edit>
</kendo:grid>

kendo:grid-excelExport

Fired when the user clicks the "Export to Excel" toolbar button.

For additional information check the excelExport event documentation.

Example

<kendo:grid>
    <kendo:grid-excelExport>
        <script>
            function(e) {
                // Code to handle the excelExport event.
            }
        </script>
    </kendo:grid-excelExport>
</kendo:grid>

kendo:grid-filter

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.

For additional information check the filter event documentation.

Example

<kendo:grid>
    <kendo:grid-filter>
        <script>
            function(e) {
                // Code to handle the filter event.
            }
        </script>
    </kendo:grid-filter>
</kendo:grid>

kendo:grid-group

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.

For additional information check the group event documentation.

Example

<kendo:grid>
    <kendo:grid-group>
        <script>
            function(e) {
                // Code to handle the group event.
            }
        </script>
    </kendo:grid-group>
</kendo:grid>

kendo:grid-page

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.

For additional information check the page event documentation.

Example

<kendo:grid>
    <kendo:grid-page>
        <script>
            function(e) {
                // Code to handle the page event.
            }
        </script>
    </kendo:grid-page>
</kendo:grid>

kendo:grid-pdfExport

Fired when the user clicks the "Export to PDF" toolbar button.

For additional information check the pdfExport event documentation.

Example

<kendo:grid>
    <kendo:grid-pdfExport>
        <script>
            function(e) {
                // Code to handle the pdfExport event.
            }
        </script>
    </kendo:grid-pdfExport>
</kendo:grid>

kendo:grid-filterMenuInit

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.

For additional information check the filterMenuInit event documentation.

Example

<kendo:grid>
    <kendo:grid-filterMenuInit>
        <script>
            function(e) {
                // Code to handle the filterMenuInit event.
            }
        </script>
    </kendo:grid-filterMenuInit>
</kendo:grid>

kendo:grid-filterMenuOpen

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.

For additional information check the filterMenuOpen event documentation.

Example

<kendo:grid>
    <kendo:grid-filterMenuOpen>
        <script>
            function(e) {
                // Code to handle the filterMenuOpen event.
            }
        </script>
    </kendo:grid-filterMenuOpen>
</kendo:grid>

kendo:grid-remove

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.

For additional information check the remove event documentation.

Example

<kendo:grid>
    <kendo:grid-remove>
        <script>
            function(e) {
                // Code to handle the remove event.
            }
        </script>
    </kendo:grid-remove>
</kendo:grid>

kendo:grid-save

Fired when a data item is saved.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the save event documentation.

Example

<kendo:grid>
    <kendo:grid-save>
        <script>
            function(e) {
                // Code to handle the save event.
            }
        </script>
    </kendo:grid-save>
</kendo:grid>

kendo:grid-saveChanges

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.

For additional information check the saveChanges event documentation.

Example

<kendo:grid>
    <kendo:grid-saveChanges>
        <script>
            function(e) {
                // Code to handle the saveChanges event.
            }
        </script>
    </kendo:grid-saveChanges>
</kendo:grid>

kendo:grid-sort

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.

For additional information check the sort event documentation.

Example

<kendo:grid>
    <kendo:grid-sort>
        <script>
            function(e) {
                // Code to handle the sort event.
            }
        </script>
    </kendo:grid-sort>
</kendo:grid>

kendo:grid-columnLock

Fired when the user lock a column.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the columnLock event documentation.

Example

<kendo:grid>
    <kendo:grid-columnLock>
        <script>
            function(e) {
                // Code to handle the columnLock event.
            }
        </script>
    </kendo:grid-columnLock>
</kendo:grid>

kendo:grid-columnUnlock

Fired when the user unlock a column.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the columnUnlock event documentation.

Example

<kendo:grid>
    <kendo:grid-columnUnlock>
        <script>
            function(e) {
                // Code to handle the columnUnlock event.
            }
        </script>
    </kendo:grid-columnUnlock>
</kendo:grid>

kendo:grid-navigate

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.

For additional information check the navigate event documentation.

Example

<kendo:grid>
    <kendo:grid-navigate>
        <script>
            function(e) {
                // Code to handle the navigate event.
            }
        </script>
    </kendo:grid-navigate>
</kendo:grid>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy