Stop sort event on columnclicked

[LaxGulawaniParticipant]

Hi there,

I have added custom button in the column header. And on columnclicked event show JqxWindow. It works well, however grid gets sorted in background.

How to stop this sorting event when user clicks on this custom button?

In columnclicked event handler I can detect user has clicked on button by checking e.args.originalEvent.srcElement.id value.

I want to prevent default sort even, e.preventDefault() does not prevent sort.

Is there any other way to stop this sort getting triggered?

Thanks

[MartinParticipant]

Hello LaxGulawani,

You can check if the button was clicked and remove the sorting inside the sort event handler.
Here is an example with React (as your previous topic):

import * as React from 'react';

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

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

    private myGrid = React.createRef<JqxGrid>();
    private buttonClicked: boolean = false;

    constructor(props: {}) {
        super(props);
        this.onSort = this.onSort.bind(this);

        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(() => {

            document.getElementById('header-button')!.addEventListener('click', (e) => {

                /* tslint:disable:no-console */
                console.log('Opening Window');

                this.buttonClicked = true;
            });

        }, 100);

    }

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

    private onSort(e: any) {
        if (this.buttonClicked) {
            this.myGrid.current!.removesort();
            this.buttonClicked = false;
        }
    }
}

export default App;

Best Regards,
Martin

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

[Author]

Posts