CODEWITHSUNDEEP
angularjsfilterui-grid
Sridhar
Sridhar

Reputation: 1962

ui grid Filter and sorting not working when cellTemplate used

I am using ui.grid where some of the columns are populated with cellTemplate. It populates the value correctly, but the sorting and filtering is not working. Do I need to do anything with the sorting/filtering logic ?

Issue is recreated @ Plnkr http://plnkr.co/edit/JscrG3EJiTlnVa0t9DjH , both Age and Balance columns sorting and filtering is not working.

 this.grdColDefs = [
            {
                name: 'Age',
                width: 90,
                cellTemplate: '<div class="ui-grid-cell-contents">{{grid.appScope.calcAge(row.entity)}}</div>',
                headerCellClass: 'my-cell-header',
            }
        ];

Upvotes: 2

Views: 3343

Answers (2)

Sridhar
Sridhar

Reputation: 1962

Issue resolved when I use field to point to the model.

Upvotes: 2

Vicky Kumar
Vicky Kumar

Reputation: 1418

Problem is in making data for cell template I will share you two code pens one with working filter one without working filter and will try to explain difference in both why at one place it is working and why at other it is not working

When we make cell template like this as in your case 

 cellTemplate: '<div class="ui-grid-cell-contents">{{grid.appScope.calcAge(row.entity)}}</div>',

In this case filter will not work because whatever is displayed in grid is different from what is actually present in row.entity

looking at your problem statement i mocked a sample grid where filter is not working http://codepen.io/vkvicky-vasudev/pen/zKmVVO

if we want to make our grid using this implementation still filter should work then we can change filter logic like this

 $scope.singleFilter = function( renderableRows ){
 var matcher = new RegExp($scope.filterValue);
 renderableRows.forEach( function( row ) {
  var match = false;
  ['name','age'].forEach(function( field ){
    if ( row.entity[field].match(matcher) ){
      match = true;
    }
    if(field =='age'){
     //this is new if block to handle the case for filtering not working
       var currData =$scope.calcAge(row.entity)
       if (currData.match(matcher) ){
      match = true;
    }
       }
  });
  if ( !match ){
    row.visible = false;
  }
});
return renderableRows;
 };

To fix this issue

What i did is whatever you want to display in grid same data should be present in your gridOptions.data array so before building grid make gridOptions.data as you need here is working demo where filter is working http://codepen.io/vkvicky-vasudev/pen/rrqgzy

Now please observe the difference in both case

New cell template is this

 cellTemplate: '<div class="ui-grid-cell-contents">{{row.entity.age}}</div>',
            headerCellClass: 'my-cell-header'

In this case whatever is visible in grid is same as our data in gridOptions.data

I tried to understand your problem and explain it in best possible way even if you have any question feel free to ask, i have made change in custom filter similarly we can make custom sorting work

Upvotes: 1

Related Questions