Grid / Master/Detail Grids

There are scenarios in which you may want to present dependant grids (filtering the records in the second grid according to the selection in the first) to enrich the user experience and make the interaction between these grid easier and more intuitive. Telerik RadGrid supports this feature out-of-the-box in a similar means as the MS GridView.

In the demo above the first grid presents Customers, the second grid visualizes the relevant Orders and the third grid shows the Order Details for the selected order. The main points for attaining this behavior are:

• add the primary key field for the related grid to the DataKeyNames array of its MasterTableView
• construct SelectParameter of type ControlParameter for the connected grid data source control. The ControlID of that SelectParameter should point to the related grid, the Name property should match the primary key value added previously as first to the DataKeyNames array, the PropertyName should be SelectedValue. You can also add DefaultValue and Type attributes as presented below:
  
  <asp:SqlDataSource ID="SqlDataSource2" ..... SelectCommand="SELECT [OrderID], [OrderDate], [CustomerID], [ShipCountry] FROM [Orders] WHERE ([CustomerID] = @CustomerID)" runat="server">
  <SelectParameters> <asp:ControlParameter ControlID="RadGrid1" DefaultValue="ALFKI" Name="CustomerID" PropertyName="SelectedValue" Type="String" />
  </SelectParameters>
  </asp:SqlDataSource>
• Alternatively, define similar SelectParameter using SelectedValues['<FieldName>'] where <FieldName> represents a column in the grid source:
  <asp:SqlDataSource ID="SqlDataSource3" ...... SelectCommand="SELECT [OrderID], [UnitPrice], [Quantity], [Discount] FROM [Order Details] WHERE ([OrderID] = @OrderID)" runat="server">
  <SelectParameters> <asp:ControlParameter ControlID="RadGrid1" DefaultValue="10643" Name="OrderID" PropertyName="SelectedValues['OrderID']" Type="Int32" /> 
   

The functionality depicted beforehand is enhanced to be performed with ajax requests (ajaxifying the grids with RadAjaxManager instance and setting ClientSettings->EnablePostBackOnRowClick = true). The row selection is made through keyboard navigation (check the Accessibility section for more details) or with client selection when row is clicked.