You can customize the column menu icon by overriding the default Tree Grid class .e-icons.e-columnmenu with a custom property content as mentioned below,
.e-treegrid .e-columnheader .e-icons.e-columnmenu::before {
content: "\e903";
}
In the below sample, Tree Grid is rendered with a customized column menu icon.
ej.treegrid.TreeGrid.Inject(ej.treegrid.ColumnMenu);
var treeGrid = new ej.treegrid.TreeGrid({
dataSource: window.projectData,
idMapping: "TaskID",
parentIdMapping: "parentID",
treeColumnIndex: 1,
height: 315,
showColumnMenu: true,
columns: [
{ field: "TaskID", headerText: "Task ID", textAlign: "Right", width: 70 },
{ field: "TaskName", headerText: "Task Name", width: 100 },
{ field: "StartDate", headerText: "Start Date", textAlign: "Right", width: 90,
format: { skeleton: "yMd", type: "date" } },
{ field: "EndDate", headerText: "End Date", textAlign: "Right", width: 90,
format: { skeleton: "yMd", type: "date" } },
{ field: "Duration", headerText: "Duration", textAlign: "Right", width: 90 },
{ field: "Priority", headerText: "Priority", width: 90 }
]
});
treeGrid.appendTo("#TreeGrid");
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-treegrid .e-columnheader .e-icons .e-columnmenu::before {
content: "\e903";
}
<!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">
<div id="TreeGrid"></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.