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. Image for the cookie policy date

Grouping captionTemplate

Hi, I am trying to customize the grouping caption, but I haven't found a useful example.  I see that it can be done, but could you give me a React specific example of how to create a custom captionTemplate.

For example, we would like to change the caption from: "Make: Chevrolet - 1 item" to "Chevrolet - 1 item"

As you can see, we would like to remove the grouping field name from the caption.

Thank you for your assistance.

3 Replies

PS Pavithra Subramaniyam Syncfusion Team March 8, 2019 04:53 AM UTC

Hi Pat, 
Thanks for contacting Syncfusion support. 
You can achieve your requirement by using the “groupSettings.captionTemplate” property of Grid component which provides an option to customize the default group caption. Please refer to the below code example and sample link for more information. 
export class Grouping extends SampleBase { 
    constructor() { 
        this.groupOptions = { showGroupedColumn: false, columns: ['Country'],captionTemplate: this.gridTemplate }; 
    gridTemplate(props) { 
      if(props.count ==1){ 
        return ( 
          <span>{props.key} - {props.count} item</span> 
        return ( 
          <span>{props.key} - {props.count} items</span> 
    render() { 
        return (<div className='control-pane'> 
                <div className='control-section'> 
                    <GridComponent dataSource={inventoryData} allowPaging={true} ref={grid => this.gridInstance = grid} pageSettings={{ pageCount: 5 }} allowGrouping={true} groupSettings={this.groupOptions} allowSorting={true} height="320" > 
                            <ColumnDirective field='Inventor' headerText='Inventor Name' width='180'></ColumnDirective> 
                            .   .   . 
                        <Inject services={[Page, Group, Sort]}/> 
Please contact us if you need any further assistance on this. 
Pavithra S. 

PB Pat Buchanan March 8, 2019 08:24 PM UTC

This is exactly what I needed.  Thank you!

PS Pavithra Subramaniyam Syncfusion Team March 11, 2019 04:07 AM UTC

Hi Pat,  

Thanks for your update. 

We are happy to hear that the provided information helped you. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Pavithra S. 

Live Chat Icon For mobile
Up arrow icon