jQuery UI Widgets Forums React In React JqxLisBox, Right click selects checkBox

This topic contains 3 replies, has 2 voices, and was last updated by  Martin 2 weeks, 5 days ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • ReactMahesh
    Participant

    Hi There ,

    I have created Custom filter using buildFilterPanel function. In that I have used JqxListBox options to load column values as filter options in custom filter.Issue is that when I Right click on filter options checkBox it selects the CheckBox which is not expected behavior.Can you please help me this How can we prevent this.Also I tried with handling event on Right click but in event object I am unable to get information about which click event(left or right click) is raised.Can you please provide any solutions?

    Thanks,
    Mahesh B.

    • This topic was modified 1 month, 1 week ago by  ReactMahesh.

    Martin
    Participant

    Hello Mahesh B.,

    Yes, this is the default behavior of the jqxListbox.
    What I can suggest you is to bind to the contextmenu event of the listbox items and check or uncheck them when there is a right click.
    Please, look at the following example:

    import * as React from 'react';
    
    import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
    
    class App extends React.PureComponent<{}, IListBoxProps> {
    
        private myListBox = React.createRef<JqxListBox>();
    
        constructor(props: {}) {
            super(props);
    
            this.state = {
                source: [
                    'Affogato',
                    'Americano',
                    'Bicerin',
                    'Breve',
                    'Café Bombón'
                ]
            }
        }
        public componentDidMount() {
            this.myListBox.current!.checkIndex(0);
            this.myListBox.current!.checkIndex(1);
            this.myListBox.current!.checkIndex(2);
            this.myListBox.current!.checkIndex(5);
    
            const items = document.getElementsByClassName('jqx-listitem-element');
            Array.prototype.forEach.call(items, (item: HTMLDivElement) => {
                item.addEventListener('contextmenu', (event: any) => {
                    const checked = item.children[0].getAttribute('checked');
                    const value = item.children[1].innerHTML;
    
                    if (checked === 'true') {
                       this.myListBox.current!.uncheckItem(value);
                    } else {
                       this.myListBox.current!.checkItem(value);
                    }
                });
            });
    
        }
        public render() {
            return (
                <div onContextMenu={this.contextMenu}>
                    <JqxListBox ref={this.myListBox} 
                        width={200} height={250} source={this.state.source} checkboxes={true} />
                </div>
            );
        }
    
        private contextMenu(event: any) {
            event.preventDefault();
        }
    }
    export default App;

    Best Regards,
    Martin

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


    ReactMahesh
    Participant

    Hello Martin ,

    Thanks Martin for providing solution.

    My existing code(part of code) look like as follow ,

     const contextMenu=(event: any)=>{
            event.preventDefault();
        }
    
        let listBoxFilter  = ReactDOM.render(<div onContextMenu={contextMenu}><JqxListBox  width={"100%"} height={150} displayMember="display" 
                                             valueMember="value" source={finalFilterOptions} checkboxes={true} onCheckChange={onSelection} /> 
                                             </div>,listBoxContainer);
     
        ColumnListBoxOptions.push({"datafield":datafield , "value":listBoxFilter as JqxListBox });
        
    
        let gridFilters = grid.getfilterinformation();
        let columnFilters = gridFilters.filter(o => o.datafield === datafield);
        let columnListBox = listBoxFilter as JqxListBox;
        let columnListBoxItems = columnListBox.getItems();
       

    I tried with above solution provided by you ,this gives me error for last line in the code. It does not allow to getItems() when I use ListBox inside
    <div> tag.Can you please suggest any other alternatives?

    Thanks,
    Mahesh B.

    • This reply was modified 1 month ago by  ReactMahesh.

    Martin
    Participant

    Hello Mahesh B,

    In order to invoke JqxListBox methods you should use the component’s reference.
    Please, look the this example:

    import * as React from 'react';
    import * as ReactDOM from 'react-dom';
    
    import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
    
    class App extends React.PureComponent<{}, IListBoxProps> {
    
        private myListBox = React.createRef<JqxListBox>();
    
        constructor(props: {}) {
            super(props);
    
            this.state = {
                source: [
                    'Affogato',
                    'Americano',
                    'Bicerin',
                    'Breve',
                    'Café Bombón'
                ]
            }
        }
        public componentDidMount() {
            const contextMenu = (event: any) => {
                event.preventDefault();
            }
    
            ReactDOM.render(
                <div onContextMenu={contextMenu}>
                    <JqxListBox ref={this.myListBox} width={200} height={250} source={this.state.source} checkboxes={true} />
                </div>,
                document.getElementById('container'),
                () => {
                    this.myListBox.current!.checkIndex(0);
                    this.myListBox.current!.checkIndex(1);
                    this.myListBox.current!.checkIndex(2);
                    this.myListBox.current!.checkIndex(5);
    
                    const items = document.getElementsByClassName('jqx-listitem-element');
                    Array.prototype.forEach.call(items, (item: HTMLDivElement) => {
                        item.addEventListener('contextmenu', (event: any) => {
                            const checked = item.children[0].getAttribute('checked');
                            const value = item.children[1].innerHTML;
    
                            if (checked === 'true') {
                                this.myListBox.current!.uncheckItem(value);
                            } else {
                                this.myListBox.current!.checkItem(value);
                            }
                        });
                    });
                }
            );
        }
        public render() {
            return (
                <div id="container" />
            );
        }
    }
    export default App;

    Best Regards,
    Martin

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

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

You must be logged in to reply to this topic.