This is a migrated thread and some comments may be shown as answers.

Cascading Dropdown Filters with FilterTemplate

3 Answers 224 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Dave asked on 20 Aug 2014, 02:11 PM

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

3 Answers, 1 is accepted

Accepted