Format grouping header / caption

[Marc Sommer]

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]

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]

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]

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]

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]

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 { } 

Sample: https://stackblitz.com/edit/angular-busrq7?file=grouping.html 

Regards, 

Madhu Sudhanan P 

[Marc Sommer]

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]

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