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 (ALFKI)

Order IDOrder DateShip AddressShip City
1064325/08/1997Obere Str. 57Berlin
1069203/10/1997Obere Str. 57Berlin
1070213/10/1997Obere Str. 57Berlin
1083515/01/1998Obere Str. 57Berlin
1095216/03/1998Obere Str. 57Berlin
1101109/04/1998Obere Str. 57Berlin
Refresh
firstprev
1
nextlast
Displaying items 1 - 6 of 6

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: