Cascading Dropdown Filters with FilterTemplate

[Dave]

Hi Everyone,

I am desperately trying to put together a cascading dropdown filtering system in a radgrid and would like to ask for some help/guidance.

Here is the result I try to achieve, some of the radgrid columns have a dropdownlist in FilterTemplate, like Building and Room.
When user is selecting a building to narrow the grid list to the related line, the Room dropdown should give a sub-selection only related to the Building selected.

Here is part of the RadGrid Code;

<telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="False" CellSpacing="0"
    DataSourceID="sqlWoWList" GridLines="None" Height="760" PageSize="15" EnableLinqExpressions="false">
    <ClientSettings>
        <Scrolling AllowScroll="True" UseStaticHeaders="True" />
        <ClientEvents OnGridCreated="GetGridObject"></ClientEvents>
    </ClientSettings>
    <ExportSettings ExportOnlyData="true" FileName="List of WoWs" HideStructureColumns="true" IgnorePaging="true" >
        <Excel Format="ExcelML" />
    </ExportSettings>
    <MasterTableView AutoGenerateColumns="False" DataSourceID="sqlWoWList" CommandItemDisplay="Top" FilterExpression="([IsReleased] LIKE 'Yes')">

        <NoRecordsTemplate>
            <table width="100%" border="0" cellpadding="20" cellspacing="20">
                <tr>
                    <td align="center">
                        <h2 style="color:Red">No WoWs or SOPs found.<br />Please change or reset the filter.</h2>
                    </td>
                </tr>
            </table>
        </NoRecordsTemplate>

        <CommandItemSettings ShowExportToExcelButton="true" ShowAddNewRecordButton="false" ShowRefreshButton="false" />
        <CommandItemTemplate>
            <div id="cmdContainer" style="width: 99%; padding: 10px; text-align: right;">
                <a href="http://teamroom.nestle.com/GLOBEISIT/PTCOrbeBPMAcademy/Induction ; Training Materials/Training and Quick Reference Materials/Campus Search QRC.pdf" target="_blank" style="padding: 5px; border: 1px solid gray; margin: 0px 5px;">
                    <img src="../App_Themes/OneRDCampus/images/question-white.png" style="border: none; vertical-align: text-bottom;" /> How To
                </a>
                <a href="WoWlist.aspx" style="padding: 5px; border: 1px solid gray; margin: 0px 5px;">
                    <img src="../App_Themes/OneRDCampus/images/filter_(delete)_16x16.gif" style="border: none; vertical-align: text-bottom;" /> Reset filters
                </a>
                <a id="lnkShareFilter" onserverclick="lnkShareFilter_ServerClick" href="#" runat="server" style="padding: 5px; border: 1px solid gray; margin: 0px 5px;">
                    <img src="../App_Themes/OneRDCampus/images/bpm_email.png" style="border: none; vertical-align: text-bottom;" /> Share filter
                </a>
                <a href="#" runat="server" onclick="ExportToExcel('WoWlist');" style="padding: 5px; border: 1px solid gray; margin: 0px 5px;">
                    <img src="../App_Themes/OneRDCampus/images/Export2XL.gif" style="border: none; vertical-align: text-bottom;" /> Export to excel
                </a>
            </div>
        </CommandItemTemplate>

        <Columns>
            <telerik:GridTemplateColumn DataField="Title" CurrentFilterFunction="NoFilter" HeaderText="Title" HeaderTooltip="Title of the Wow (roll-over to display related objective)"
                SortExpression="Title" UniqueName="Title" FilterControlAltText="Filter Title Column" FilterListOptions="AllowAllFilters" AutoPostBackOnFilter="true"
                ShowFilterIcon="false" FilterControlWidth="100%">
                <ItemTemplate>
                    <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl='<%#Eval("DiagramURL")%>' ToolTip='<%#Eval("Purpose")%>' Target="_blank"><%#Eval("Title")%></asp:HyperLink>
                </ItemTemplate>
            </telerik:GridTemplateColumn>

            ...

            <telerik:GridBoundColumn DataField="Building" CurrentFilterFunction="NoFilter" FilterControlAltText="Filter Building column" HeaderText="Building"
                SortExpression="Building" UniqueName="Building" HeaderTooltip="Campus building (area of competency)" >
                <HeaderStyle Width="120px"  />
                <FilterTemplate>
                    <telerik:RadComboBox ID="RadComboBoxBuilding" runat="server" MaxHeight="200px" Width="110px" DropDownWidth="160px"
                        DataSourceID="sqlBuildings" DataTextField="Building" DataValueField="Building" AppendDataBoundItems="true"
                        SelectedValue='<%# TryCast(Container, GridItem).OwnerTableView.GetColumn("Building").CurrentFilterValue%>'
                        OnClientSelectedIndexChanged="BuildingIndexChanged">
                        <Items>
                            <telerik:RadComboBoxItem Text="All" />
                        </Items>
                    </telerik:RadComboBox>

                    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                        <script type="text/javascript">
                            function BuildingIndexChanged(sender, args) {
                                var tableView = $find("<%# TryCast(Container, GridItem).OwnerTableView.ClientID%>");
                                tableView.filter("Building", args.get_item().get_value(), "EqualTo");
                            }
                        </script>
                    </telerik:RadScriptBlock>
                </FilterTemplate>
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Room" CurrentFilterFunction="NoFilter" FilterControlAltText="Filter Room column" HeaderText="Room"
                SortExpression="Room" UniqueName="Room" HeaderTooltip="Campus room (area of expertise)">
                <HeaderStyle Width="140px" />
                <FilterTemplate>
                    <telerik:RadComboBox ID="RadComboBoxRoom" runat="server" MaxHeight="200px" Width="130px" DropDownWidth="260px"
                        DataSourceID="sqlRooms" DataTextField="Room" DataValueField="Room" AppendDataBoundItems="true"
                        SelectedValue='<%# TryCast(Container, GridItem).OwnerTableView.GetColumn("Room").CurrentFilterValue%>'
                        OnClientSelectedIndexChanged="RoomIndexChanged">
                        <Items>
                            <telerik:RadComboBoxItem Text="All" />
                        </Items>
                    </telerik:RadComboBox>

                    <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
                        <script type="text/javascript">
                            function RoomIndexChanged(sender, args) {
                                var tableView = $find("<%# TryCast(Container, GridItem).OwnerTableView.ClientID%>");
                                tableView.filter("Room", args.get_item().get_value(), "EqualTo");
                            }
                        </script>
                    </telerik:RadScriptBlock>
                </FilterTemplate>
            </telerik:GridBoundColumn>

            ...

        </Columns>
    </MasterTableView>
    <GroupingSettings CaseSensitive="false" />
