We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to disable parent selection in a dropdown tree and how to set already selected value for ejs-dropdowntree

Hi Team,

Issue 1:

I am using ejs-dropdowntree, the requirement is we need to disable selecting parent how can we do that

HTML file:

<ejs-dropdowntree #merchandisehierarchy id="merchHeirarchy" formControlName="merchHeirarchy" name="merchHeirarchy"
[fields]='field' [mode]='mode' [popupHeight]='150' (beforeOpen)="beforeOpen($event)"
[treeSettings]="treeSettings" popupHeight='220px' [popupWidth]='300' width="175px">
ejs-dropdowntree>


Here we need to disable selection for parent(Division,Department..) which are highlighted in the below mock up



Issue 2:

After saving the data while opening we need to set already saved value how can we do that.

can you please provide solution for these issues.


Thanks,

Lahari Navudu.


1 Reply

LD LeoLavanya Dhanaraj Syncfusion Team December 9, 2022 04:17 PM UTC

Hi Lahari,


Greetings from Syncfusion support.


Query 1 : Need to disable selecting parent


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. Here, we disabled the first level parent nodes in the Dropdown Tree datasource. You can also achieve your requirement by passing the node id’s in a array format to disableNodes method of TreeView inside the select event of Dropdown Tree component.


Check out the below mentioned code snippets for your reference.


[app.component.html]

<ejs-dropdowntree #sample id="default" ... (select)="onSelect($event)" [fields]="fields"></ejs-dropdowntree>

 

[app.component.ts]

public hierarchicalData: Object[] = [

  {

    id: '01',

    name: 'Local Disk (C:)',

    htmlAttributes: { class: 'e-disable' },

    ...

  },

  {

    id: '02',

    name: 'Local Disk (D:)',

    htmlAttributes: { class: 'e-disable' },

    subChild: [

      {

        id: '02-01',

        name: 'Personals',

        subChild: [

          { id: '02-01-01', name: 'My photo.png' },

          { id: '02-01-02', name: 'Rental document.docx' },

          { id: '02-01-03', name: 'Pay slip.pdf' },

        ],

      },

      ...

    ],

  },

];

 

public onSelect(args) {

  this.ddTree.treeObj.disableNodes([args.itemData.id]);

}


Query 2 : After saving the data while opening we need to set already saved value how can we do that.


We are quite unclear about the exact requirement in the Dropdown Tree component. We would like to confirm whether you want to retrieve the data after editing of the tree nodes or whether you need to get the initially rendered Dropdown Tree datasource. Confirm the above details or share some additional information. It will help us further validate the reported requirement from our side.


Loader.
Live Chat Icon For mobile
Up arrow icon