Syncfusion Angular TreeGrid Hierarchy lines or connectors

Question

Is there anyway to show some guiding lines / Connectors depicting the hierarchy data in Tree Grid?

Refer to the blue lines in the below image

Answer 1

Query: Is there anyway to show some guiding lines depicting the hierarchy data in Tree Grid?.

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
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 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