Grouping captionTemplate

[Pat Buchanan]

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.

[Pavithra Subramaniyam]

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. 

 

[index.jsx] 

export class Grouping extends SampleBase { 

    constructor() { 

        super(...arguments); 

        this.groupOptions = { showGroupedColumn: false, columns: ['Country'],captionTemplate: this.gridTemplate }; 

         

    } 

    gridTemplate(props) { 

      if(props.count ==1){ 

        return ( 

          <span>{props.key} - {props.count} item</span> 

          ); 

      }else{ 

        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" > 

                        <ColumnsDirective> 

                            <ColumnDirective field='Inventor' headerText='Inventor Name' width='180'></ColumnDirective> 

                            .   .   . 

                        </ColumnsDirective> 

                        <Inject services={[Page, Group, Sort]}/> 

                    </GridComponent> 

            </div>); 

    } 

} 

 

Sample: https://stackblitz.com/edit/react-ngh8xt-fnhbva?file=index.js  

 

Please contact us if you need any further assistance on this. 

 

Regards, 

Pavithra S. 

[Pat Buchanan]

This is exactly what I needed.  Thank you!

[Pavithra Subramaniyam]

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.  

Regards,  

Pavithra S.