CODEWITHSUNDEEP
angularsyncfusiontreegridej2-syncfusion
Madhura Adawadkar
Madhura Adawadkar

Reputation: 192

Syncfusion Angular TreeGrid Hierarchy lines or connectors

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

enter image description here

Upvotes: 0

Views: 151

Answers (1)

Poncy Selva
Poncy Selva

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

Upvotes: 0

Related Questions