Live DemoGitHub

Single Search Filter

Index

Description

Some users might want to have 1 main single search for filtering the grid data instead of using multiple column filters. You can see a demo of that below

Demo

Demo Page / Demo Component

Code Sample

View

  <form class="form-inline">
    <div class="form-group">
      <label>
        Single Search:<br>
      </label>
      <select value.bind="selectedColumn"
              class="form-control">
        <option repeat.for="column of columnDefinitions"
                model.bind="column">
          ${column.name}
        </option>
      </select>
    </div>
    <select value.bind="selectedOperator"
            class="form-control">
      <option repeat.for="operator of operatorList"
              model.bind="operator">
        ${operator}
      </option>
    </select>
    <input type="text"
           class="form-control"
           placeholder="search value"
           value.bind="searchValue">
  </form>

<aurelia-slickgrid grid-id="grid21"
                   column-definitions.bind="columnDefinitions"
                   grid-options.bind="gridOptions"
                   dataset.bind="dataset"
                   on-aurelia-grid-created.trigger="aureliaGridReady($event.detail)">
</aurelia-slickgrid>

ViewModel

export class MyExample {
  @bindable() selectedColumn: Column;
  @bindable() selectedOperator: string;
  @bindable() searchValue: string;

  aureliaGrid: AureliaGridInstance;
  grid: SlickGrid;
  dataView: SlickDataView;
  columnDefinitions: Column[];
  gridOptions: GridOption;
  dataset: any[];
  operatorList: OperatorString[] = ['=', '<', '<=', '>', '>=', '<>'];

  aureliaGridReady(aureliaGrid: AureliaGridInstance) {
    this.aureliaGrid = aureliaGrid;
  }

  //
  // -- if any of the Search form input changes, we'll call the updateFilter() method
  //

  selectedOperatorChanged() {
    this.updateFilter();
  }

  selectedColumnChanged() {
    this.updateFilter();
  }

  searchValueChanged() {
    this.updateFilter();
  }

  updateFilter() {
    const fieldName = this.selectedColumn.field;
    const filter = {};
    const filterArg: FilterCallbackArg = {
      columnDef: this.selectedColumn,
      operator: this.selectedOperator as OperatorString, // or fix one yourself like '='
      searchTerms: [this.searchValue || '']
    };

    if (this.searchValue) {
      // pass a columnFilter object as an object which it's property name must be a column field name (e.g.: 'duration': {...} )
      filter[fieldName] = filterArg;
    }

    this.aureliaGrid.dataView.setFilterArgs({
      columnFilters: filter,
      grid: this.aureliaGrid.slickGrid
    });
    this.aureliaGrid.dataView.refresh();
  }

Sample

Last updated