More Padding Left In TreeGrid Child First Column

[Nagendra Gupta]

Dear Team,

Our requirement is more left padding in the every child row first column. The text of the child should appear below the text of the parent row.

Please find the attach file for example

Attachment: TreeGrid_e6197834.zip

[Farveen Sulthana Thameeztheen Basha]

Hi Nagendra Gupta,

Query#:- Our requirement is more left padding in the every child row first column.

From your provided screenshot, we understood that you need to increase the Indent space for child rows. To achieve this, we have customized the IndentWidth using queryCellInfo event of the TreeGrid. In queryCellInfo event, we have added space by adding new span Tags to treecolumncontainer.

Refer to the code below:-

App.Component.html:-

 

<ejs-treegrid

       [dataSource]="data"

       #treegrid

       height="220"

      [allowPaging]="true"

      [treeColumnIndex]="1"

      childMapping="subtasks"

    (queryCellInfo)="querycellinfo($event)"

  >

    <e-columns>

      <e-column

        field="taskID"

        headerText="Task ID"

        textAlign="Right"

        width="90"

      ></e-column>

    </e-columns>

  </ejs-treegrid>

 

App.Component.ts:-

 

      queryCellInfo(args) {

            if (args.data.level > 0) {

                if ( !isNullOrUndefined(args.cell.querySelector('.e-treecolumn-container')) ) {

                    var row = args.cell.querySelector('.e-treecolumn-container');

                    var spanNew = document.createElement('span');

                    spanNew.className = 'newSpan';

                    row.appendChild(spanNew);

                    row.insertBefore(spanNew, row.children[0]);

                }

            }

 

app.Component.css:-

<style>

    .newSpan {

        width: 25px;      //add the required width for child rows

   }

</style>

Sample link:- https://stackblitz.com/edit/angular-3e2ihf-jsajrq?file=app.component.html

API link:- https://ej2.syncfusion.com/angular/documentation/api/treegrid/#querycellinfo

Please get back to us if you need any further assistance.

Regards,
Farveen sulthana T

[Nagendra Gupta]

Hi Farveen Sulthana Thameeztheen Basha ,

As per your example it is working only one level but our requirement is multi level.

[Farveen Sulthana Thameeztheen Basha]

Hi Nagendra Gupta,

Query#:- As per your example it is working only one level but our requirement is nth level.

To achieve your requirement, we have set the Increase the Indent space of the child rows based on args.data.level in the queryCellInfo event.

Refer to the code below:-

App.Component.html:-

 

<ejs-treegrid

       [dataSource]="data"

       #treegrid

       height="220"

      [allowPaging]="true"

      [treeColumnIndex]="1"

      childMapping="subtasks"

    (queryCellInfo)="querycellinfo($event)"

  >

    <e-columns>

      <e-column

        field="taskID"

        headerText="Task ID"

        textAlign="Right"

        width="90"

      ></e-column>

    </e-columns>

  </ejs-treegrid>

 

 

App.Component.ts:-

 

function queryCellInfo(args) {

        if (args.data.level > 0) {

            if ( !isNullOrUndefined(args.cell.querySelector('.e-treecolumn-container')) ) {

                var row = args.cell.querySelector('.e-treecolumn-container');

               

                var spanNew = document.createElement('span');

                spanNew.style.width = 20 * args.data.level + 'px';   //set width based on the level of the childrows

                spanNew.className = 'newSpan';

                row.appendChild(spanNew);

                row.insertBefore(spanNew, row.children[0]);

            }

        }

    }

 

Modified sample link:- https://stackblitz.com/edit/angular-3e2ihf-afn1uk?file=app.component.ts

Screenshot:-

Please get back to us if you need any further assistance.

Regards,

Farveen sulthana T

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Tuariq Beg]

Hi, level property always comes as 0 if we use data manager to fetch remote data when row gets expanded, rather than all in memory data.
How to achieve same results there?

[Farveen Sulthana Thameeztheen Basha]

Tuariq Beg,

Greetings from Syncfusion.

Query#:- Hi, level property always comes as 0 if we use data manager to fetch remote data when row gets expanded, rather than all in memory data.

We have checked this solution using RemoteData but we are unable to replicate the problem at our end(queryCellInfo event triggers upon Expanding). Refer to the sample link:-

https://stackblitz.com/edit/angular-vvmfxp-hfpxe6?file=src%2Fapp.component.html

Screenshot:-

We need some more additional details to find the cause of the issue. Share us the following details.

1. Complete TreeGrid code example.
2. Screenshot or video demo to replicate the issue.
3. If possible replicate from above shared sample and revert us back.

Regards,

Farveen sulthana T