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

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

Viewing 6 posts - 1 through 6 (of 6 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 4 months 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 4 months 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/


    ReactMahesh
    Participant

    Hi There,

    I wanted to show subtotal of each number type column after applying grouping to grid.I want to show subtotal column in the same column.
    I tried using group renderer but not able to get sum of column group wise also not able to set text as group “subtotal column1_sum1 column2_sum2”.
    Can you please provide any reference to get this.

    Thanks,
    MaheshB.


    Martin
    Participant

    Hello MaheshB.,

    Please, take a look at the following example:

    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>();
    
        constructor(props: {}) {
            super(props);
    
            const source: any = {
                datatype: 'array',
                localdata: this.generateData()
            };
            this.state = {
                columns: [
                    { datafield: 'firstname', text: 'First Name', width: 100 }, 
                    { cellsalign: 'right', datafield: 'quantity', text: 'Quantity', width: 80 }, 
                    { cellsalign: 'right', cellsformat: 'c2', datafield: 'price', text: 'Unit Price', width: 90 }, 
                    { cellsalign: 'right', cellsformat: 'c2', datafield: 'total', text: 'Total', width: 120 },
                    { cellsalign: 'right', cellsformat: 'c2', datafield: 'total2', text: 'Total 2', width: 120 },
                    { cellsalign: 'right', cellsformat: 'c2', datafield: 'total3', text: 'Total 3', width: 120 }
                ],
                groupsrenderer: (text, group, expanded, data) => {            
                    /* tslint:disable:no-string-literal */
                    const subItems: number = data!['subItems'].length;
                    let totalSum = 0;
                    let total2Sum = 0;
                    let total3Sum = 0;
    
                    data!['subItems'].forEach((element: any) => {
                        /* tslint:disable:no-console */
                        console.log(element);
                        totalSum += element.total;
                        total2Sum += element.total2;
                        total3Sum += element.total3;
                    });
    
                    return '<div class="jqx-grid-groups-row" style="position: relative;"><span>' + text + '</span>' + '<span> (' + subItems + ')' + '</span><span style="position: absolute; right: 248px">Total: $' + totalSum.toFixed(2) + '</span><span style="position: absolute; right: 128px">Total: $' + total2Sum.toFixed(2) + '</span><span style="position: absolute; right: 8px">Total: $' + total3Sum.toFixed(2) + '</span></div>';
                },
                source: new jqx.dataAdapter(source)
            }
        }
        public render() {
            return (
                <div>
                    <JqxGrid ref={this.myGrid}      
                        width={663} groupable={true} columns={this.state.columns}
                        source={this.state.source} groups={['firstname']} groupsrenderer={this.state.groupsrenderer} />
                </div>
            );
        }
    
        private generateData() {
            const data = new Array();
            const firstNames = [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];
    
            const productNames = [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];
            const priceValues = [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];
            for (let i = 0; i < 10; i++) {
                const row: any = {};
                const productindex = Math.floor(Math.random() * productNames.length);
                const price = parseFloat(priceValues[productindex]);
                const quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
    
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                row["total2"] = price * quantity;
                row["total3"] = price * quantity;
                data[i] = row;
            }
    
            return data;
        }
    }
    export default App;

    Best Regards,
    Martin

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

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

You must be logged in to reply to this topic.