Cascading Dropdown Filters with FilterTemplate

3 posts, 1 answers
  1. Dave
    Dave avatar
    25 posts
    Member since:
    Aug 2012

    Posted 20 Aug 2014 Link to this post

    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

  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 21 Aug 2014 in reply to Dave Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dave
    Dave avatar
    25 posts
    Member since:
    Aug 2012

    Posted 25 Aug 2014 in reply to Shinu Link to this post

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