Customize Column header

[LaxGulawaniParticipant]

Hi there,

I would like to customize column header to show customized info in div below column header on click of a button added to the column header using renderer method of the column.

However this Div does not appear as overlay on rows below, it gets hidden behind those rows. even after adding large zindex it does not show as overlay.

any suggestions are greatly appreciated.

Thanks

[MartinParticipant]

Hello LaxGulawani,

How do you create the div with the info?
You can check the following example, using ReactDOM.render():

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';

class App extends React.PureComponent<{}, IGridProps> {

    constructor(props: {}) {
        super(props);

        const source: any =
        {
            datafields: [
                { name: 'name', type: 'string' },
                { name: 'type', type: 'string' },
                { name: 'calories', type: 'int' },
                { name: 'totalfat', type: 'string' },
                { name: 'protein', type: 'string' }
            ],
            datatype: 'json',
            id: 'id',
            url: './assets/sampledata/beverages.txt'
        };

        this.state = {
            columns: [
                {
                    datafield: 'name',
                    renderer(columnHeaderElement) {
                        return '<button id="header-button">Button</button>'
                    },
                    text: 'Name', width: 250
                },
                { text: 'Beverage Type', datafield: 'type', width: 250 },
                { text: 'Calories', datafield: 'calories', width: 180 },
                { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                { text: 'Protein', datafield: 'protein', minwidth: 120 }
            ],
            source: new jqx.dataAdapter(source)
        }
    }

    public componentDidMount() {
        setTimeout(() => {

            const element = (
                <div style={{ border: '2px solid black', backgroundColor: 'lightblue'}}>
                    <h2>Info</h2>
                </div>
            );
            document.getElementById('header-button')!.addEventListener('click', () => {
                ReactDOM.render(element, document.getElementById('info'));
            });

        }, 100);
        
    }

    public render() {
        return (
            <div>
                <JqxGrid
                    width={800} source={this.state.source} columns={this.state.columns} columnsresize={true} />
                <div style={{ position: 'absolute', top: 30, zIndex: 9999 }} id={'info'} />
            </div>
        );
    }
}

export default App;

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts