left align row checkboxes

[Zachary]

I have a checkbox column in the treegrid. There is an indent to the left of the checkbox so it does not align with the header checkbox.

I see there are two spans before the checkbox with a width of 10 that are causing the indent. What would be the best way to remove the indent without causing issues with other treegrid functionality?

<span class="e-icons e-none" style="width: 10px; display: inline-block"></span>

[Jagadesh Ram Raajkumar]

Hi Zachary, 

Greetings from Syncfusion Support.

Query: To remove indent spacing to the left of the checkbox. 

Based on your requirement, you can use queryCellInfo event to individually configure the cell’s styles. By default in the treegrid the intend set is to show difference between both parent and child. As you want to remove some indent spacing, you can use the below code. 

[app.component.html] 

    <ejs-treegrid [dataSource]='data' height = '400' autoCheckHierarchy='true' childMapping='subtasks' [treeColumnIndex]='1' (queryCellInfo)=queryCellInfo($event)> 

        <e-columns> 

        ...... 

        </e-columns> 

    </ejs-treegrid> 

[app.component.ts] 

 

export class AppComponent {    public data: Object[] = [];    ngOnInit(): void {        this.data = sampleData;    }    queryCellInfo(args){        if(args.column.field == 'taskName' && !args.data.hasChildRecords){            args.cell.querySelectorAll('.e-icons.e-none')[0].remove()        }    }}

 

Screenshots:
1. Without removing indent space.
 

2. Indent space removed.
 

Please refer to the below sample and documentation,
Sample: https://stackblitz.com/edit/angular-f169200?file=app.component.ts
Documentation: https://ej2.syncfusion.com/angular/documentation/api/treegrid/#querycellinfo

Please get back to us for further assistance. 

Regards,
Jagadesh Ram 

[Zachary]

Worked perfectly. Thanks!

[Jagadesh Ram Raajkumar]

Hi Zachary, 

Thanks for the update.

We are glad that your queries have been resolved.

Please get back to us for further assistance. 

Regards,
Jagadesh Ram