Wijmo filter : Apply button is getting disabled if exact match is not written o

Wijmo filter : Apply button is getting disabled if exact match is not written o

Posted by: nilesh_nichal on 26 June 2023, 7:12 pm EST

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 26 June 2023, 7:12 pm EST - Updated 26 June 2023, 7:18 pm EST

  Hi Team,

  Recently we have updated the wijmo from “version”: "5.20193.637“to “5.20231.888”, in the filter(FlexGridFilter) : Apply button is getting disabled if exact match is not written on search input.
  
  We want to make the Apply button as enable, but we are getting the button as disabled.
  
  Please give solution in Angular/Typescript and attaching the screenshot for the reference.
  
  

  

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 27 June 2023, 5:30 pm EST

  Hi Nilesh,

  This is the expected behavior for the FlexGrid Filter as observed in the latest Wijmo version, i.e. 5.20231.888. If you want to retain the previous behavior, i.e. to make the Apply button stay enabled when a match to the search string is not found, then you’ll have to handle the ‘filterChanging’ event of the flexGrid filter and set the ‘canApply’ property of the ValueFilterEditor to true, manually.

  You can refer to the following code snippet -

  filterChanging(filter: wjGridFilter.FlexGridFilter, e: any) {
          let valueFilterEditor: any = wjCore.Control.getControl(filter.activeEditor.hostElement.querySelector('.wj-valuefilter-editor'));
          if (valueFilterEditor) {
              valueFilterEditor.canApply = true;
              valueFilterEditor.canApplyChanged.addHandler((s: wjGridFilter.ValueFilterEditor, e: any) => {
                  s.canApply = true;
              })
          }
      } 

  You can also refer to the following sample demonstrating the same - https://jscodemine.grapecity.com/share/O6FxnBt7EkKgYjS_i-HaSg

  Regards

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 27 June 2023, 11:53 pm EST

  Hi Vivek,
  
  I have tried above method, and it is not working in my case, to make the apply button stay enabled when a match to the search string is not found, I am not sure were to set the ‘canApply’ property of the ValueFilterEditor to true? please find the below code which we are using.

  HTML:

  <div class="container-fluid">
      <wj-flex-grid #flex
          [alternatingRowStep]="0"
          [(itemsSource)]="data">
          <wj-flex-grid-filter (initialized)="initFilter(filter)" #filter></wj-flex-grid-filter>
      </wj-flex-grid>
  </div>

  TS File

    public initFilter(filter): void {
      this.tempFilter = filter;
      this.tempFilter.filterChanging.removeHandler();
  
      this.tempFilter.filterChanging.addHandler((s, e) => {
        this.activeEditor = s.activeEditor;
        let cf = filter.getColumnFilter(e.col);
        const columnIndex = e.col;
        const isGridEmpty: boolean = this._dataCollection
          ? this._dataCollection._originalDataSource.length == 0
          : false;
  
        this.activeEditor.buttonClicked.addHandler((_a) => {
          const btn = wjcCore.getActiveElement();
          const btnType = btn.getAttribute('wj-part');
          if (btnType && btnType == 'btn-apply') {
            // below line overwrites the value of applied filter(which is converted into lower case) with the original value
            cf.valueFilter.filterText = s.activeEditor._edtVal._cmbFilter.text;
          }
          const filterDef = filter.filterDefinition;
          const filters = JSON.parse(filterDef).filters;
          if (filters.length > 0) {
            this.filterIcon = false;
          }
          if (filters.length === 0) {
            this.filterIcon = true;
          }
          // below check is to handle the clear button event of filter when the grid is empty
          if (
            btnType &&
            btnType === 'btn-clear' &&
            isGridEmpty &&
            this._getValueFilterText(cf.valueFilter)
          ) {
            this._setValueFilterText(cf.valueFilter);
            let filterDefObj = JSON.parse(
              filter.grid.columns[columnIndex].collectionView.filterDefinition
            );
            filterDefObj.filterParams = filterDefObj.filterParams.filter(
              (m) => !(m.attrPath == s.grid.columns[columnIndex].name)
            );
            // modifying the filter definition, calls updateFilterDefinition method from serverCollectionView
            filter.grid.columns[columnIndex].collectionView.filterDefinition =
              JSON.stringify(filterDefObj);
          }
        });
      });
    }

  Please have a look on it.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 29 June 2023, 6:08 pm EST

  Hi Nilesh,

  It seems you are handling the ‘initialized’ event of the FlexGridFilter and adding an event listener to the ‘filterChanging’ event inside the ‘initFilter’ method. Now, either you can add another event listener to the ‘filterChanging’ event by updating the FlexGridFilter line in your ‘component.html’ file like this -

   <wj-flex-grid-filter (initialized)="initFilter(filter)" (filterChanging)="filterChanging(filter, $event)" #filter></wj-flex-grid-filter> 

  and inserting the following method in your ‘component.ts’ file -

   filterChanging(filter: wjGridFilter.FlexGridFilter, e: any) {
          let valueFilterEditor: any = wjCore.Control.getControl(filter.activeEditor.hostElement.querySelector('.wj-valuefilter-editor'));
          if (valueFilterEditor) {
              valueFilterEditor.canApply = true;
              valueFilterEditor.canApplyChanged.addHandler((s: wjGridFilter.ValueFilterEditor, e: any) => {
                  s.canApply = true;
              })
          }
      } 

  OR

  You can also insert the same code in the ‘filterChanging’ event that you’ve handled in the initFilter method. You can refer to the following sample for the same which is updated according to your implementation - https://jscodemine.grapecity.com/share/wF9ETIL6m0OxmZO0sDpetg

  In case, you still face any issues, please let us know.

  Regards