Dynamic grid with dynamic headerTemplate

[Thomass Gress]

Hi,

i would like to use an Angular component as header of a grid-column. Is this supported?
I got a component being rendered inside the template but I don't know how to let the component be aware of the actual column it is in. I am creating a grid component dynamically and using stacked headers, if this matters.

Could you provide an example?

Thanks
Thomas

[Saravanan Arunachalam]

Hi Thomass, 

Thanks for contacting Syncfusion’s support. 

We are unclear about your requirement and hence could you please provide the following details? 

1.       Do you have rendered the Grid dynamically with auto generated columns (which means no column definition)? 

2.       Do you want to the render the header template for the column’s header? 

3.       How could you render the angular component as template share that code? 

4.       Did you expect add the template to the column dynamically?  

5.       Please provide the clear details of your requirement. 

Regards, 

Saravanan A. 

[Thomass Gress]

Hi Saravanan,

I have rendered the grid with columns defined by an array of objects using ng-template and ng-for:

 <e-columns>
        <ng-template ngFor let-column [ngForOf]="columns">
            <e-column [field]="column.columnField" [headerText]="column.columnHeaderText"
                       [allowEditing]="column.allowEditing"
                       [editSettings]="column.editSettings"
                       [editType]="column.editType"
                       [isPrimaryKey]="column.isPrimaryKey"
                      [headerTemplateID]="column.headerTemplateID">
            </e-column>
        </ng-template>
</e-columns>

This will be the template then - the deliveryHeaderTemplate is further the selector for an angular-component - and this template will be used for a couple of columns:

<div id="deliveryHeaderTemplate" style="visibility:hidden">
    <deliveryHeaderTemplate [someStuff]="this._deliveries"></deliveryHeaderTemplate>
</div>

Then I would like the component being rendered in <deliveryHeaderTemplate /> to know in which column of the grid it is in (i.e. have access to the actual value of column.columnField)

The template will then be manipulated by the logic of the deliveryHeaderTemplate-component.

Thank you for your support and let me know if need any further information.

Regards,
Thomas

[Saravanan Arunachalam]

Hi Thomass, 

We understood from your provided code, you have rendered the Grid columns using ngForOf which are defined in the component.ts file and need to define the headerTemplateID for the specified column. We have achieved this requirement as like in the following code example. 

<ej-grid [allowPaging]="true"   [editSettings]="editsettings" [pageSettings.pageSize]="pagesize" [dataSource]="gridData"> 

    <e-columns> 

      <ng-template ngFor let-column [ngForOf]="columns"> 

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

                       [headerText]="column.headerText" 

                       [allowEditing]="column.allowEditing" 

                       [isPrimaryKey]="column.isPrimaryKey != null ? column.isPrimaryKey : null" 

                       [width] = "column.width" 

                      [headerTemplateID]="column.headerTemplateID != null ? column.headerTemplateID : null"> 

            </e-column> 

       </ng-template> 

    </e-columns> 

</ej-grid> 

 

<div id="test"> 

    <my-comp [mytext]="TestTemplate"></my-comp> 

</div> 

 

  

And also we have created a sample that can be downloaded from the below link. 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/template-sample-133873306  

Regards, 

Saravanan A. 

[Thomass Gress]

Thanks, that worked for me!

[Saravanan Arunachalam]

Hi Thomass,  

Thanks for your update.            

We are happy that the provided information helped you. 

Regards, 

Saravanan A.