angularjsangular-ui-gridcelltemplate

Search text from cell template not working in ui-grid


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


Solution

  • 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