EjDropDownTree in Angular

Hi,

will be this EjDropDownTree component included in any of Angulars products (EJS2 or EJS1)? If not, I wonder if there is now any possibility to implement ejDropDownList with grouping and multiselect in way, that when you click on one group, it selects all of the childrens (like in EjDropDownTree)
E.q.:
https://puu.sh/Ac6PJ/b532fcc903.png --> https://puu.sh/Ac6Qw/91a0c486c6.png
Is it possible the same in Grouped EjDropDownList:
-->

Regards,
Marko

3 Replies

PO Prince Oliver Syncfusion Team April 30, 2018 12:05 PM UTC

Hi Marko, 

Thank you for contacting Syncfusion forums, 

Currently we have not provided support for Angular ejDropDownTree component in EJ1 and EJ2 platforms. But we can achieve your requirement in the Grouping and Multiselect sample of the DropDownList control. Using the click event handler, we can get the clicked Group header. Then comparing it with the dataSource bound to the control, we can get the index values of the items in that category. Now using the selectedIndices property, we can select the multiple values.  Kindly refer to the following code snippet. 

<script type="text/javascript"> 
       document.addEventListener('click', function (e) { 
           if(e.target.tagName == "LI" && e.target.className == "e-category"){ 
             var category = e.target.innerText; 
                var ddlObj = $('#vegetable').data("ejDropDownList"); 
                var list = ddlObj.getListData(); 
             var indices = []; 
             for(var i=0; i< list.length;i++){ 
                if(list[i].category == category) indices.push(i); 
             } 
             ddlObj.setModel({ selectedIndices: indices }); 
           } 
        }); 
         var target; 
         $(function () { 
              $('#vegetable').ejDropDownList({               
                 width:"150px", 
                dataSource: skillset, 
                fields: { text: "skill" ,category: "category"}, 
                allowGrouping:true, 
                enableloadOnDemand:false, 
                 enableFilterSearch: true , 
                multiSelectMode: ej.MultiSelectMode.VisualMode, 
                showCheckbox: true 
              }); 
         }); 
</script> 

We have prepared a sample for your reference, please refer to the following playground link: https://jsplayground.syncfusion.com/znwys12e  

Regards, 
Prince 



MA Marko May 1, 2018 02:29 PM UTC

Hi,

thank you for your cod snippet. I was able to mage select to work as I wanted, so I do not need ejDropDownTree.
Thank you again for your help.

Regards,
Marko


KR Keerthana Rajendran Syncfusion Team May 2, 2018 04:22 AM UTC

Hi Marko,  
 
Most Welcome. Please get back to us if you need further assistance on this. We will be happy to assist you. 
 
Regards, 
Keerthana. 


Loader.
Up arrow icon