This is a migrated thread and some comments may be shown as answers.

Can we customize the group header in React Grid

1 Answer 715 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

1 Answer, 1 is accepted

answered on 07 Sep 2018, 06:38 AM

Hello, Zhichao,

Currently, if the header has to be modified the changes has to be applied on a data level.

There is a discussion on this and at the end, there is a code demonstrating how to recursively access the groupHeaders in order to modify them:

https://github.com/telerik/kendo-react/issues/53

Also, the aggregates can be shown in the header using the headerCell renderer:

https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnProps/#toc-headercell

The code may look like this:

class CustomHeaderCell extends React.Component {

render() {

const aggregates = aggregateBy(products, [{field:"UnitPrice", aggregate: "average"}, {field:"UnitsInStock", aggregate: "sum"}])

const aggregate = this.props.field === "UnitPrice" ? aggregates.UnitPrice.average : aggregates.UnitsInStock.sum

return (

<a className="k-link" onClick={this.props.onClick}>

{this.props.title}

 

{this.props.field === "UnitPrice" ? "Average Price" : "Total Units" }: 

{this.props.field === "UnitPrice" ? formatNumber(aggregate, "c"): aggregate } 

{this.props.children}

</a>

);

}

I hope this is helpful.

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

Can we customize the group header in React Grid

1 Answer, 1 is accepted