jQWidgets Forums
jQuery UI Widgets › Forums › Grid › All filters of the each column references to the same object
Tagged: grid column's filter react
This topic contains 3 replies, has 2 voices, and was last updated by Ivo Zhulev 8 years, 2 months ago.
-
Author
-
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.Hi ulin,
This is normal behavior. In order to filter items when
virtualmode
is enabled, you must do it serverside.Best Regards,
IvojQWidgets Team
http://www.jqwidgets.com/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?Hi ulin,
Can you please make and example of this?
Best Regards,
IvojQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.