Stacked header columns template the rows with ng-template

[Cesar Smerling]

Hi, I need in our grid to use the ng-template #template to template the cell of a row in a column, I am trying to add the stacked columns -> https://ej2.syncfusion.com/angular/documentation/grid/columns/column-headers?cs-save-lang=1&cs-lang=ts#stacked-header
But I am are not sure how to create the columns in the template and pass them to the [columns] input in the column. The way that is shown in the example doesn't feet my needs because I need to use an ng-template for the columns that are stacked.
I tried to pass them as ng-template in the [columns] input and doesn't work. I look up in the documentation of the ColumnDirective and the columns property is documented as 'any' -> https://ej2.syncfusion.com/angular/documentation/api/grid/columnDirective/#columns
and in the code inspection I found that is any and I'm not sure if is possible to do so.
Here is an example

<ng-container *ngFor="let resColumn of resources">
    <e-column
        [field]="'resourceMovement[' + resColumn.index + ']'"
        [headerText]="resColumn.resourceName"
        [columns]="[resourceOptionColumnTemplate, resourceQuantityColumnTemplate]"
    >
     
    </e-column>
</ng-container>

<ng-template #resourceOptionColumnTemplate>
    <e-column #resourceOptionColumn [field]="columns.RESOURCE_OPTION" [headerText]="'option'">
        <ng-template #template let-row>
<!-- WE NEED A COMPONENT HERE -->
            {{ row['resourceMovement'][0][columns.RESOURCE_OPTION] }}
        </ng-template>
    </e-column>
</ng-template>
<ng-template #resourceQuantityColumnTemplate>
    <e-column #resourceQuantityColumn [field]="columns.RESOURCE_QUANTITY" [headerText]="'quantity'">
        <ng-template #template let-row>
            <!-- WE NEED A COMPONENT HERE -->
            {{ row['resourceMovement'][0][columns.RESOURCE_QUANTITY] }}
        </ng-template>
    </e-column>
</ng-template>

[Aishwarya Rameshbabu]

Hi Cesar Smerling,

Greetings from Syncfusion support.

Upon reviewing your query, we have noticed that you want to render column templates in the stacked header columns of the Syncfusion Grid with dynamic column rendering. We have created a simple sample based on your requirements where we rendered a input template for the stacked header column.

Please refer to the code example, sample, and screenshot below for detailed information.

 

App.component.html

<ejs-grid

        #grid id='Grid'

        [dataSource] = 'data'

        allowPaging = 'true'

        [pageSettings] = 'pageSettings'

        height='350'>

        <e-columns>

            <ng-container *ngFor="let column of columnData">

                <e-column [field]="column.field"

                          [headerText]="column.headerText"

                          [width]="column.width"

                          [textAlign]="column.textAlign"

                          [columns]="column.columns"

                          [format]="column.format">

                </e-column>

            </ng-container>

        </e-columns>

    </ejs-grid>

    <ng-template #stackedColTemplate>

            <input>

      </ng-template>

 

 

App.component.ts

 

public ngAfterViewInit() {

        setTimeout(() => {

            this.columnData = [

                { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },

                { field: 'CustomerID', headerText: 'Customer ID', width: 160, textAlign: 'Left' },

                { field: 'EmployeeID', headerText: 'Employee ID', width: 120, textAlign: 'Right' },

                { field: 'ShipCountry', headerText: 'Ship Country', width: 150, textAlign: 'Left', format: 'Null', },

                {

                    headerText: 'Order Details', columns: [

                        { field: 'OrderDate', headerText: 'Order Date', textAlign: 'Right', width: 135, format: 'yMd', minWidth: 10, editType: 'datepickeredit' },

                        { field: 'Freight', headerText: 'Freight($)', textAlign: 'Right', width: 120, template: this.colTemplate, templateFn: templateCompiler(this.colTemplate), },

                    ]

                },

            ];

        });

    }

Sample: https://stackblitz.com/edit/angular-hwufyo-7crrhn?file=src%2Fapp.component.ts,src%2Fapp.component.html

Screenshot:

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R

[Cesar Smerling]

Hello, now we have another problem adding the columns dinamically. We have an ngFor for the columns because they are dynamic, some of them are stacked, some of them are not, but all of them need the <ng-template #template let-row > to work.
The problem that we face now, is that the stacked columns are templated correctly but the "normal" columns are not,

there is a way to fix this?

[Aishwarya Rameshbabu]

Hi Cesar Smerling,

You are currently experiencing difficulty in rendering templates for dynamic columns in the Grid without stacked columns. To render templates for all columns in the Grid, need to define the template in the Grid columns while iterating through them using ng-for. Please refer to the provided sample and code example below for more information on how to render a template for a Grid column that does not have stacked headers.

App.component.html

 

<div class="col-lg-9 control-section">

    <ejs-grid 

        #grid id='Grid' 

        [dataSource] = 'data'

        allowPaging = 'true'

        [pageSettings] = 'pageSettings' 

        height='350'>

        <e-columns>

            <ng-container *ngFor="let column of columnData">

                <e-column [field]="column.field"

                          [headerText]="column.headerText"

                          [width]="column.width"

                          [textAlign]="column.textAlign"

                          [columns]="column.columns"

                          [format]="column.format">

                          <ng-template #template let-data>

                            <div>{{ data[column.field] }}</div>

                        </ng-template>

                </e-column>

            </ng-container>

        </e-columns>

    </ejs-grid>

    <ng-template #stackedColTemplate let-data>

        <div>{{ data.ShipCountry }}</div> 

      </ng-template>

</div>

 

Sample: https://stackblitz.com/edit/angular-hwufyo-uhe9tf?file=src%2Fapp.component.ts,src%2Fapp.component.html

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

Regards

Aishwarya R