We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dynamic grid with dynamic headerTemplate

Thread ID:

Created:

Updated:

Platform:

Replies:

131923 Aug 3,2017 11:25 AM UTC Aug 23,2017 08:36 AM UTC Angular 5
loading
Tags: ejGrid
Thomass Gress
Asked On August 3, 2017 11:25 AM UTC

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 [Syncfusion]
Replied On August 4, 2017 11:19 AM UTC

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
Replied On August 4, 2017 12:17 PM UTC

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 [Syncfusion]
Replied On August 7, 2017 11:47 AM UTC

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. 
Regards, 
Saravanan A. 


Thomass Gress
Replied On August 22, 2017 11:31 AM UTC

Thanks, that worked for me!


Saravanan Arunachalam [Syncfusion]
Replied On August 23, 2017 08:36 AM UTC

Hi Thomass,  
Thanks for your update.            
We are happy that the provided information helped you. 
Regards, 
Saravanan A. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;