Having trouble getting help?
Contact Support
Contact Support
Hover multi line tree node in React TreeView component
28 Feb 202524 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)
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);
function App() {
// Data source for TreeView component
let 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' }
]
}
]
}
];
let field = { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'child' };
let style = "customTree";
let treeObj;
// Sets e-fullrow to be the same as e-text-content
function setHeight(element) {
if (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
function onSelect(args) {
setHeight(args.node);
}
function created() {
// Triggers on mouse hover/keydown event
treeObj.element.addEventListener('mouseover', (event) => {
setHeight(event.target);
});
}
return (<div className='control-pane'>
<div className='control-section'>
<div className='control_wrapper'>
{/* Render TreeView */}
<TreeViewComponent fields={field} created={created.bind(this)} nodeSelecting={onSelect.bind(this)} cssClass={style} ref={(treeview) => { treeObj = treeview; }}/>
</div>
</div>
</div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));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);
function App() {
// Data source for TreeView component
let 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' }
]
}
]
}
];
let field:Object ={ dataSource: hierarchicalData , id: 'id', text: 'name', child: 'child' };
let style: string="customTree";
let treeObj: TreeViewComponent;
// Sets e-fullrow to be the same as e-text-content
function setHeight(element: any) {
if(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
function onSelect(args: NodeSelectEventArgs): void {
setHeight(args.node);
}
function created(){
// Triggers on mouse hover/keydown event
treeObj.element.addEventListener('mouseover', (event: any)=>{
setHeight(event.target);
});
}
return (
<div className = 'control-pane'>
<div className='control-section'>
<div className='control_wrapper'>
{/* Render TreeView */}
<TreeViewComponent fields={field} created={created.bind(this)} nodeSelecting={onSelect.bind(this)} cssClass={style} ref={(treeview) => { treeObj = treeview as TreeViewComponent; }} />
</div>
</div>
</div>
)
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React TreeView</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="style.css" rel="stylesheet"/>
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='treeparent'>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</div>
</body>
</html>#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;
}