Telerik Extensions for ASP.NET MVC

Version Q2 2012, released 06/07/2012

Column Command

Order ID
Filter
Contact Name
Filter
Ship Address
Filter
 
10248Paul Henriot59 rue de l'AbbayeCustomer Details
10249Karin JosephsLuisenstr. 48Customer Details
10250Mario PontesRua do Paço, 67Customer Details
10251Mary Saveley2, rue du CommerceCustomer Details
10252Pascale CartrainBoulevard Tirou, 255Customer Details
10253Mario PontesRua do Paço, 67Customer Details
10254Yang WangHauptstr. 31Customer Details
10255Michael HolzStarenweg 5Customer Details
10256Paula ParenteRua do Mercado, 12Customer Details
10257Carlos HernándezCarrera 22 con Ave. Carlos Soublette #8-35Customer Details
Refresh
firstprev
12345678910...
nextlast
Displaying items 1 - 10 of 830

About this example ASPXRazor

This example shows how to use a custom column command in Telerik Grid for ASP.NET MVC. Custom commands can be configured to call action methods by making server side or ajax requests. In this particular example the custom command is requesting JSON from an action method and displays it using Telerik Window for ASP.NET MVC

To define a custom column command use the following code 

View:
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns => columns
            {
            columns.Command(commands => 
                // Define a custom command
                commands.Custom("viewDetails")// the constructor accepts the name of the custom command (used to differentiate between multiple custom commands)
                    // Set the text of the button
                    .Text("Customer Details")
                    // Specify which fields from the bound data item to include in the route (pass as action method arguments)
                    .DataRouteValues(route => route.Add(o => o.OrderID).RouteKey("orderID"))
                    // Make ajax requests
                    .Ajax(true)
                    // Which action method to call
                    .Action("ViewDetails", "Grid")    
                ));
            }
        )
%>
Controller:

public JsonResult ViewDetails(int orderID) // this argument comes from the data item (defined via DataRouteValues)
{
    // Get the order by the specified orderID
    var order = GetOrders()
                    .FirstOrDefault(o => o.OrderID == orderID);

    return Json(new { customer = order.Customer });
}

Interested in HTML5 and mobile-powered ASP.NET MVC apps?

Experience the next generation UI and framework for ASP.NET MVC development by downloading trial evaluation copy of Kendo UI Complete for ASP.NET MVC. Jumpstart your development with the available learning resources.

The differences between Telerik MVC Extensions and Kendo UI Complete for ASP.NET MVC, and their licensing models are explained here and here.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Other Demos: