Telerik Extensions for ASP.NET MVC

This help topic shows how to create custom commands in Telerik Grid for ASP.NET MVC.

This topic contains the following sections.

Custom Server Command

A custom server command is a command which makes a HTTP GET request to a specified action method. The following example shows how to create a custom server command which will invoke an action method and pass the property of the data item :
CopyDefining a custom server command
<%= Html.Telerik().Grid<Order>(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Command(commands =>
            {
                // Declare a custom command named "showDetails"
                commands.Custom("showDetails")
                        // Set the text which the command button will display
                        .Text("Show details")
                        // Specify the action method which the command will invoke
                        .Action("ShowDetails", "Home")
                        // Specify which properties of the data item will be passed as action method arguments
                        .DataRouteValues(route => 
                        {
                           // Send the OrderID property of the data item as "orderID" parameter
                           route.Add(o => o.OrderID).RouteKey("orderID");
                        });
            })
        })
%>
CopyHandling the custom command
// The "orderID" argument will come from the OrderID property. Defined via DataRouteValues
public ActionResult ShowDetails(int orderID) 
{
   var northwind = new NorthwindDataContext();
   // Get the order by "orderID"
   var order = northwind.Orders.FirstOrDefault(o => o.OrderID == orderID);

   // Display a some view which will use the order
   return View(order);
}

Custom Ajax Command

A custom ajax command is a command which makes an ajax request to a specified action method. Here is how to define a custom ajax command:
CopyDefining a ajax server command
<%= Html.Telerik().Grid<Order>(Model)
        .Name("Grid")
        // Handle the OnComplete event in order to use the response from the command
        .ClientEvents(events => events.OnComplete("Grid_onComplete"))
        .Columns(columns =>
        {
            columns.Command(commands =>
            {
                // Declare a custom command named "showDetails"
                commands.Custom("showDetails")
                        // Specify that the action command will make ajax requests
                        .Ajax(true)
                        // Set the text which the command button will display
                        .Text("Show details")
                        // Specify the action method which the command will invoke
                        .Action("ShowDetails", "Home")
                        // Specify which properties of the data item will be passed as action method arguments
                        .DataRouteValues(route => 
                        {
                           // Send the OrderID property of the data item as "orderID" parameter
                           route.Add(o => o.OrderID).RouteKey("orderID");
                        });
            })
        })
%>
CopyHandling the custom command - controller
// The "orderID" argument will come from the OrderID property. Defined via DataRouteValues
public ActionResult ShowDetails(int orderID) 
{
   var northwind = new NorthwindDataContext();
   // Get the order by "orderID"
   var order = northwind.Orders.FirstOrDefault(o => o.OrderID == orderID);

   // Return the order as JSON - will be used from the OnComplete event
   return Json(new { order = order });
}
CopyHandling the custom command - OnComplete event
function Grid_onComplete(e) {
     if (e.name == "showDetails") {
        var order = e.response.order; // e.response is contains the action method result

        //use the order object
     }
}
The action method requested by a custom ajax command must return JSON result. To get that result the OnComplete event should be handled. The OnCommand event is raised before the ajax request is sent.

Command Settings

Custom commands support the following settings:
  • Action - specifies the action method which the custom command would invoke. Both action and controller name are required.
  • Ajax - specifies whether to make an ajax request to the action method or not. The default value is false.
  • ButtonType - specifies how the command would look like. By default a button would be rendered displaying the Text of the command.
  • SendDataKeys - whether to pass the data keys of the grid (if defined) to the action method. The default value is true.
  • SendState - whether to pass the grid state (current page, sort order, filters etc) to the action method. The default value is true.