1

I have defined a conditional cell template for one of the column. Its displaying the data correctly but I am not able to search for the text in the cell template. Here is my plunkr: https://plnkr.co/edit/TDX5jtPord1hkzCVaw3L?p=preview

var template1 = '<div class="">' + 
'<div class="" ng-if="COL_FIELD > 30">Greater </div> ' +
'<div class="" ng-if="COL_FIELD < 30"> Lesser </div> ' +
'</div>';

In the template I have put the condition that.. if COL_FIELD > 30 then then write Greater.. or else write Lesser. And now I should be able to search for the Greater or Lesser in Number column.

enter image description here

undefined
  • 3,464
  • 11
  • 48
  • 90
  • Where is COL_FIELD defined in the plnkr? – Taku Apr 20 '16 at 06:41
  • COL_FIELD comes with ui-grid.. this is actually the value of that column before rendering the cell template. – undefined Apr 20 '16 at 06:43
  • I added that template in the plunkr and it shows fine so I'm not understanding what your issue is. Where is the search bar? What are you expecting to see and what are you observing? – Taku Apr 20 '16 at 07:26
  • Its is displaying fine.. but search is not working in the column having custom template. For example, if I search for "greater" in number column, it is not displaying any result – undefined Apr 20 '16 at 08:24
  • You would need to update your plunkr. There is no search field in this one. – Taku Apr 20 '16 at 08:32
  • Oh..my bad..It was not saved anyhow.. I have saved it now.. can you please check now. https://plnkr.co/edit/TDX5jtPord1hkzCVaw3L?p=preview – undefined Apr 20 '16 at 08:37
  • You would need to have a custom filter to override the selection match. Have you read the docs? This may help http://stackoverflow.com/a/29378217/1615594 – Taku Apr 20 '16 at 08:48

2 Answers2

2

A solution could be to add a property on your data like :

$http.get('data.json').success(function(data) {
    data.map(function(item) {
        item.greaterLesser = item.amount > 30 ? 'Greater' : 'Lesser';
    });
    $scope.gridOptions.data = data;
});

and then instead of using the amount with a template, just bind on this property.

$scope.gridOptions = {
    enableFiltering: true,
    columnDefs: [{
      field: 'name',
      width: 70
    }, {
      field: 'greaterLesser',
      name: 'Number',
      width: 90,
    }, {
      field: 'amount',
      name: 'Currency',
      cellFilter: 'currencyFilter:this',
    }]
};

Here is the updated plunker

Edit

If you want to use the template, you could implement the search function yourself. You can add the filter option to your field and implement the condition function. Something like: 

filter: {
    condition: function(searchTerm, cellValue) {
        var value = cellValue > 30 ? 'greater' : 'lesser';
        var result = value.search(searchTerm.toLowerCase());
        return result > -1;
    }
}

Here I used the search function but you could use match or some other function. Here is a demo plunker

Lulylulu
  • 1,254
  • 8
  • 17
  • This serves the purpose for me now.. but there are few cases where I must need to define template.. because of specific styling and other things..So I wanted to search from that template. Anyway this works for me now. Will mark this answered if I dont get any more response. – undefined Apr 20 '16 at 09:37
  • This is what I was looking for. Thanks a lot. – undefined Apr 21 '16 at 06:38
0

I used the below code to make search work

field: 'EmpId', 
displayName: 'Employee Type', 
cellTemplate: '<div style="cursor:pointer"  class="ui-grid-cell-contents">{{grid.appScope.GetEmployeeType(row)}}</div>', 
filter: {
            condition: function (searchTerm, cellValue,row,column) {
            var value = $scope.GetEmployeeType(row);//same function that you use to display value in cell Template
            return (value.toLocaleLowerCase().indexOf(searchTerm.toLocaleLowerCase())>-1);
                            }
                        }
Vignesh Subramanian
  • 7,161
  • 14
  • 87
  • 150