Filter Applied But Not Visible

Filter Applied But Not Visible

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

• 

  paulr

  • Post Options:
  • Link
    Copy

  Posted 4 June 2021, 7:54 am EST - Updated 3 October 2022, 4:37 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:

  

  692×368 23.6 KB

  Am I doing something wrong?

  Thank you,
  
  Paul

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  paulr

  • Post Options:
  • Link
    Copy

  Posted 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"));
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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