ng-grid headerCellTemplate for Filtering

Question

For using the filtering of ng-grid, I mean column wise ng-grid I looked at this plunker as an example which works fine - http://plnkr.co/edit/c8mHmAXattallFRzXSaG?p=preview. However when I try to make my own example of column filtering and I use the var as per ng-grid documentation

var myHeaderCellTemplate = '<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{cursor: col.cursor}" ng-class="{ ngSorted: !noSortVisible }">'+
                           '<div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText">{{col.displayName}}</div>'+
                           '<div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>'+
                           '<div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>'+
                           '<div class="ngSortPriority">{{col.sortPriority}}</div>'+
                         '</div>'+
                         '<div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>';

I keep getting a syntax error at the colt. Can someone please let me know what's going on here?

allyusd allyusd · Accepted Answer · 2014-08-15T15:11:37

Your template string include '

'<div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText">{{col.displayName}}</div>'+

you need use \, like this

'<div ng-click="col.sort($event)" ng-class="\'colt\' + col.index" class="ngHeaderText">{{col.displayName}}</div>'+

Edit:

If need filter box, you miss this

<input type="text" ng-click="stopClickProp($event)" placeholder="Filter..." ng-model="col.filterText" ng-style="{ \'width\' : col.width - 14 + \'px\' }" style="position: absolute; top: 30px; bottom: 30px; left: 0; bottom:0;"/>

This is example

Plunker

Edit:

The original plunkr is design filtering from the beginning characters. If you went to filtering from the substring, you can try * begin filter textbox.

If you don't like it, you can modify filterBarPlugin function :

var filterText = (col.filterText.indexOf('*') == 0 ? col.filterText.replace('*', '') : "^" + col.filterText) + ";";
searchQuery += col.displayName + ": " + filterText;

To

searchQuery += col.displayName + ": " + col.filterText;

Example

ng-grid headerCellTemplate for Filtering

1 Answers