Check/uncheck the checkbox on clicking the tree node text

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'));