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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Format grouping header / caption

Thread ID:

Created:

Updated:

Platform:

Replies:

140627 Oct 29,2018 04:32 PM UTC Dec 10,2018 05:35 AM UTC Angular - EJ 2 7
loading
Tags: Grid
Marc Sommer
Asked On October 29, 2018 05:13 PM UTC

Hi,

I am just trying to figure out how to format the group header of a grouped column ((ej2 angular grid):
- get rid of grouped column name
- apply formatting (font weigth bold, font color, Icon, row heigth)

EmployeeName: Marc Fuller - 4 items
     ContactName: Contact1 - 2 items
          Item1 Name Firstname
          Item2 Name Firstname

Expected result:
[Icon] Marc Fuller (4 items):
     Contact1
          Item1 Name Firstname
          Item2 Name Firstname


Is there any way of using a group header template like the following?
     
     
ng-template>
     div>
          span class="groupHeader"> {{data.Fullname}} span class="groupItems" >({{count}} items)
     /div>
/ng-template>

Thank you for your kind help.

Marc

Madhu Sudhanan P [Syncfusion]
Replied On October 30, 2018 11:39 AM UTC

Hi Marc, 
 
Thanks for contacting Syncfusion support. 
 
Query: How to format the group header of a grouped column ((ej2 angular grid): 
 
We have checked your query and the captionTemplate can be used to modify group caption for angular grid in the below way.  
 
Please refer the below code. 

[app.component.ts] 
@Component({ 
    selector: 'app-root', 
    template: `<ejs-grid #grid [dataSource]='data' [allowGrouping]='true' [groupSettings]='groupOptions' 
    height='315px'> 
    <e-columns> 
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column> 
        .  .  .  .  
    </ejs-grid> 
    <ng-template #tt let-data> 
     <div> 
        <span class='groupHeader' style='color:blue'>{{data.CustomerID}}</span> 
        <span class='groupItems' style='color:blue'>({{data.count}} items)</span> 
     </div> 
</ng-template>
}) 

export class AppComponent implements OnInit { 

    public data: Object[]; 
    public groupOptions: GroupSettingsModel; 
    @ViewChild('grid') 
    private grid: GridComponent; 

    @ViewChild('tt') 
    public template: any; 

    ngOnInit(): void { 
        this.data = data; 
        this.groupOptions = { captionTemplate: this.template, columns: ['CustomerID'] }; 
    } 
} 
 
But unfortunately we have a problem in using captionTemplate in angular grid and we have logged “Unable to use caption template in angular grid” as a bug. We have created an support incident under your account, please follow up the incident to track this bug. 

Regards, 
Madhu Sudhanan P 


Marc Sommer
Replied On October 30, 2018 01:53 PM UTC

Hi thanks, even though that is not what I expected to get ;-)

3 questions to follow-up:
  1. I am not familiar with your usual bug resolving speed. Will this bug be patched in near short time or can I only expect a working solution within one of the next official releases?
  2. I guess there is no workaround at the moment?
  3. If this feature would work, would it be possible to have different group caption templates one for each grouped-by column? What would be the syntax?

Madhu Sudhanan P [Syncfusion]
Replied On October 31, 2018 11:16 AM UTC

Hi Marc, 
 
Query 1: I am not familiar with your usual bug resolving speed. Will this bug be patched in near short time or can I only expect a working solution within one of the next official releases? 
Query 2: I guess there is no workaround at the moment? 
 
There is no workaround for this issue. The fix for the issue will be available on November 14, 2018 patch release. Until then we appreciate your patience. 

Query 3: If this feature would work, would it be possible to have different group caption templates one for each grouped-by column? What would be the syntax? 

We have checked your query and it is possible to have different group caption templates for each grouped-by column. You can achieve your requirement by using ngIf and else syntax within <ng-template>. Please find the below code for your reference. 

[app.component.ts] 
@Component({ 
    selector: 'app-root', 
    template: `<ejs-grid #grid [dataSource]='data' [allowGrouping]='true' [groupSettings]='groupOptions' 
    height='315px'> 
    <e-columns> 
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column> 
        .  .  .  .  . 
    </ejs-grid> 
    <ng-template #tt let-data> 
    <div *ngIf="data.field=="CustomerID"; else elseblock"> 
          <div> 
         <span class='groupHeader' style='color:blue'>{{data.CustomerID}}</span> 
         <span class='groupItems' style='color:blue'>({{data.count}} items)</span> 
          </div> 
        </ng-template> 
    <ng-template #elseblock> 
             <div> 
         <span class='groupHeader' style='color:blue'>{{data.OrderDate}}</span> 
         <span class='groupItems' style='color:blue'>({{data.count}} items)</span> 
          </div> 
     </ng-template>` 

}) 

export class AppComponent implements OnInit { 

    public data: Object[]; 
    public groupOptions: GroupSettingsModel; 
    @ViewChild('grid') 
    private grid: GridComponent; 

    @ViewChild('tt') 
    public template: any; 

    ngOnInit(): void { 
        this.data = data; 
        this.groupOptions = { captionTemplate: this.template, columns: ['CustomerID'] }; 
    } 

Regards, 
Madhu Sudhanan P 


Marc Sommer
Replied On December 4, 2018 06:20 AM UTC

Hi,

I upgraded to thew version, but still it seems not to work. As soon as I add  this.groupOptions = { captionTemplate: this.template, columns: ['CustomerID'] }; 
all the data items disappear, the page still shows multiple pages available. As soon as I ungroup ALL columns the data items appear again.
There are no error messages at console level.
 this.groupOptions = { columns: ['CustomerID'] };  works correctly.

Madhu Sudhanan P [Syncfusion]
Replied On December 5, 2018 09:35 AM UTC

Hi Marc, 

Please specify the caption template using the ng-template with variable name groupSettingsCaptionTemplate as below to work properly. 


@Component({ 
    selector: 'app-root', 
    template: `<ejs-grid #grid [dataSource]='data' [allowGrouping]='true' [groupSettings]='groupOptions' 
    height='315px' (actionFailure)='actionFailure($event)'> 
    <e-columns> 
        .... . . . .  
    </e-columns>     
    <ng-template #groupSettingsCaptionTemplate let-data> 
         <span class='groupHeader' style='color:blue'>{{data.field}}</span> 
          <span class='groupItems' style='color:blue'>newcount{{data.count}} items</span> 
     </ng-template> 
    </ejs-grid>` 
 
}) 
export class AppComponent implements OnInit { } 




Regards, 
Madhu Sudhanan P 



Marc Sommer
Replied On December 7, 2018 06:23 AM UTC

Thanks, this way, it works.

So  this.groupOptions = { captionTemplate: this.template }; 
1.) either doesn't work or 
2.) is pretty useless?
3.) Is there an entry on this topic somewhere in the documentation?

Madhu Sudhanan P [Syncfusion]
Replied On December 10, 2018 05:35 AM UTC

Hi Marc, 

Query: So  this.groupOptions = { captionTemplate: this.template } either doesn't work or is pretty useless? 
 
The groupSettings.captionTemplate can be used to specify string template as follows. To use angular based template syntax please use the solution provided in the last update. 


this.groupOptions = { 
          captionTemplate: '<span style="color:lightblue">${field} - ${key}</span>', 
           showGroupedColumn: false, columns: ['Country']  
}; 


Query: Is there an entry on this topic somewhere in the documentation? 
 
We have not updated our documentation with these changes. We will update our documentation and this will be reflected live in any of the upcoming releases. 

Regards, 
Madhu Sudhanan P 


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.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

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

;