Disable selection for certain items in Dropdown Tree

Question

Is it possible to disable the selection for certain items in a Dropdown Tree.

For instance, you want to display an organisational heirarchy but only allow the user to select "Employees" or something like that.

Use case:

Dropdown Tree that shows the full heirarchy (parent child relationship) of Business, Departments, Employees. Only allow the selection of singular or multiple Employees.

https://stackblitz.com/edit/angular-t6feyp?file=app.component.ts

In this example, only the Employee's in the dropdown should be selectable.

Keerthana Rajendran · Accepted Answer

Hi Jeremy, 
 
Thanks for contacting Syncfusion support. 
 
Yes, you can disable the selection of certain items in a Dropdown Tree component by setting the e-disable class in the dataSource using htmlAttributes for specific nodes.  
 
Refer to the below code snippet. 
 




public countries: Object[] = [ 
        { 
            id: 1, 
            name: 'Business A', 
            hasChild: true, 
            expanded: true, 
            type: 'business', 
            htmlAttributes: { class: 'e-disable' }, 
            selectable: false, 
        }, 
        { 
            id: 2, 
            pid: 1, 
            name: 'Marketing', 
            type: 'department', 
            selectable: false, 
            htmlAttributes: { class: 'e-disable' }, 
        }, 
        { 
            id: 3, 
            pid: 1, 
            name: 'Sales', 
            type: 'department', 
            selectable: false, 
            htmlAttributes: { class: 'e-disable' }, 
        }, 
  ] 
 
Sample: https://stackblitz.com/edit/angular-t6feyp-uxyy8z?file=app.component.ts 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Keerthana R.

Jeremy Carter · Answer

Keerthana,Thank you very much for your working example. This is exactly what we're looking for.Have a great day!

Keerthana Rajendran · Answer

Hi Jeremy, 

Most welcome. We are glad to hear that the provided example helped you. Please get back to us if you need any further assistance. 

Have a nice day! 

Regards, 
Keerthana R.