Combine MultiSelect with TreeView

4 posts, 0 answers
  1. Maxim
    Maxim avatar
    1 posts
    Member since:
    Oct 2012

    Posted 08 Apr 2013 Link to this post

    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?
  2.
  3. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3724 posts

    Posted 10 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Ekta
    Ekta avatar
    1 posts
    Member since:
    Oct 2013

    Posted 29 Sep Link to this post

    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

  7. Neli
    Admin
    Neli avatar
    28 posts

    Posted 03 Oct Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top