</telerik:RadGrid>
<asp:SqlDataSource ID="sqlBuildings" runat="server" ConnectionString="<%$ ConnectionStrings:Hydra_DevConnectionString %>"
    SelectCommand="SELECT DISTINCT [Building] FROM [WoW_VWR_Trackers] WHERE [Building] IS NOT NULL ORDER BY [Building]">
</asp:SqlDataSource>
<asp:SqlDataSource ID="sqlRooms" runat="server" ConnectionString="<%$ ConnectionStrings:Hydra_DevConnectionString %>"
    SelectCommand="SELECT DISTINCT [Room] FROM [WoW_VWR_Trackers] WHERE [Room] IS NOT NULL AND [Building] LIKE @Building) ORDER BY [Room]">
    <SelectParameters>
        <asp:SessionParameter ConvertEmptyStringToNull="true" DefaultValue="%" SessionField="Building" Name="Building" Type="String" />
    </SelectParameters>
</asp:SqlDataSource>
<asp:SqlDataSource ID="sqlWoWList" runat="server" ConnectionString="<%$ ConnectionStrings:Hydra_DevConnectionString %>"
    SelectCommand="SELECT * FROM [Hydra_Dev].[dbo].[WoW_VWR_Trackers]">
</asp:SqlDataSource>

Could someone points me in the good direction?
I tried several things but without luck since now.

Best regards,
David

[Shinu]

Hi Dave,

Please take a look at this online demo on Grid - Filter Templates. It shows the cascading dropdown filtering system in a RadGrid.

Thanks,
Shinu

[Dave]

Yay! Thank you Shinu, it works perfectly with some adjustments.
Regards,
Dave

[Leonardo]

how I can filter the second RadComboBox with the value selected in the first RadComboBox,