React Treeview component multiselected and store selected item

[Yahya Alatas]

Hí

I want to store selected item  when i select a multi item on treview. İ looking for synfussion doc, it is exist. But doesnt work for me.

Could you help me.

Thanks.

private selectedNodeList=[]

 axios

      .get(

        `......`

      )

      .then((res) => {

        const tradesData = res.data;

        const allowMultiSelection = true;

        const allowDragAndDrop = true;

        const fieldsForTrades = {

          dataSource: tradesData,

          id: 'ID',

          parentID: 'ASSIGNMENT_ID',

          text: 'NAME',

          child: 'Assignment',

          hasChildren: 'true',

          selected: 'isSelected',

        };

        this.setState({

          fields: fieldsForTrades,

          allowMultiSelection: allowMultiSelection,

          allowDragAndDrop: allowDragAndDrop,

         

        });

      });

render()

{

  <div>

    

<TreeViewComponent

            className='treeTrades123'

            id='treeTrades'

            nodeDragStop={this.itemMoved.bind(this)}

            nodeDropped={this.itemArrived.bind(this)}

            nodeDragging={this.nodeDrag.bind(this)}

            fields={this.state.fields}

            allowMultiSelection={true}

            allowDragAndDrop={true}

            ref={(treeview) => {

              this.treeObj = treeview as TreeViewComponent;

            }}

            nodeClicked={this.nodeclicked.bind(this)}

            showCheckBox={this.isChecked}

            nodeChecked={this.nodeChecked}

            dragArea={document.getElementById('SplitterInner') as HTMLElement}

            nodeSelected={this.nodeSelected.bind(this)}

            selectedNodes={this.selectedNodeList}

          />

 

</div>

}

[Shalini Maragathavel]

Hi Yahya, 

Greetings from Syncfusion support. 

Based on your query, we suspect that you need to store the selected nodes of TreeView. You can achieve your requirement using selectedNodes property in nodeSelected event of TreeView as demonstrated in the below code snippet, 

function TreeView() { 

  function nodeSelected(args) { 

    console.log(this.selectedNodes); 

  } 

  let treeTSX = null; 

  if (treeData && treeData.length > 0) { 

    treeTSX = ( 

      <div className="tree"> 

        <TreeViewComponent 

          fields={fields} 

          selectedNodes={selectedNodes} 

          allowMultiSelection={true} 

          nodeSelected={nodeSelected} 

        /> 

      </div> 

    ); 

  } 

export default TreeView; 

Please find the below sample for your reference.

Sample: https://stackblitz.com/edit/react-functional-treeview-k6hrbc?file=TreeView.tsx

API Link: https://ej2.syncfusion.com/react/documentation/api/treeview#selectednodes 

                 https://ej2.syncfusion.com/react/documentation/api/treeview#nodeselected
                
Please get back to us if you need further assistance.

Regards,   

Shalini M.