Custom Commands
You can implement custom commands for handling the records of the Grid.
To include a command column which will render a button for triggering the command in the column cells:
-
Add a custom command column by using the column definition.
.Columns(columns => { columns.Command(command => command.Custom("ViewDetails").Click("showDetails")); })
-
Wire the
click
event of the button to a JavaScript function which will receive the corresponding Grid data item as an argument. In the function definition, handle the command.<script type="text/javascript"> function showDetails(e) { e.preventDefault(); var dataItem = this.dataItem($(e.currentTarget).closest("tr")); kendo.alert(dataItem.ShipName); } </script>
For a runnable example, refer to the demo on implementing custom commands in the Grid.
Features
The custom command button offers the following features:
-
HtmlAttributes
- set custom HTML attributes to the underlying HTML of the button -
IconClass
- set an icon of your choice by providing the icon's name -
Template
andTemplateId
- customize the appearance of the button via a template -
Text
- set the text of the button -
Visible
- conditionally determine whether the button should be visible via JavaScript (pass the name of the JavaScript function to this option)