CODEWITHSUNDEEP
angularag-grid
Ayesha Khan
Ayesha Khan

Reputation: 125

[ag-grid]: Free text filter/ search bar above the grid

I am new to angular so please accept my apologies if its basic question. I have a grid defined and it is getting row data from the database. I am trying to place a search bar above the grid to apply an additional free text filter on it. The grid already has column filters on it. Any help would be really appreciated. I am using Here is my code

<input class"search" placeholder="Search..." type="text" ng-model="search-model" ng-change="$ctrl.onFilterChanged(this.search)"/>


onFilterChanged(value){
   this.gridOptions.api.setQuickFilter(value);
  }

I have also looked into the external filter but I am not able to implement it as a free text. I am really struggling with it. Please help me out. Thank you so much.

Upvotes: 0

Views: 4398

Answers (2)

Ayesha Khan
Ayesha Khan

Reputation: 125

Following is my final working solution:

In the controller, in colDef add a field getQuickFilterText:<some data renderer function>

Call it from your HTML: 

<input type="text" ng-model="$ctrl.gridOptions.quickFilterText" placeholder="Type text to filter..." class="toolbarFilterTextBox"

Upvotes: 0

Ayesha Khan
Ayesha Khan

Reputation: 125

the ng-model that is wrong. The correct value is:

<input class"search" placeholder="Search..." type="text" ng-model="search" ng-change="$ctrl.onFilterChanged(this.search)"/>

Upvotes: 1

Related Questions