Search results

Disable checkbox of the tree node in React TreeView component

You can disable the check box alone in TreeView instead of disabling the whole node. You need to include the e-checkbox-disabled class into the check box element using the drawNode event. Please refer to the following sample to disable the check box of the tree nodes.

Source
Preview
index.tsx
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {TreeViewComponent, DrawNodeEventArgs} from '@syncfusion/ej2-react-navigations';
import {enableRipple} from '@syncfusion/ej2-base';
enableRipple(true);

export default class App extends React.Component<{}, {}> {

   // Data source for TreeView component
  private Countries: { [key: string]: Object }[] = [
    { id: 1, name: 'India', hasChild: true, expanded: true },
    { id: 2, pid: 1, name: 'Assam' },
    { id: 3, pid: 1, name: 'Bihar' },
    { id: 4, pid: 1, name: 'Tamil Nadu' },
    { id: 6, pid: 1, name: 'Punjab' },
    { id: 7, name: 'Brazil', hasChild: true },
    { id: 8, pid: 7, name: 'Paraná' },
    { id: 9, pid: 7, name: 'Ceará' },
    { id: 10, pid: 7, name: 'Acre' },
    { id: 11, name: 'France', hasChild: true },
    { id: 12, pid: 11, name: 'Pays de la Loire' },
    { id: 13, pid: 11, name: 'Aquitaine' },
    { id: 14, pid: 11, name: 'Brittany' },
    { id: 15, pid: 11, name: 'Lorraine' },
    { id: 16, name: 'Australia', hasChild: true },
    { id: 17, pid: 16, name: 'New South Wales' },
    { id: 18, pid: 16, name: 'Victoria' },
    { id: 19, pid: 16, name: 'South Australia' },
    { id: 20, pid: 16, name: 'Western Australia' },
    { id: 21, name: 'China', hasChild: true },
    { id: 22, pid: 21, name: 'Guangzhou' },
    { id: 23, pid: 21, name: 'Shanghai' },
    { id: 24, pid: 21, name: 'Beijing' },
    { id: 25, pid: 21, name: 'Shantou' }
   ]

    private field:Object ={  dataSource: this.Countries, id: 'id', text: 'name', parentID: 'pid', hasChildren: 'hasChild' };
    private showCheckBox: boolean=true;

    drawNode(args: DrawNodeEventArgs): void {
      let ele: HTMLElement = args.node.querySelector('.e-checkbox-wrapper');
      ele.classList.add('e-checkbox-disabled');
    }

    render() {
      return (
        <div className = 'control-pane'>
          <div className='control-section'>
            <div className='control_wrapper'>
              {/* Render TreeView */}
              <TreeViewComponent fields={this.field} showCheckBox={this.showCheckBox} drawNode={this.drawNode.bind(this)} />
            </div>
          </div>
        </div>
      )
    }
}

ReactDOM.render(<App />, document.getElementById('sample'));