RadListBox filtering

[David]

In RadDropDownTree there is option EnableFiltering.

Is there some listbox (checkbox enabled) that has same capabilities?

Or maybe a way to keep RadDropDownTree always opened?

[Attila Antal]

Hi David,

Using the Client-Side APIs of the DropDownTree, It is possible to open the DropDown element and keep it always open.

Here is an example:

<telerik:RadDropDownTree RenderMode="Lightweight" ID="RadDropDownTree1" runat="server" Width="300px" DefaultMessage="Please select" EnableFiltering="true"
    DataFieldID="EmployeeID" DataFieldParentID="ReportsTo" DataTextField="LastName" OnClientDropDownClosing="OnClientDropDownClosing">
</telerik:RadDropDownTree>

<script>
    // on page load
    function pageLoadHandler() {
        var ddt =  $find("<%= RadDropDownTree1.ClientID %>");
        // open the dropdown
        ddt.openDropDown();
    }
    Sys.Application.add_load(pageLoadHandler); 

    function OnClientDropDownClosing(sender, args) {
        // prevent closing the dropdown
        args.set_cancel(true);
    }
</script>

There are a couple of components that have CheckBox support, but they are not capable of filtering or the filtering is not compatible with CheckBox support.

• TreeView CheckBox Support
• ComboBox CheckBox Support

[David]

Hi Atilla,

   It looks very promising. For some reason though when i try to hide this control it remains partially shown now.

$('#<%= rddtByType.ClientID %>').hide();

Thank you Atilla

[Attila Antal]

Yes, that could happen if you're using JavaScript/jQuery to hide the elements. The TreeView is a composite control that renders multiple elements. For instance, the DropDown element is not even inside the TreeView's element so it can show up properly in all cases. 

When hiding the TreeView, you can get a reference to the DropDownElement through the TreeView client-side object, and hide that too.

[David]

Can you please give me an example of this reference?

[Attila Antal]

I said TreeView by mistake. TreeView does not have a DropDown element. I was referring to the Control on the picture you shared. Is that a ComboBox, or a DropDownTree?

[David]

RadDropDownTree 

[Attila Antal]

Thanks for the clarification.

To access the DropDown element of the DropDownTree, you can use the get_dropDownElement() method, see RadDropDownTree Object

From there you just pass the element to the jQuery code and hide it the same way you do with the DropDownTree element.

To get a reference to the DropDownTree, you can follow the instructions from the Getting Client-Side References to Control Objects

 

[David]

It seems simple, but i still confused for some reason. I tried:

        var ByType = $('#<%= rddtByType.ClientID %>');
        ByType.hide();

        var ByTypeDropDown = ByType.get_dropDownElement();
        ByTypeDropDown.hide();

What am i doing wrong?

Thank you

[Attila Antal]

The get_dropDownElement() method returns an HTML, and that does not have a property/method called hide(). If you are referring to the jQuery.hide() method, then the HTML element must be passed to a jQuery function to turn it into a jQuery object. That object will contain the .hide() method.

You can check out the jQuery API documentation at: https://api.jquery.com/

 

[David]

Atilla,

  Please provide line of code to actually make it work. This is very strange that normal hide works just partially and i struggle to follow your instructions.

It seems you know that needs to be done, so please help me with actual Javascript call

[Attila Antal]

Since you're already hiding the DropDownTree element, I was assuming that you know.

This is the jQuery syntax you should be using:

$(ByType.get_dropDownElement()).hide();

 

[David]

Thank you Atilla, unfortunalely I tried that before and i am getting "Uncaught TypeError: ByType.get_dropDownElement is not a function" .

[Attila Antal]

I think I can see the issue. 

You're using jQuery to access the DropDownTree element instead of getting a Telerik Object.

var ByType = $('#<%= rddtByType.ClientID %>');

Please review the Getting Client-Side References to Control Objects documentation articles explaining how to Get JavaScript reference to Telerik Objects. 

Once you have the reference to the DropDownTree object, the function "get_dropDownElement()" will be available and you can then pass it to a jQuery Function like I showed you.

 

[David]

Works!!!

Thank you Atilla