Remove colon from header in grid grouping

[Hamid Akhtar]

Hello team syncfusion, I have used grouping in grid. Want to remove the colon from the header.

[Joseph Christ Nithin Issack]

Hi Hamid, 

  Greetings from Syncfusion support. 

  Based on your query, remove colon from header in grid grouping. By default we will not add any colon to the group’s header. We would like you to provide the following details so that we may be able to provide a better solution. 

• Share the complete grid rendering code example.
• Share the whether you have used any template for the groups header.
• Share a simple issue replicating sample.

Regards, 

Joseph I 

[Hamid Akhtar]

Please notice the colon  "Customer ID:" , "ShipCity:" , These are the column headers, I use the same example in my app.  If I leave the header text empty, the colon still appears. 

You can check it here.
https://ej2.syncfusion.com/angular/documentation/grid/grouping/

[Joseph Christ Nithin Issack]

Hi Hamid, 

  Thanks for your update. 

  Query : Please notice the colon  "Customer ID:" , "ShipCity:" , These are the column headers, I use the same example in my app.  If I leave the header text empty, the colon still appears. 

    Based on your query we suspect that you are providing the empty string as the header text for the columns which you are grouping. That is the reason for the reported behavior where you get the colon at the beginning of the group caption. But you want to remove the  colon at the beginning of the group caption. 

  Your requirement can be achieved by using the `groupSettings.captionTemplate` prtoeprty of the EJ2 Grid. Where you can customize the group caption displayed. 

Please refer the below code example: 

 <ejs-grid 

    #grid 

    [dataSource]="data" 

    allowPaging="true" 

    allowSorting="true" 

    [allowGrouping]="true" 

    [groupSettings]="groupOptions" 

    [pageSettings]="pageSettings" 

    height="320" 

    (dataBound)="dataBound()" 

    (created)="created()" 

    (load)="load()" 

  > 

    <e-columns> 

      <e-column 

        field="Inventor" 

        headerText="Inventor Name" 

        width="180" 

      ></e-column> 

      <e-column 

        field="NumberofPatentFamilies" 

        headerText="Number of Patent Families" 

        width="220" 

        textAlign="Right" 

      ></e-column> 

      <e-column field="Country" headerText="Country" width="140"></e-column> 

      <e-column field="Active" width="120"></e-column> 

      <e-column 

        field="Mainfieldsofinvention" 

        headerText="Main fields of invention" 

        [allowGrouping]="false" 

        width="200" 

      ></e-column> 

    </e-columns> 

    <ng-template #groupSettingsCaptionTemplate let-data> 

      <span class="groupHeader" style="color:blue">{{ data.field }}</span> 

      <span class="groupItems" style="color:blue"> 

        - {{ data.count }} Items</span 

      > 

    </ng-template> 

  </ejs-grid> 

Sample: https://stackblitz.com/edit/angular-pfcm2t?file=app.component.html 

Please find the attached sample and revert for more queries. 

Regards, 

Joseph I.