Combine MultiSelect with TreeView

[Maxim]

Hi,
we will use the new kendo MultiSelect widget to select one or more products. 
The data will be hierarchically structured (products groups and products themselves). The kendo TreeView widget would be perfect for this job. 
Is there a way to combine these two widgets?

[Georgi Krustev]

Hello Maxim,

Currently, the MultiSelect supports only a flat view of data. You can use the itemTemplate to format additionally the look of the item.
As to your other question, the MultiSelect and TreeView widget is not designed to be combined.
 
Kind regards,
Georgi Krustev
the Telerik team

[Ekta]

Hi,

I am trying to achieve the same functionality in my application. I see I can group the items with latest releases in a multiselect widget, however, there seems to be no way to select the group that would select everything inside the group. Treeview with checkbox inside multiselect would be the best option. 

Has there been any update on having treeview inside a multiselect widget? Any help would be much appreciated.

Thanks

Ekta

[Neli]

Hi Ekta,

The combination of MultiSelect with TreeView inside is not suported out-of-the-box, but here is a Demo that shows similar functionality.

Another example for custom implementation of TreeView inside a MultiSelect could be found on the linked Dojo. 
Initially the TreeView is hidden by using 'display:none', and it is shown after a click on the MultiSelect by following code:

$(".k-multiselect").click(function () {
     $("#multiselect-list").append($(".dialog"));
 });

If a node is removed from the MultiSelect it could be unchecked by using MultiSelect deselect event and uncheck the node in the event handler

function onDeselect(e) {
    var item = e.item;
    var treeview = $("#treeview").data("kendoTreeView");
    var node = treeview.findByText(item.text());
    $(node[0]).find(".k-checkbox").prop("checked", false);
}

When an item is checked in the TreeView, a subscription to the check event is made. In its event handler all the the checked nodes are gathered and the MultiSelect is populated with their values.  

Nested TreeView had been suggested before for different widgets (DropDownList, ComboBox, MultiSelect), so there is a request for such functionality in our Feedback portal. Here is a link to such suggestion. Depending on the votes each request gather, it might be considered for including in the future releases.

Regards,
Neli
Progress Telerik

[Justin]

Your onDeselect function works well for the current node.  I have the problem that if the current node was the last checked sibling node, the parent node doesn't uncheck (tri-state partial check).  Any suggestion on how to handle this problem?

 

Thanks,

Justin

[Nencho]

Hello Justin,

I have performed some local tests, using the dojo example that my colleague had provided, but it seems like the tri state is properly working: https://monosnap.com/file/dDDAQFkfO8QFPaHgPDYr1cjxukn7qQ

On a side note, I am happy to inform you that we are currently working on a new widget called DropDownTree which will aims to cover this scenario exactly. It will have the possibility for tristate as well so watch out for our R2 2018 release in order to check the widget and evaluate whether if fits your scenarios.

Regards,
Nencho
Progress Telerik

[Jayantha]

 Hi Neli and Others,

I saw your nice post on MutliSelect combined with TreeView, especially this example:  https://dojo.telerik.com/OCuDIm/2
I combined this example with the other one: https://demos.telerik.com/kendo-ui/treeview/filter-treeview-in-dialog
By adding a filter (search box) for the treeview:
 <div style="display:none">
    <div class="dialog">
      <div class="dialogContent">
        <input id="filterText" type="text" placeholder="Search Countries" />
        <div id="treeview" class="custom-treeview"></div>
      </div>
    </div>    
  </div>

Things are looking great for me (see attached).  But the "Seach Countries" input box can't get focus and does not accept any keypress input!  

It seems that the default action (keypress) is disabled.   Is there anyway to enable that input to allow filtering there?

Moreover, every time I check an item in the dropdown list, the list would be dismissed, the checked item would be added to the multiselect box, which is correct. But can I not dismiss the dropdown list each time I check an item, but only add the checked item to the multiselect?   I would only dismiss the dropdown when click anywhere outside the multiselect and dropdown area?

Hope this is clear.

Thanks,
Jay

 

 

 

[Neli]

Hi Jay,

Below you will find the steps in order to achieve the desired behavior:

1) To be able to write in the input element that is in the dialog which contains the TreeView, you could focus the element programmatically. You could subscribe to the open event of the MultiSelect. In the event handler you could find the input element and focus it using jQuery focus() method. As you will need to ensure that the element is rendered, you could use a setTimeout function.

<input id="filterText" type="text" placeholder="Search Countries" />

function onMultiSelectOpen(e){
      setTimeout(function(){
          closeAllowed = false;
          $('#filterText').click(function(){
           $('#filterText').focus();
      })
        }, 300)
 }

 I will explain the reason for 'closeAllowed' in the next step

2) When a different element than the MultiSelect input field is focused, the MultiSelect will automacally close. This is the default behavior. To avoid that you could set a flag if the closing is allowed. Initially you could set it to true. You could prevent the closing depending on the value of the closeAllowed property.

close: function(e){
if(!closeAllowed){
    e.preventDefault();
 }
},

So, when the input element in the dialog is focused, you will set closeAllowed to false and prevent the closing. 

3) In order to close the MultiSelect dialog, you could add a button in it. When the button is clicked you will set the closeAllowed flag to true and will trigger the close event of the Multiselect. I am afraid that due to the focusing of the input element, implementing of such closing button is needed. At this step you could add the checked nodes to the MultiSelect input

$('#btn').click(function(){
       closeAllowed = true;
       var multi = $('#multiselect').data('kendoMultiSelect')

       var checkedNodes = [];
       getCheckedNodes(treeView.dataSource.view(), checkedNodes);
       populateMultiSelect(checkedNodes);
       multi.close()
})

4) To add checked nodes only when the dialog is closing, you could set additional flag. The flag will be needed for the nodes that are checked initially. 

function onCheck(e){
var checkedNodes = [];
 var treeView = $("#treeview").data("kendoTreeView");

  if(initialCheck){
   getCheckedNodes(treeView.dataSource.view(), checkedNodes);
     populateMultiSelect(checkedNodes);
      initialCheck = false;
  }
}

This way, in case there are initially checked nodes, they will be marked when the dialog opens, but when the user check a node it will not be added to the MultiSelect input immediately. The additionally checked node could be added to the MutliSelect when the dialog closes (when the close button is clicked). This could be seen in step 3) marked in green.

Here is a Dojo example where the described is implemented. 

Regards,
Neli
Progress Telerik