Kendo UI Grid React customize header

Question

I updated my data grid from Kendo UI React Wrappers to new React package @progress/kendo-react-grid 0.3.0. In old jQuery grid version (or wrapped into React components) I was able to manipulate grid header (e.g.: set columnMenu filterable to false) or to define headerTemplate.

Documentation of new package does not mention anything about this. In package source files I found directory header which contains files GridFilterRow.js, GridHeader.js, GridHeaderRow.js, but there is no way (or, I didn't found it) to customize these components.

I wonder if there is any way to customize grid header in new rewritten version of Kendo UI Grid for React?

Answer 1

The FilterRow of the grid is not customizable in the 0.3.0 version, and this is why it is not mentioned in the documentation.

There is an issue logged in the official kendo-react repository about this: Make Grid Filter Cells more customizable

For the current version, the filterable and filter settings can be controlled using the columns settings per each column. And there is property headerClassName that you can use for styling the cells.

Column/filter menu is not in the roadmap for now, but you can vote for it in the official feedback portal.

Answer 2

You can modify the header manually, using by adding an HTML element using Java Script after the grid renders, not a pretty solution but it will do the work while waiting for the official solution.

Here is what I did:

class Table extends React.Component {
  constructor(props) {
    super(props);
    this.gridRef = React.createRef();
  }

    render() {

        return (
          <div ref={this.gridRef} >
            <Grid 
                data={data} 
                onItemChange={itemChange}
                cellRender={cellRender}
                rowRender={rowRender} 
                editField="inEdit"
            >
                <GridToolbar> 
                </GridToolbar>

                <Column title="Column Name" field="ProductName"  width={300}  locked={true}/>
                <Column field="ProductID" title="Id"  editable={false} />
                <Column title="Units In Stock" editor="numeric" field="UnitsInStock" />
                <Column title="First Ordered" editor="date" format="{0:d}"  field="FirstOrderedOn" />
                <Column editor="boolean" field="Discontinued" />
                <Column title="Units In Stock" editor="numeric" field="UnitsInStock" />
                <Column title="First Ordered" editor="date" format="{0:d}"  field="FirstOrderedOn" />
                <Column editor="boolean" field="Discontinued" />
            </Grid>
          </div>
        );
    }

    componentDidMount(){
       var ths = this.gridRef.current.getElementsByTagName('th');

      for(var i = 0; i < ths.length; i++){
        ths[i].appendChild( this.createColumnMenuIcon() );
      }
   }

createColumnMenuIcon(){
  var icon = document.createElement('i');
  icon.classList.add('fa');
  icon.classList.add('fa-chevron-down');
  icon.setAttribute("style", "position: absolute;top: 12px;right: 10px;");

  icon.addEventListener('click', function(){
    console.log('Click Menu');
  })

  return icon;
}

}

export default Table