Set selected value on load on DropDownTreeComponent

[Sebastian Faltoni]

Hi,

I'm trying to set a selected value for the DropDownTreeComponent, i managed it to load the tree and also save the value from the selection.

But i can get to set  a default selection when the app reload. Tried to set value={..} and setting directly by accessing the reference ddTree.value = ["my id"]

when i set value as an attribute i get and error.

Do you have a working example? the examples found in the docs dosent have a preselected value.

Thanks

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Sabastian, 

 

Greetings from Syncfusion support. 

 

We have validated your reported query on DropdownTree component. For your reference, we have prepared a simple of DropdownTree, in which we have set the value for the component on initialization. This sample would help you meet your expected requirement in DropdownTree component. 

 

Sample: https://stackblitz.com/edit/dropdowntree-init-value?file=index.js  

 

Also, please check out the following links to know more about DropdownTree in React platform. 

 

Demos: https://ej2.syncfusion.com/react/demos/#/material/drop-down-tree/default  

 

Documentation: https://ej2.syncfusion.com/react/documentation/drop-down-tree/getting-started/  

 

API Reference: https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/  

 

Please, let us know if you need any further assistance. 

 

Regards, 

Shameer Ali Baig S. 

[Sebastian Faltoni]

Thanks for the sample.

I managed to fix it on my side, it was i think a problem of setState calls messing with each other. 

[Sowmiya Padmanaban]

Hi Sebastian Faltoni,  

 

Thanks for the update. 

 

We are happy to hear that you problem has been resolved. Please contact us, if you need any help from us. 

 

Regards,  

Sowmiya.P 

[Jim Schein]

Trying to get this to work in a functional component instead of a class component.  I'd think it'd be similar, nothing I've tried has worked though.  Any chance someone could post an example of this working in a functional component?

[Prasanth Madhaiyan]

Hi Jim,

Based on the shared details, we have prepared the React Dropdown Tree sample using the functional component.

For your reference, we have attached the sample, demo, and documentation.

Sample:
https://stackblitz.com/edit/react-byquxq?file=index.js

Demo: https://ej2.syncfusion.com/react/demos/#/material/drop-down-tree/default

Documentation: https://ej2.syncfusion.com/react/documentation/drop-down-tree/getting-started

Regards,

Prasanth Madhaiyan.

[rohan chaudhary]

Hi All i am getting issue in setting the default value in react tree grid inside a dropdownlistcomponent can anyone help me out . using functional component.

const  CoaAccountCategories =

[ { "AccountID": 26, "AccountCode": "0100", "AccountName": "Assets", "BalanceSheet": true, "Status": true, "Posting": null, "SubLevel": 0, "Code": "A", "AccountTypeId": 4, "ParentId": null }, { "AccountID": 35, "AccountCode": "0400", "AccountName": "Liabilities", "BalanceSheet": true, "Status": true, "Posting": null, "SubLevel": 0, "Code": "L", "AccountTypeId": 5, "ParentId": null } ]

<ColumnDirective

headerText="Action"

width="50"

field="AccountTypeId"

template={(props) => (

  <DropDownListComponent

  dataSource={CoaAccountCategories}

  ref={(dropdownlist) => {

    listObj = dropdownlist;

  }}

  fields={{text: 'Code', value: 'AccountTypeId'}}

  value={props.AccountTypeId || null}

  popupHeight="220px"

/>

)}

/>

[Sridharan Jayabalan]

Hi Rohan,

  

The reported problem occurs only when TreeGrid datasource doesn’t contain AccountTypeId (Dropdown fields.value). For your query, we have prepared sample based on the provided code and we have used your datasource for treeGrid and dropDownList which is working as expected. If the TreeGrid datasource contains the AccountTypeId field, then kindly share the TreeGrid datasource details to proceed further. Refer below attached sample.

 

Sample - 3yvb8b (forked) - StackBlitz

 

Regards,

Sridharan