jQWidgets Forums

jQuery UI Widgets Forums Grid All filters of the each column references to the same object

This topic contains 3 replies, has 2 voices, and was last updated by  Ivo Zhulev 8 years, 2 months ago.

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

  • ulin
    Participant

    Hi, I have a grid react component and it works properly until i set virtualmode={true}.
    After that I can’t use filter in column’s submenu.
    1) buttons ‘Filter’ or ‘clear filter’ are not working;
    2) value of the filter input field is the same for all columns. E.g.: in column ‘Names’ you type ‘John’. Nothing happens. So you switch to any other column, say ‘Date’, open filter menu, and see ‘John’ is already typed in it’s filter input field. Looks like all input fields refers to the same object.
    Here is my code:

    class GridWrapper extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                origin: 'apple'
            }
        }
    componentDidMount() {
            //To read DOM ref just once
            if (this.props.showOriginTabs) {
                this.setState({grid: {apple: this.refs.appleGrid, berry: this.refs.berryGrid}});
            } else {
                this.setState({grid: { single: this.refs.singleGrid}});
            }
        }
      initGrid(origin) {
            const source = {
                datafields: [
                    { name: 'id', type: 'string' },
                    { name: 'name', type: 'string' },
                    { name: 'service_tier', type: 'string' },
                ],
                datatype: 'json',
                url: baseUrl + '/groups/',
                cache: false,
                root: 'results',
                beforeprocessing: (data) => { source.totalrecords  = data.total_records},
            };
            const columns = [
                { text: 'Name',
                    datafield: 'name',
                    initwidget: (row, column, value, htmlElement) => {},
                    createwidget: createServiceGroupListCell
                },
                { text: 'Service Tier', datafield: 'service_tier', width: 200, filterable: false},
            ];
    
            source.sort = () => {this.state.grid[origin].updatebounddata('sort')}; 
            source.filter= () => {this.state.grid[origin].updatebounddata('filter')};
            let dataAdapter = new $.jqx.dataAdapter(source);
            return {
                ref: origin+'Grid',
                id: origin+'Jqxgrid',
                source: dataAdapter,
                width: '100%',
                autoheight: true,
                pageable: true,
                enablehover: true,
                pagesizeoptions: ['50', '100', '500', '1000'],
                pagesize: 50,
                sortable: true,
                columnsresize: true,
                selectionmode: 'checkbox',
                groupable: true,
                filterable: true,
                columns:columns,
                autoshowfiltericon: true,
                showdefaultloadelement:false,
                virtualmode: true,
                rendergridrows: function (params) {
                    return dataAdapter.records;
                },
            };
        }
    render() {
        return <JqxGrid {...this.initGrid('apple')}/>
    }
    

    Please help me to get what is the problem.
    Thank you.


    Ivo Zhulev
    Participant

    Hi ulin,

    This is normal behavior. In order to filter items when virtualmode is enabled, you must do it serverside.

    Best Regards,
    Ivo

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


    ulin
    Participant

    Hi Ivo. Not sure it is normal, as I could not start any filtering at all. But now I’ve some idea – filter menu is blocked because filter’s id is not the same as Grid’s id, because of the wrong Grid’s initialization. If React’s render() method happens twice it reinitialize grid, so it gets another id and filter menu looses connection with it.
    But when I prevent render() method, everything works fine in virtual false/true modes both.
    Why it happens?


    Ivo Zhulev
    Participant

    Hi ulin,

    Can you please make and example of this?

    Best Regards,
    Ivo

    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.