Customizing group header using #groupSettingsCaptionTemplate on an ng-template does not work

[Skorri Júlíusson]

I have a grid that is grouped by a column "category". This results in the following group headers: "category: 1", "category: 2", etc. 

How can I remove "category:" from the group header and only display "1", "2", etc ?

I have tried to follow this thread https://www.syncfusion.com/forums/140627/format-grouping-header-caption

And this example https://stackblitz.com/edit/angular-busrq7?file=grouping.html

But it does not work in the latest version of syncfusion.

I am using the following versions of the npm packages

    "@angular/animations": "^9.0.7",

    "@angular/common": "^9.0.7",

    "@angular/compiler": "^9.0.7",

    "@angular/core": "^9.0.7",

    "@angular/forms": "^9.0.7",

    "@angular/platform-browser": "^9.0.7",

    "@angular/platform-browser-dynamic": "^9.0.7",

    "@angular/router": "^9.0.7",

    "@syncfusion/ej2": "^17.4.55",

    "@syncfusion/ej2-angular-buttons": "^17.4.51",

    "@syncfusion/ej2-angular-grids": "^17.4.55",

Where is the documentation for "captionTemplate"? There is nothing about it here https://ej2.syncfusion.com/angular/documentation/grid/grouping/

[Gokul Ramalingam]

Hi Skorri, 

Greetings from Syncfusion Support. 

Query: How can I remove "category:" from the group header and only display "1", "2", etc ? 

 

You can achieve your requirement using the groupSettings.captionTemplate which can be used to specify string template as follows. 

this.groupOptions = {  

          captionTemplate: ' <span class="groupItems" style="color:blue"> ${count} items</span>  

',  

           showGroupedColumn: false, columns: ['Country']   

};  

Query: Where is the documentation for "captionTemplate"?  

 

We have logged a documentation task for this and it will be available in any of our upcoming releases. 

Please get back to us if you need further assistance. 

Regards, 

Gokul R 

[Skorri Júlíusson]

My goal was to show only "1", "2", etc as the group headers. I have three categories: 1, 2 and 3.  I do not want to show "1 - 2 items", only "1".

Is it not possible to use <ng-template> for the group header?

If not, how do I get the value of the category to put in the string template?

[Manivel Sellamuthu]

Hi Skorri, 

Thanks for your update. 

Yes, it is possible to achieve your requirement by using ng-template as like the below code example. But currently it is not working in Angular 9.we are validating this on our end. We will  get back to you once we completed validation. 

<ejs-grid #grid [dataSource]='data' [allowGrouping]='true' [groupSettings]='groupOptions' 

. . . 

    </e-columns>     

    <ng-template #groupSettingsCaptionTemplate let-data> 

      <div class="groupdiv"> 

      <span class="groupspan">{{data.key}} - {{data.count}} items  </span> 

       </div> 

     </ng-template> 

    </ejs-grid> 

Until then we suggest you to render the groupCaption template in the typescript way. Please find the below code example. 

       this.groupOptions = {   

          captionTemplate: ' <span class="groupItems"> ${key} -  ${count} items</span>',   

};   

Please get back to us, if you need further assistance. 

Regards, 

Manivel 

[Manivel Sellamuthu]

Hi Skorri, 

Thanks for your patience. 

We have confirmed that the behavior is an issue from our side and logged a bug for same as “Edit Template not working in Angular 9”. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our upcoming patch release Apr 15^th 2020. 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

 

Feedback Link : https://www.syncfusion.com/feedback/12891/edit-template-not-working-in-angular-9 

Regards, 

Manivel 

[Skorri Júlíusson]

Thank you, I will stay posted.

[Manivel Sellamuthu]

Hi Skorri, 

Thanks for your update. 

We will update you once, we have included the fix. Until then we suggest you to use the workaround we have shared in our previous update. 

Please let us know if you need any further assistance. 

Regards, 

Manivel 

[Manivel Sellamuthu]

Hi Skorri, 

While validating reported issue, we found that there is an issue in angular core level which will not trigger life cycle hook when template compilation takes place.so that reported issue takes place. once below angular team MR get merged reported issue will get resolved. 

Reference: 

Issue - https://github.com/angular/angular/issues/36340 

  

Fix - https://github.com/angular/angular/pull/35464 

Regards, 

Manivel 

[Manivel Sellamuthu]

Hi All, 

  

We are glad to announce that our Essential Studio 2020 Volume 1 Service Pack1 release v18.1.52  is rolled out and is available for download under the following link. 

  

 https://www.syncfusion.com/forums/154238/essential-studio-2020-volume-1-service-pack-release-v18-1-0-52-is-available-for-download 

  

The reported issue “Edit Template not working in Angular 9'” is refreshed in that release. So kindly upgrade to our latest version (18.1.52) to resolve the reported issue.  

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

 

Sample: https://stackblitz.com/edit/angular-groupseetinf-version9?file=app.component.ts 

 

Screenshot:  

 

 

  

 

Please let us know, if you need further assistance. 

 

Regards, 

Manivel