There are scenarios in which you may want to present related grids, i.e. filter the records in the second grid depending to the currently selected value in the first. This will enrich the user experience and make the interaction between the grids easier and more intuitive. Telerik RadGrid supports this feature out-of-the-box in a similar means as the MS GridView.
In the picture above above the first grid presents Customers and the second grid visualizes the relevant Orders for the selected customer. The main points for attaining this behavior are:
- Add the primary key field for the first grid to the DataKeyNames array of its MasterTableView
| ASPX/ASCX |
 Copy Code |
|
<script type="text/javascript">
function RowSelected()
{
window["<%= RadGrid2.ClientID %>"].AjaxRequest("<%= RadGrid2.UniqueID %>", "");
}
</script>
<rad:RadGrid ID="RadGrid1" EnableAJAX="true" runat="server" AllowSorting="true"
AllowPaging="true" DataSourceID="AccessDataSource1" GridLines="None" Skin="Outlook">
<ClientSettings AllowKeyboardNavigation="true" ApplyStylesOnClient="true">
<Selecting AllowRowSelect="true" />
<ClientEvents OnRowSelected="RowSelected" />
</ClientSettings>
<MasterTableView DataKeyNames="CustomerID" />
</rad:RadGrid> |
- Construct SelectParameter of type ControlParameter for the second grid data source control (first example below). The ControlID of that SelectParameter should point to the first 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:
| ASPX/ASCX |
Copy Code |
|
<asp:AccessDataSource ID="AccessDataSource2" DataFile="~/Grid/Data/Access/Nwind.mdb"
SelectCommand="SELECT [OrderID], [OrderDate], [CustomerID], [ShipCountry] FROM [Orders] WHERE ([CustomerID] = ?)"
runat="server">
<SelectParameters> <asp:ControlParameter ControlID="RadGrid1" DefaultValue="ALFKI" Name="CustomerID" PropertyName="SelectedValue" Type="String" />
</SelectParameters>
</asp:AccessDataSource> |
Second grid code:
| ASPX/ASCX |
Copy Code |
|
<rad:RadGrid ID="RadGrid2" EnableAJAX="True" runat="server" DataSourceID="AccessDataSource2">
<MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID" DataSourceID="AccessDataSource2">
<Columns>
<rad:GridBoundColumn DataField="OrderID" DataType="System.Int32" HeaderText="OrderID"
ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
</rad:GridBoundColumn>
<rad:GridBoundColumn DataField="OrderDate" DataType="System.DateTime" HeaderText="OrderDate"
SortExpression="OrderDate" UniqueName="OrderDate">
</rad:GridBoundColumn>
</Columns>
</MasterTableView>
</rad:RadGrid> |