Hi Madhura,
Query: Is there anyway
to show some guiding lines depicting the hierarchy data in Tree Grid?.
Currently we don’t have support for this feature. However, you can customize the rows and cells by using
the rowDataBound or queryCellInfo event.
Please refer
to the below code example,
|
App.component.html:
<ejs-treegrid
#treegridTaskList
…
(rowDataBound)="dataBound($event)"
>
App.component.ts:
…..
dataBound(args) {
//for
level 1
//Here
you can use your own login for customization
if (args.data.level == 1) {
args.row.cells[1]
.querySelector('.e-icons.e-none')
.setAttribute('style', 'width:40px');
args.row.cells[1]
.querySelector('.e-treecell')
.setAttribute(
'style',
'border-left: 2px solid red; padding: 0 0.5rem;'
);
}
//for
level 2
if (args.data.level == 2) {
args.row.cells[1]
.querySelector('.e-icons.e-none')
.setAttribute('style', 'width:80px');
args.row.cells[1]
.querySelector('.e-treecell')
.setAttribute(
'style',
'border-left: 2px solid green; padding: 0 0.5rem;'
);
}
For
level3
if (args.data.level == 3) {
args.row.cells[1]
.querySelector('.e-icons.e-none')
.setAttribute('style', 'width:120px');
args.row.cells[1]
.querySelector('.e-treecell')
.setAttribute(
'style',
'width:80px;border-left: 2px solid blue; padding: 0 0.5rem;'
);
}
}
|
Please refer to the below sample,
https://stackblitz.com/edit/angular-f32zfs-yxgwdg?file=app.component.ts,index.html
Please
refer to the below help documentation,
https://ej2.syncfusion.com/angular/documentation/treegrid/how-to/row-cell-customization/
Please refer
to the below API documentation,
https://ej2.syncfusion.com/documentation/api/treegrid/#rowdatabound
https://ej2.syncfusion.com/documentation/api/treegrid/#querycellinfo
Regards,
Pon selva
If this post is helpful, please consider
Accepting it as the solution so that other members can locate it more quickly
