Unable to set checkedNodes

Thread ID:	Created:	Updated:	Platform:	Replies:
143208	Mar 8,2019 08:23 PM UTC	Mar 11,2019 12:23 PM UTC	React - EJ 2	1

Subscribe to this post

Tags: Treeview

Brian

Asked On March 8, 2019 08:23 PM UTC

Using the TreeViewComponent I am unable to set the checked nodes via the checkedNodes property with remote data.

Tree Definition

<TreeViewComponent
                fields={{
                    id: 'Id',
                    parentID: 'ParentID',
                    text: 'Text',
                    hasChildren: 'HasChildren',
                    dataSource: this._pcsDataRef.getTreeViewDM(),
                    query: new Query().where('ParentID', 'equal', null).sortBy('Text'),
                    child: {
                        dataSource: this._pcsDataRef.getTreeViewDM(),
                        id: 'Id',
                        parentID: 'ParentID',
                        text: 'Text',
                        hasChildren: 'HasChildren',
                        query: new Query().select(['Id', 'ParentID', 'Text', 'HasChildren', 'Code', 'CodeSet']),
}
}}
                showCheckBox={true}
                autoCheck={false}
                checkedNodes={this.state.checkedNodes}
                nodeChecked={this._nodeChecked.bind(this)}
                drawNode={this._drawNode}
                ref={t => this._treeViewRef = t}
                dataBound={(evt:DataBoundEventArgs)=>{
                    console.info(`${this._logName}::_dataBound`);
                    console.info(evt);
                    console.info(this._treeViewRef.getAllCheckedNodes());
}}
                dataSourceChanged={(evt:DataSourceChangedEventArgs)=>{
                    console.info(`${this._logName}::_dataSourceChanged`);
                    console.info(evt);
}}
            />

this.state.checkedNodes = ["MME~500","ICD-10~CHAP13","MME~200","MME~200.1","ICD-10~M32","ATC~L04AD","MME~600"];

This array lines up with what I get when I call getAllCheckedNodes() after manually checking each of them in the list.

Any ideas on how I can get my pre-checked nodes loaded?

Reply | Reply with quote

Christopher Issac Sunder K [Syncfusion]

Replied On March 11, 2019 12:23 PM UTC

Hi Brian,

Thank you for contacting Syncfusion support.

You can get the pre checked child nodes in remote data with the nodeExpanded event of treeview. Please check the following code snippet.

onExpand(args) {

let parentId = args.nodeData["id"];

// checks whether the expand action happens for the first time

if (this.expandedNode.indexOf(parentId) === -1) {

this.expandedNode.push(parentId);

let liEle = args.node.querySelectorAll('ul li');

for (let i = 0; i < liEle.length; i++) {

var id = liEle[i].getAttribute("data-uid");

// checks whether the child nodes of the expanded node is in checkedNode

if (this.checkedNodes.indexOf(id) !== -1) {

this.treeObj.checkAll([liEle[i]]);

}

} else {

// Cancel the event if the node is already expanded and checked

args.cancel = true;

}

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

Please get back to us if you need any further assistance.

Thanks,
Christo

Reply | Reply with quote

Unable to set checkedNodes

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US