jQuery UI Widgets Forums React Customize Column header

This topic contains 1 reply, has 2 voices, and was last updated by  Martin 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Customize Column header #103927

    LaxGulawani
    Participant

    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

    Customize Column header #104049

    Martin
    Participant

    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.