BoldSignA modern eSignature application with affordable pricing. Sign up today for unlimited document usage!
export class Grouping extends SampleBase {
constructor() {
super(...arguments);
this.groupOptions = { showGroupedColumn: false, columns: ['Country'],
captionTemplate:'#groupTemplate'
};
}
dataBound() {
if (refresh) {
this.gridInstance.groupColumn('Country');
refresh = false;
}
}
load() {
refresh = this.refreshing;
}
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" dataBound={this.dataBound.bind(this)} load={this.load}>
<ColumnsDirective>
. . . . . . .
. . . . . . .
</ColumnsDirective>
<Inject services={[Page, Group, Sort]}/>
</GridComponent>
</div>
</div>);
}
} |
Index.html
<script id="groupTemplate" type="text/x-template">
${groupTemplate(data)}
</script>
<script type="text/javascript">
function groupTemplate(args) {
if (args.field == "Country") { //we have customize the caption only for country field
return "TOTAL of group:" + args.count + " item";
}
}
</script> |