You can enable/disable the Tree Grid and its actions by applying/removing corresponding CSS styles.
To enable/disable the Tree Grid and its actions, follow the given steps:
Step 1:
Create CSS class with custom style to override the default style of Tree Grid.
.disabletreegrid {
pointer-events: none;
opacity: 0.4;
}
.wrapper {
cursor: not-allowed;
}
Step 2:
Add/Remove the CSS class to the Tree Grid in the click event handler of Button.
document.getElementById('primarybtn').addEventListener('click', () => {
if (treegrid.element.classList.contains('disabletreegrid')) {
treegrid.element.classList.remove('disabletreegrid');
document.getElementById("TreeGridParent").classList.remove('wrapper');
}
else {
treegrid.element.classList.add('disabletreegrid');
document.getElementById("TreeGridParent").classList.add('wrapper');
}
});
In the below demo, the button click will enable/disable the Tree Grid and its actions.
ej.treegrid.TreeGrid.Inject(ej.treegrid.Edit, ej.treegrid.Toolbar);
var treegrid = new ej.treegrid.TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
treeColumnIndex: 1,
height: 220,
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
editSettings: { allowAdding:true, allowEditing: true, allowDeleting:true, mode: 'Row' },
columns: [
{ field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180, textAlign: 'Left' },
{ field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd'},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
],
});
treegrid.appendTo('#TreeGrid');
var button = new ej.buttons.Button({}, '#primarybtn');
document.getElementById('primarybtn').addEventListener('click', () => {
if (treegrid.element.classList.contains('disabletreegrid')) {
treegrid.element.classList.remove('disabletreegrid');
document.getElementById("TreeGridParent").classList.remove('wrapper');
}
else {
treegrid.element.classList.add('disabletreegrid');
document.getElementById("TreeGridParent").classList.add('wrapper');
}
});
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.disabletreegrid {
pointer-events: none;
opacity: 0.4;
}
.wrapper {
cursor: not-allowed;
}
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Grid Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-treegrid/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<button id="primarybtn">Enable/Disable TreeGrid</button>
<div id="TreeGridParent">
<div id="TreeGrid"></div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
You can refer to our
JavaScript Tree Grid
feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Tree Grid exampleJavaScript Tree Grid example
to knows how to present and manipulate data.