Custom Commands

Updated on Oct 27, 2026

Custom commands let you handle Grid records with custom buttons in a command column.

To add a command column that renders a custom button in each row:

1. Define a custom command in the column configuration.

   Razor

       .Columns(columns => {
           columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));
       })

   Razor

   <column width="120">
       <commands>
           <column-command text="ViewDetails" click="showDetails"></column-command>
       </commands>
   </column>

2. Handle the button click event in a JavaScript function. Use the event target to get the row data item and run your custom logic.

   JS

   <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:

• Set custom HTML attributes on the button with HtmlAttributes.
• Set the icon by name with IconClass.
• Customize the button appearance with Template and TemplateId.
• Set the button text with Text.
• Control button visibility in JavaScript with Visible.

See Also

• ASP.NET Core DataGrid Homepage

• Knowledge Base Articles

• Grid Server-Side API Reference