Telerik Extensions for ASP.NET MVC

Version Q2 2012, released 06/07/2012

Server Selection

Select a customer to see his/her orders

SelectCustomer IDCompany NameContact NameCountry
SelectALFKIAlfreds FutterkisteMaria AndersGermany
SelectANATRAna Trujillo Emparedados y heladosAna TrujilloMexico
SelectANTONAntonio Moreno TaqueríaAntonio MorenoMexico
SelectAROUTAround the HornThomas HardyUK
SelectBERGSBerglunds snabbköpChristina BerglundSweden
SelectBLAUSBlauer See DelikatessenHanna MoosGermany
SelectBLONPBlondel père et filsFrédérique CiteauxFrance
SelectBOLIDBólido Comidas preparadasMartín SommerSpain
SelectBONAPBon app'Laurence LebihanFrance
SelectBOTTMBottom-Dollar MarketsElizabeth LincolnCanada
Refresh
firstprev
12345678910
nextlast
Displaying items 1 - 10 of 91

Orders (BONAP)

Order IDOrder DateShip AddressShip City
1033116/10/199612, rue des BouchersMarseille
1034029/10/199612, rue des BouchersMarseille
1036225/11/199612, rue des BouchersMarseille
1047011/03/199712, rue des BouchersMarseille
1051118/04/199712, rue des BouchersMarseille
1052502/05/199712, rue des BouchersMarseille
1066310/09/199712, rue des BouchersMarseille
1071523/10/199712, rue des BouchersMarseille
1073005/11/199712, rue des BouchersMarseille
1073206/11/199712, rue des BouchersMarseille
Refresh
firstprev
12
nextlast
Displaying items 1 - 10 of 17

About this example ASPXRazor

This example shows how to implement related grids. The first grid is bound to the Customers table from the Northwind database. The second shows the orders for the selected customer from the first grid.

This example is implemented by using a Command column with a singleSelect command in it. When using a Command collumn you need to specify the DataKeys for the grid. 

<%= Html.Telerik().Grid((IEnumerable<Customer>)ViewData["Customers"])
        .Name("Customers")
        .DataKeys(dataKeys => dataKeys.Add(c => c.CustomerID))
        .Columns(columns =>
        {
            columns.Command(commands => commands.Select()).Title("Select");
            columns.Bound(c => c.CustomerID).Width(130);
            columns.Bound(c => c.CompanyName).Width(250);
            columns.Bound(c => c.ContactName);
            columns.Bound(c => c.Country).Width(200);
        })
        .Pageable()
%>

<%= Html.Telerik().Grid((IEnumerable<Order>)ViewData["Orders"])
        .Name("Orders")
        .Columns(columns=>
        {
            columns.Bound(c => c.OrderID).Width(100);
            columns.Bound(c => c.OrderDate).Width(200).Format("{0:dd/MM/yyyy}");
            columns.Bound(c => c.ShipAddress);
            columns.Bound(c => c.ShipCity).Width(200);
        })
        .Pageable()
        .Sortable()
%>
</pre>

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: