Filter Treelist in Toolbar with DropDown

[Roger]

Hi:

I'm trying to filter a treelist in a toolbar - in a similar manner that I have done with grids - but can't seem to get it to work.  I have a demo of my attempt at https://dojo.telerik.com/@rswetnam/olUQaQOb/3 - any assistance greatly appreciated.

[Anton Mironov]

Hi Roger,

Thank you for the provided details.

In order to achieve the required behavior, I would recommend using the built-in "Search" functionality in the toolbar for the Kendo UI Treelist. The following approach demonstrates the pointed implementation and behavior:

• https://dojo.telerik.com/@anton.mironov/IYOKAreW

Make the needed tests with the example above and let me know if we should try to set the functionality above to work only with a specific field.

Kind Regards,
Anton Mironov
Progress Telerik

[Roger]

Thank you Anton.  Unfortunately, in my use case, a dropdown is required.  The user selects among a number of "Programs" each of which has a null root value.  After the Program is selected, tree opens at the place in it closest to the current date.  I know how to do column searches - but this is not what I need in this case.

Regards,

Roger

[Anton Mironov]

Hi, Roger,

Thank you for the additional details provided. Now I can see your point clearly.

In order to achieve the desired behavior, I would recommend using the following syntax for adding an input as a toolbar for the treeList:

toolbar: "<input id='program' value='1' style='width: 100%;' />",

In the "document.ready" event handler, initialize the input as a Kendo UI DropDown:

      $(document).ready(function() {
        var data = [
          { text: "No Filter", value: "1" },
          { text: "First", value: "2" },
          { text: "Second", value: "3" }
        ];

        // create DropDownList from input HTML element
        $("#program").kendoDropDownList({
          dataTextField: "text",
          dataValueField: "value",
          dataSource: data,
          index: 0,
          change: onChange
        });
      });

Use the "change" event handler of the dropdown to create a custom filter for the dataSource of the treeList:

      function onChange(){
        var filterValue = this.text();
        var treelistDs = $("#treeList").data("kendoTreeList").dataSource;
        var _filter = { logic: "or", filters: [{ field: "program", operator: "eq", value: filterValue}] };

        if(filterValue == "No Filter"){
           _filter.filters = [];
        }
        
        treelistDs.filter(_filter);
      }

Here is a dojo example that I created for the case which includes the implementation above:

• https://dojo.telerik.com/@anton.mironov/IsIZOvAC

In order to include the children of the selected item, find the parent id in the dataSource. Use it to build another filter with the help of the parentId property and add it as an object to the "filters" array.

Let me know if further assistance is needed.

Kind Regards,
Anton Mironov
Progress Telerik

[Roger]

Thanks Anton, that was really helpful.  I have cloned your dojo and made a few changes to get a little closer to the use case I am trying to satisfy -  including adding a remote data source.  The dojo is located at https://dojo.telerik.com/@rswetnam/IxaxaTaM/7

I am having a problem getting my head around what to do when the value of the dropdown changes and how to use that to change the remote data source from say https://greypi.azurewebsites.net/api/nodes/program/1 to https://greypi.azurewebsites.net/api/nodes/program/2 I should be on my way.  Again, thanks for your helpful demo and explanation.

Regards,

Roger

[Anton Mironov]

Hello Roger,

Thank you for the kind words and additional details provided.

Apologize for the misunderstanding, I thought that we are talking about filtration of the data when the dropdown value changes. In fact, this one is related to changing the dataSource of the Kendo UI TreeList.

In order to achieve the desired behavior, I would recommend using the "setDataSource" method of the treeList. Here is an example of the approach:

• https://dojo.telerik.com/@anton.mironov/IJoxAHOj

The "click" event handler of the button in the dojo example above, could be implemented in the "change" event handler of the dropdown.

I hope this information helps.

Best Regards,
Anton Mironov
Progress Telerik

[Roger]

Thank you Anton.  I have taken your advice and got my Treelist working on the change event by using the setDataSource method.  - see -  https://dojo.telerik.com/@rswetnam/IxaxaTaM/7

However, this seems to me somwhat convoluted.  Is there any way that I can keep the same data source but just change the parameter and make a call?  Great, however to have it at least working now!

Regards,

Roger

[Roger]

Actually, my working treelist with dropdown is at https://dojo.telerik.com/@rswetnam/IxaxaTaM/29 - Having lost my work several times, I spent a bit of time going through every link in the dojo.  Is there any documentation on these dojos?  The interface seems quirky and poorly explained, at least to me.

Thanks,

Roger

[Anton Mironov]

Hi Roger,

Thank you for providing your dojo example. 

In order to get all created and saved dojo examples, click on the "your account" button (top-right corner of the dojo) and navigate to "your snippets". I know how frustrating it could be to lose the work, so I am saving my snippets when a couple of changes are made (Ctrl + Shift + S and Ctrl + S after this).

I am not totally sure about the requirement in the reply from 8 April. If it is to keep the current dataSource and add additional data to it, this could be achieved with the help of the "push" method for that dataSource array.

Let me know if I could assist with anything else.

Greetings,
Anton Mironov
Progress Telerik