How to implement filtering for each column in ngx swimlane ?

[sagar-sk15]

I have added multi-select drop down under table headers which contains the Distinct values within that column as shown below Image, but not able to select that values(client side event is not getting triggered):

Is there any other way to achieve this feature. Any working example ?

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior Currently I have added the multi-select drop down control under headers, but i am not able to select any values in that multi-select drop-down. It is acting like a disabled control

Expected behavior It should select values in dropdown control and accordingly filter the data in grid.

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment: Local

• Table version: 0.8.x 11.3.2

• Angular version: 2.0.x Angular 4

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[hosseinGanjyar]

Have you found any solution?

[sagarsk15]

@hosseinGanjyar Nope, I have replaced multi-select drop- down with normal drop-down and its working in Chrome as of now (not in edge browser)

[hosseinGanjyar]

If you are using of textbox, so read this: https://github.com/swimlane/ngx-datatable/issues/1455

[adarsha17]

Hi Sagar, I believe you are using ngx-datatable. Could you please share this filtering code with me. I have a similar requirement for applying filters in the table

[sagar-sk15]

@adarsha17 I have achieved this functionality by using text-box control. As i stated in the problem, if i use drop-down control then i was not able to select the values in it, so as a work around i have used textboxes where can type free text for filtering.

[adarsha17]

Thanks Sagar! so you mean to say you used only a single text box(placed above the grid)that would accept any free text and would filter on any of the columns?

[sagar-sk15]

@adarsha17 No, what i mean is. I have kept radio button to let user select if he wants multifilter or single filter, if user selectes multifilter then text-boxes will appear below the each header of the grid. PFB

[adarsha17]

Thanks sagar for the clarification. Is it possible could you share the sample code?

[hirenkukadiya]

<ngx-datatable-column name="Task" [width]="180"> 
 <ng-template let-column="column" ngx-datatable-header-template>
    {{column.name}}
  <input type="text" class="managetextfilter" placeholder="Type to filter"(keyup)="updateFilter($event,'name')"/> 
 </ng-template>
  <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="rows">
    <span title="Double click to edit"  (dblclick)="editing[rowIndex + '-task'] = true" *ngIf="!editing[rowIndex + '-task']">{{value}}</span>
  </ng-template>
</ngx-datatable-column>