I'm using a RadDropDownTree on my website with filtering functionality enabled (EnableFiltering property). It works great, but I need to maintain the filter value during the user session.
Is there any way to get and set the filter that the user types? I haven't seen anything on the documentation.
2 Answers, 1 is accepted
0
Accepted
Attila Antal
Telerik team
answered on 14 Jan 2022, 09:29 AM
Hello Serikat,
This functionality is not included out of the box, but you can implement it easily.
You can use the OnClientDropDownOpening and OnClientDropDownClosing client events of the TreeView to save and restore the filter.
In these events, you will need to find and access the filter input, get the value, and store it somewhere. This example will use the window.localStorage but you can save it in any way you like.
<telerik:RadDropDownTreeID="RadDropDownTree1"runat="server"DataFieldID="ID"DataFieldParentID="ParentID"DataTextField="Text"DataValueField="Value"EnableFiltering="true"OnPreRender="RadDropDownTree1_PreRender"OnClientDropDownClosing="OnClientDropDownClosing"OnClientDropDownOpening="OnClientDropDownOpening"><FilterSettingsFilter="Contains" /><DropDownSettingsOpenDropDownOnLoad="true" /></telerik:RadDropDownTree><telerik:RadScriptBlockID="RadScriptBlock1"runat="server"><script>// When the DropDown is about to ClosefunctionOnClientDropDownClosing(sender, args) {
// Access the Filter Inputvar $filterInput = $telerik.$(sender.get_dropDownElement()).find('.rddtFilter input.rddtFilterInput');
// Get the Filter Valuevar filterValue = $filterInput.val();
// Save the Value to window.localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStoragewindow.localStorage.setItem("TreeFilterValue", filterValue);
}
// When the DropDown is about to OpenfunctionOnClientDropDownOpening(sender, args) {
// access the filter from the window.localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStoragevar filterValue = localStorage.getItem("TreeFilterValue");
// Check if the value existsif (filterValue) {
// Access the Filter Inputvar $filterInput = $telerik.$(sender.get_dropDownElement()).find('.rddtFilter input.rddtFilterInput');
// Set the Filter Value
$filterInput.val(filterValue);
// Make the DropDownTree filter by the FilterText
sender.filterByText(filterValue);
}
}
</script></telerik:RadScriptBlock>
You can test out this scenario with the following Backend code:
protectedvoidPage_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
RadDropDownTree1.DataSource = Enumerable.Range(1, 20).Select(x => new
{
ID = x,
ParentID = x == 1 ? 0 : 1,
Text = "Item " + x,
Value = "Value" + x
}).ToList();
RadDropDownTree1.DataBind();
}
}
protectedvoidRadDropDownTree1_PreRender(object sender, EventArgs e)
{
if (!IsPostBack)
{
var ddTree = (RadDropDownTree)sender;
ddTree.ExpandAllDropDownNodes();
}
}
Regards,
Attila Antal
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.