Filter Applied But Not Visible

Posted by: paulr on 4 June 2021, 7:54 am EST

  • Posted 4 June 2021, 7:54 am EST

    Hi Wijmo Team,

    I am using FlexGrid with ODataCollectionView in React with server side filtering.

    When I create the FlexGrid component and apply a filter manually, the icon shows up as orange because I'm using the following styling. This is working as expected.

    .wj-cell.wj-filter-on .wj-glyph-filter {
    cursor: pointer;
    color: #ff8754;
    margin: 3px;
    }




    The issue is when I create the FlexGrid and apply a saved filterDefinition. The filter is applied correctly (OData call contains the filter correctly) but the icon does not show up as orange and the filter is not visible when I click the filter button:



    Am I doing something wrong?

    Thank you,
    Paul
  • Replied 7 June 2021, 3:09 pm EST

    Hi Paul,

    I am afraid I was unable to replicate your issue at my end. Please refer to the sample link below that I used to replicate your issue:

    https://stackblitz.com/edit/angular-7bxz4n

    Can you let me know whether I am missing something?

    Feel free to modify the above sample accordingly so that it may replicate your issue.

    Regards,
    Ashwin
  • Replied 11 June 2021, 12:43 am EST

    Hi Ashwin,

    Please see attached example.

    Grid_Data-binding_ODataAPI_React.zip

    I'm using React with OData grid. Notice how in this example, the filter is not restored correctly.

    import 'bootstrap.css';
    import '@grapecity/wijmo.styles/wijmo.css';
    import './app.css';
    //
    import * as React from 'react';
    import * as ReactDOM from 'react-dom';
    import * as wjGrid from '@grapecity/wijmo.react.grid';
    import { ODataCollectionView } from '@grapecity/wijmo.odata';
    import * as wjFilter from '@grapecity/wijmo.react.grid.filter';
    class App extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
    customers: new ODataCollectionView("https://services.odata.org/Northwind/Northwind.svc", "Customers", {
    sortOnServer: true,
    filterOnServer: true
    }),
    itemCount: ""
    };
    }
    filterChanged(filter) {
    localStorage['filterDefinition'] = filter.filterDefinition;
    console.log("Saving filter: " + filter.filterDefinition);
    }
    render() {
    return (<div className="container-fluid">
    <p>{this.state.itemCount}</p>
    <wjGrid.FlexGrid itemsSource={this.state.customers} isReadOnly={true} initialized={this.flexInitialized.bind(this)}>
    <wjFilter.FlexGridFilter filterChanged={this.filterChanged} filterDefinition={localStorage['filterDefinition']}/>
    </wjGrid.FlexGrid>
    </div>);
    }
    flexInitialized(flexgrid) {
    console.log("Restoring filter: " + localStorage['filterDefinition']);
    flexgrid.loadedRows.addHandler(() => {
    this.setState({
    itemCount: flexgrid.rows.length + " items"
    });
    });
    }
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  • Replied 14 June 2021, 9:28 pm EST

    Hi Paul,

    I am sorry for the delay in response. Directly setting filterDefinition will not work. You will need to use the loaded event of the ODataCollectionView. Please refer to the sample attached for reference.

    ~regards

    updated filter.zip
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels