Search results

Apply hover background color in the whole multi-line of a tree node in React TreeView component

18 May 2022 / 3 minutes to read

This section demonstrates how to hover and select a multi-line tree node. Here, you can set the row height (element class: e-fullrow) to be the same as the row content (element class: e-text-content)

Source
Preview
index.jsx
style.css
index.tsx
Copied to clipboard
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(props) {
        super(props);
        // Data source for TreeView component
        this.hierarchicalData = [
            {
                id: 1, name: 'Web Control sWeb ControlsWeb ControlsWeb ControlsWeb ControlsWeb ControlsWeb ControlsWeb Controls', expanded: true,
                child: [
                    {
                        id: 2, name: 'CalendarCalendarCalendarCalendarCalendarCalendarCalendarCalendarCalendarCalendarCalendarCalendarCalendar', child: [
                            { id: 7, name: 'Constructors' },
                            { id: 8, name: 'Properties' },
                            { id: 9, name: 'Methods' },
                            { id: 10, name: 'Events' }
                        ]
                    },
                    {
                        id: 3, name: 'Data Grid', child: [
                            { id: 11, name: 'Constructors' },
                            { id: 12, name: 'Fields' },
                            { id: 13, name: 'Properties' },
                            { id: 14, name: 'Methods' },
                            { id: 15, name: 'Events' }
                        ]
                    },
                    {
                        id: 4, name: 'DropDownList', child: [
                            { id: 16, name: 'Constructors' },
                            { id: 17, name: 'Properties' },
                            { id: 18, name: 'Methods' }
                        ]
                    },
                    {
                        id: 5, name: 'Menu', child: [
                            { id: 19, name: 'Constructors' },
                            { id: 20, name: 'Fields' },
                            { id: 21, name: 'Properties' },
                            { id: 22, name: 'Methods' },
                            { id: 23, name: 'Events' }
                        ]
                    }
                ]
            },
            {
                id: 24, name: 'Web Controls',
                child: [
                    {
                        id: 25, name: 'Calendar', child: [
                            { id: 26, name: 'Constructors' },
                            { id: 27, name: 'Properties' },
                            { id: 28, name: 'Methods' },
                            { id: 29, name: 'Events' }
                        ]
                    },
                    {
                        id: 30, name: 'Data Grid', child: [
                            { id: 31, name: 'Constructors' },
                            { id: 32, name: 'Fields' },
                            { id: 33, name: 'Properties' },
                            { id: 34, name: 'Methods' },
                            { id: 35, name: 'Events' }
                        ]
                    }
                ]
            }
        ];
        this.field = { dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'child' };
        this.style = "customTree";
        this.setHeight = this.setHeight.bind(this);
    }
    // Sets e-fullrow to be the same as e-text-content
    setHeight(element) {
        if (this.treeObj.fullRowSelect) {
            if (element.classList.contains("e-treeview")) {
                element = element.querySelector(".e-node-focus").querySelector(".e-fullrow");
            }
            else if (element.classList.contains("e-list-parent")) {
                element = element.querySelector(".e-fullrow");
            }
            else if (element.classList.value != ("e-fullrow") && element.closest(".e-list-item")) {
                element = element.closest(".e-list-item").querySelector(".e-fullrow");
            }
            if (element.nextElementSibling)
                element.style.height = element.nextElementSibling.offsetHeight + "px";
        }
    }
    // Triggers on node selection
    onSelect(args) {
        this.setHeight(args.node);
    }
    created() {
        // Triggers on mouse hover/keydown event
        this.treeObj.element.addEventListener('mouseover', (event) => {
            this.setHeight(event.target);
        });
    }
    render() {
        return (<div className='control-pane'>
                <div className='control-section'>
                    <div className='control_wrapper'>
                        
                        <TreeViewComponent fields={this.field} created={this.created.bind(this)} nodeSelecting={this.onSelect.bind(this)} cssClass={this.style} ref={(treeview) => { this.treeObj = treeview; }}/>
                    </div>
                </div>
            </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
#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;
}

.customTree li .e-list-text{
    white-space: normal;
    word-break: break-all;
  }
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {TreeViewComponent, NodeSelectEventArgs } from '@syncfusion/ej2-react-navigations';
import {enableRipple} from '@syncfusion/ej2-base';
enableRipple(true);

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

    constructor(props: any){
        super(props);
        this.setHeight=this.setHeight.bind(this);
    }

   // Data source for TreeView component
   private hierarchicalData: { [key: string]: Object }[]= [
      {
            id: 1, name: 'Web Control sWeb ControlsWeb ControlsWeb ControlsWeb ControlsWeb ControlsWeb ControlsWeb Controls', expanded: true,
            child: [
                {
                    id: 2, name: 'CalendarCalendarCalendarCalendarCalendarCalendarCalendarCalendarCalendarCalendarCalendarCalendarCalendar', child: [
                        { id: 7,  name: 'Constructors' },
                        { id: 8,  name: 'Properties' },
                        { id: 9,  name: 'Methods' },
                        { id: 10, name: 'Events' }
                    ]
                },
                {
                    id: 3, name: 'Data Grid', child: [
                        { id: 11, name: 'Constructors' },
                        { id: 12, name: 'Fields' },
                        { id: 13, name: 'Properties' },
                        { id: 14, name: 'Methods' },
                        { id: 15, name: 'Events' }
                    ]
                },
                {
                    id: 4, name: 'DropDownList', child: [
                        { id: 16, name: 'Constructors' },
                        { id: 17, name: 'Properties' },
                        { id: 18, name: 'Methods' }
                    ]
                },
                {
                    id: 5,  name: 'Menu', child: [
                        { id: 19, name: 'Constructors' },
                        { id: 20, name: 'Fields' },
                        { id: 21, name: 'Properties' },
                        { id: 22, name: 'Methods' },
                        { id: 23, name: 'Events' }
                    ]
                }
            ]
        },
        {
            id: 24, name: 'Web Controls',
            child: [
                {
                    id: 25, name: 'Calendar', child: [
                        { id: 26, name: 'Constructors' },
                        { id: 27, name: 'Properties' },
                        { id: 28, name: 'Methods' },
                        { id: 29, name: 'Events' }
                    ]
                },
                {
                    id: 30, name: 'Data Grid', child: [
                        { id: 31,  name: 'Constructors' },
                        { id: 32,  name: 'Fields' },
                        { id: 33,  name: 'Properties' },
                        { id: 34,  name: 'Methods' },
                        { id: 35,  name: 'Events' }
                    ]
                }
            ]
        }
    ];


    private field:Object ={  dataSource: this.hierarchicalData , id: 'id', text: 'name', child: 'child' };

    private style: string="customTree";
    public treeObj: TreeViewComponent;

    // Sets e-fullrow to be the same as e-text-content
     setHeight(element: any) {
      if(this.treeObj.fullRowSelect) {
        if(element.classList.contains("e-treeview")) {
          element = element.querySelector(".e-node-focus").querySelector(".e-fullrow");
        }
        else if(element.classList.contains("e-list-parent")) {
          element = element.querySelector(".e-fullrow");
        }
        else if(element.classList.value != ("e-fullrow") && element.closest(".e-list-item")) {
          element = element.closest(".e-list-item").querySelector(".e-fullrow");
        }
        if(element.nextElementSibling)
          element.style.height = element.nextElementSibling.offsetHeight +"px";
      }
    }
    // Triggers on node selection
    onSelect(args: NodeSelectEventArgs): void {
      this.setHeight(args.node);
    }
    created(){
    // Triggers on mouse hover/keydown event
     this.treeObj.element.addEventListener('mouseover', (event: any)=>{
            this.setHeight(event.target);
        });
    }

    render() {
        return (
            <div className = 'control-pane'>
                <div className='control-section'>
                    <div className='control_wrapper'>
                        {/* Render TreeView */}
                        <TreeViewComponent fields={this.field} created={this.created.bind(this)} nodeSelecting={this.onSelect.bind(this)} cssClass={this.style}  ref={(treeview) => { this.treeObj = treeview as TreeViewComponent; }} />
                    </div>
                </div>
            </div>
        )
    }
}

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