Get/set filter value in RadDropDownTree

2 Answers 22 Views
DropDownTree
Serikat
Top achievements
Rank 1
Iron
Serikat asked on 11 Jan 2022, 10:12 AM

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

Sort by
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:RadDropDownTree ID="RadDropDownTree1" runat="server" DataFieldID="ID" DataFieldParentID="ParentID" DataTextField="Text" DataValueField="Value" EnableFiltering="true"
    OnPreRender="RadDropDownTree1_PreRender"
    OnClientDropDownClosing="OnClientDropDownClosing" OnClientDropDownOpening="OnClientDropDownOpening">
    <FilterSettings Filter="Contains" />
    <DropDownSettings OpenDropDownOnLoad="true" />
</telerik:RadDropDownTree>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script>
        // When the DropDown is about to Close
        function OnClientDropDownClosing(sender, args) {
            // Access the Filter Input
            var $filterInput = $telerik.$(sender.get_dropDownElement()).find('.rddtFilter input.rddtFilterInput');
            // Get the Filter Value
            var filterValue = $filterInput.val();
            // Save the Value to window.localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
            window.localStorage.setItem("TreeFilterValue", filterValue);
        }
        // When the DropDown is about to Open
        function OnClientDropDownOpening(sender, args) {
            // access the filter from the window.localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
            var filterValue = localStorage.getItem("TreeFilterValue");

            // Check if the value exists
            if (filterValue) {
                // Access the Filter Input
                var $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:

protected void Page_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();
    }
}

protected void RadDropDownTree1_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/.

0
Serikat
Top achievements
Rank 1
Iron
answered on 14 Jan 2022, 10:18 AM

Thank you for the answer. I finally resolved yesterday with a similar solution.

Tags
DropDownTree
Asked by
Serikat
Top achievements
Rank 1
Iron
Answers by
Attila Antal
Telerik team
Serikat
Top achievements
Rank 1
Iron
Share this question
or