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.