ng-template inside e-column showing before column default properties

[pooja kalegowda]

Hi,

I am trying to implement a Treegrid component where in I have to display column content as a template which I can customize by adding icons and other button inside each column item. Please find my implementation as below

<ejs-treegrid [dataSource]='data' #treegrid [treeColumnIndex]='0'

        parentIdMapping='PID' idMapping='ID' height=265

        [allowPaging]="true" [pageSettings]='pageSettings' >

<e-column headerText='Name' width='60' [showCheckbox]='true'>

                <ng-template #template let-data="">

                    <div class="nodetext">

                        <i class="e-icon e-add" id="icontooltip"

                            title="ID"></i>&nbsp;

                        <span class="treeName" id="nodetooltip"

                            title="name">{{data.Name}}</span>

                        <div class="nodeicon">

                            <span class="e-icons e-add"></span> &nbsp;&nbsp;

                            <span class="e-icons e-menu"></span> &nbsp;&nbsp;

                        </div>

                    </div>

                </ng-template>

</e-column>

<e-column field='ID' headerText='Node ID' width='20'></e-column>

            <e-column field='Description' width='60'></e-column>

        </e-columns>

</ejs-treegrid>

Need clarification on following points:

1. The highlighted ng-template written is displayed before expandable icon in each row, and also the checkbox is displayed after that, but I need to display checkbox and the expandable icon before the values. 

Example: Project need to come after checkbox

the current screenshot:

2. Also the icons which are present after the Name fields (add icon and menu icon) I should have at the end of the column for each rows.

Kindly let me know how to proceed to resolve this issue.

Thanks in Advance.

Regards,

Pooja K

[Farveen Sulthana Thameeztheen Basha]

Hi Pooja, 

Thanks for your interest in Syncfusion Components. 

Query#1:-  The highlighted ng-template written is displayed before expandable icon in each row, and also the checkbox is displayed after that, but I need to display checkbox and the expandable icon before the values.  

 

2. Also the icons which are present after the Name fields (add icon and menu icon) I should have at the end of the column for each rows. 

 

We have checked your query and prepared sample with Checkbox column and ng-template (placing the Icons Inside the span) so that template has been displayed as like your required structure. 

Sample Link:- https://stackblitz.com/edit/angular-gmv52n-4wp5qd?file=app.component.html 

Screenshot:- 

 

After placing like above still faced issue, replicate your issue in the above sample and revert us back so that we could proceed further. 

Regards, 

Farveen sulthana T