Telerik Extensions for ASP.NET MVC

Version Q2 2012, released 06/07/2012

Client Selection

Customers

Customer IDCompany NameContact NameCountry
ALFKIAlfreds FutterkisteMaria AndersGermany
ANATRAna Trujillo Emparedados y heladosAna TrujilloMexico
ANTONAntonio Moreno TaqueríaAntonio MorenoMexico
AROUTAround the HornThomas HardyUK
BERGSBerglunds snabbköpChristina BerglundSweden
BLAUSBlauer See DelikatessenHanna MoosGermany
BLONPBlondel père et filsFrédérique CiteauxFrance
BOLIDBólido Comidas preparadasMartín SommerSpain
BONAPBon app'Laurence LebihanFrance
BOTTMBottom-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 the OnRowSelected client-side event. In order to enable client-side selection the Selectable() method should be used when configuring the grid. 

<%= Html.Telerik().Grid((IEnumerable<Customer>)ViewData["Customers"])
        .Name("Customers")
        .Columns(columns =>
        {
            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()
        .Sortable()
        .Selectable()
        .ClientEvents(events => events.OnRowSelected("onRowSelected"))
        .DataBinding(dataBinding => dataBinding
            .Ajax()
                .Select("_SelectionClientSide_Customers", "Grid"))
%>
<%= 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()
        .DataBinding(dataBinding => dataBinding
            .Ajax()
                .Select("_SelectionClientSide_Orders", "Grid", new { customerID = "ALFKI" }))
%>

<script type="text/javascript">
    function onRowSelected(e) {
        var ordersGrid = $('#Orders').data('tGrid');
        customerID = e.row.cells[0].innerHTML; 
        
        // update ui text
        $('#customerID').text(customerID);

        // rebind the related grid
        ordersGrid.rebind({
            customerID: customerID
        });
    }
</script>

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: