jQuery UI Widgets Forums Grid Stop sort event on columnclicked

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Stop sort event on columnclicked #104006

    LaxGulawani
    Participant

    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

    Stop sort event on columnclicked #104079

    Martin
    Participant

    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/

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

You must be logged in to reply to this topic.