Search results

Check/uncheck the checkbox on clicking the tree node text

You can check and uncheck the checkboxes of tree view by clicking the tree node using the nodeClicked event of TreeView.

Source
Preview
index.tsx
style.css
index.jsx
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { SampleBase } from './sample-base';
import {TreeViewComponent, NodeKeyPressEventArgs, NodeClickEventArgs} from '@syncfusion/ej2-react-navigations';
import {enableRipple} from '@syncfusion/ej2-base';
enableRipple(true);

export default class App extends React.Component<{}, {}> {
// Hierarchical data source for TreeView component
  public hierarchicalData: { [key: string]: Object }[] = [
    {
      id: '01',
      name: 'Local Disk (C:)',
      expanded: true,
      subChild: [
        {
          id: '01-01',
          name: 'Program Files',
          subChild: [
            { id: '01-01-01', name: 'Windows NT' },
            { id: '01-01-02', name: 'Windows Mail' },
            { id: '01-01-03', name: 'Windows Photo Viewer' }
          ]
        },
        {
          id: '01-02',
          name: 'Users',
          expanded: true,
          subChild: [
            { id: '01-02-01', name: 'Smith' },
            { id: '01-02-02', name: 'Public' },
            { id: '01-02-03', name: 'Admin' }
          ]
        },
        {
          id: '01-03',
          name: 'Windows',
          subChild: [
            { id: '01-03-01', name: 'Boot' },
            { id: '01-03-02', name: 'FileManager' },
            { id: '01-03-03', name: 'System32' }
          ]
        }
      ]
    },
    {
      id: '02',
      name: 'Local Disk (D:)',
      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' }
          ]
        },
        {
          id: '02-02',
          name: 'Projects',
          subChild: [
            { id: '02-02-01', name: 'ASP Application' },
            { id: '02-02-02', name: 'TypeScript Application' },
            { id: '02-02-03', name: 'React Application' }
          ]
        },
        {
          id: '02-03',
          name: 'Office',
          subChild: [
            { id: '02-03-01', name: 'Work details.docx' },
            { id: '02-03-02', name: 'Weekly report.docx' },
            { id: '02-03-03', name: 'Wish list.csv' }
          ]
        }
      ]
    },
    {
      id: '03',
      name: 'Local Disk (E:)',
      icon: 'folder',
      subChild: [
        {
          id: '03-01',
          name: 'Pictures',
          subChild: [
            { id: '03-01-01', name: 'Wind.jpg' },
            { id: '03-01-02', name: 'Stone.jpg' },
            { id: '03-01-03', name: 'Home.jpg' }
          ]
        },
        {
          id: '03-02',
          name: 'Documents',
          subChild: [
            { id: '03-02-01', name: 'Environment Pollution.docx' },
            { id: '03-02-02', name: 'Global Warming.ppt' },
            { id: '03-02-03', name: 'Social Network.pdf' }
          ]
        },
        {
          id: '03-03',
          name: 'Study Materials',
          subChild: [
            { id: '03-03-01', name: 'UI-Guide.pdf' },
            { id: '03-03-02', name: 'Tutorials.zip' },
            { id: '03-03-03', name: 'TypeScript.7z' }
          ]
        }
      ]
    }
  ];

  private showCheckBox: boolean = true;

  public treeObj: TreeViewComponent = null as any;

  private fields: object = {
    dataSource: this.hierarchicalData,
    id: 'id',
    text: 'name',
    child: 'subChild'
  };

  nodeCheck(args: NodeKeyPressEventArgs | NodeClickEventArgs) {
    let checkedNode: any = [args.node];
    if (
      (args as any).event.target.classList.contains('e-fullrow') ||
      (args as any).event.key == 'Enter'
    ) {
      let getNodeDetails: any = (this.treeObj as any).getNodeData(args.node);
      if (getNodeDetails.isChecked == 'true') {
        this.treeObj.uncheckAll(checkedNode);
      } else {
        this.treeObj.checkAll(checkedNode);
      }
    }
  }

  render() {
    return (
      <div className="control-pane">
        <div className="control-section">
          <div className="control_wrapper">
            <TreeViewComponent
              fields={this.fields}
              showCheckBox={this.showCheckBox}
              ref={treeview => {
                this.treeObj = treeview as TreeViewComponent;
              }}
              nodeClicked={this.nodeCheck.bind(this)}
              keyPress={this.nodeCheck.bind(this)}
            />
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('sample'));
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

#treeparent {
    display: block;
    max-width: 350px;
    max-height: 350px;
    margin: auto;
    overflow: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        // Hierarchical data source for TreeView component
        this.hierarchicalData = [
            {
                id: '01',
                name: 'Local Disk (C:)',
                expanded: true,
                subChild: [
                    {
                        id: '01-01',
                        name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' }
                        ]
                    },
                    {
                        id: '01-02',
                        name: 'Users',
                        expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' }
                        ]
                    },
                    {
                        id: '01-03',
                        name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' }
                        ]
                    }
                ]
            },
            {
                id: '02',
                name: 'Local Disk (D:)',
                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' }
                        ]
                    },
                    {
                        id: '02-02',
                        name: 'Projects',
                        subChild: [
                            { id: '02-02-01', name: 'ASP Application' },
                            { id: '02-02-02', name: 'TypeScript Application' },
                            { id: '02-02-03', name: 'React Application' }
                        ]
                    },
                    {
                        id: '02-03',
                        name: 'Office',
                        subChild: [
                            { id: '02-03-01', name: 'Work details.docx' },
                            { id: '02-03-02', name: 'Weekly report.docx' },
                            { id: '02-03-03', name: 'Wish list.csv' }
                        ]
                    }
                ]
            },
            {
                id: '03',
                name: 'Local Disk (E:)',
                icon: 'folder',
                subChild: [
                    {
                        id: '03-01',
                        name: 'Pictures',
                        subChild: [
                            { id: '03-01-01', name: 'Wind.jpg' },
                            { id: '03-01-02', name: 'Stone.jpg' },
                            { id: '03-01-03', name: 'Home.jpg' }
                        ]
                    },
                    {
                        id: '03-02',
                        name: 'Documents',
                        subChild: [
                            { id: '03-02-01', name: 'Environment Pollution.docx' },
                            { id: '03-02-02', name: 'Global Warming.ppt' },
                            { id: '03-02-03', name: 'Social Network.pdf' }
                        ]
                    },
                    {
                        id: '03-03',
                        name: 'Study Materials',
                        subChild: [
                            { id: '03-03-01', name: 'UI-Guide.pdf' },
                            { id: '03-03-02', name: 'Tutorials.zip' },
                            { id: '03-03-03', name: 'TypeScript.7z' }
                        ]
                    }
                ]
            }
        ];
        this.showCheckBox = true;
        this.treeObj = null;
        this.fields = {
            dataSource: this.hierarchicalData,
            id: 'id',
            text: 'name',
            child: 'subChild'
        };
    }
    nodeCheck(args) {
        let checkedNode = [args.node];
        if (args.event.target.classList.contains('e-fullrow') ||
            args.event.key == 'Enter') {
            let getNodeDetails = this.treeObj.getNodeData(args.node);
            if (getNodeDetails.isChecked == 'true') {
                this.treeObj.uncheckAll(checkedNode);
            }
            else {
                this.treeObj.checkAll(checkedNode);
            }
        }
    }
    render() {
        return (<div className="control-pane">
        <div className="control-section">
          <div className="control_wrapper">
            <TreeViewComponent fields={this.fields} showCheckBox={this.showCheckBox} ref={treeview => {
            this.treeObj = treeview;
        }} nodeClicked={this.nodeCheck.bind(this)} keyPress={this.nodeCheck.bind(this)}/>
          </div>
        </div>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));