Angular ui grid custom filter not showing for more than 10 columns

Question

I am using angular grid. I implemented custom dropdown filter on two columns by following this article and I have totally 11 columns. If I add the 11th column then filter is not showing up for one of the column but all 11 columns are displayed properly. If I remove the 11th column then filter dropdown is showing up for both the columns.

Any work around??

I am already using

app.js:

angular.module('myapp', ['ngAnimate', 'ngResource', 'ngTouch', 'ui', 'ui.bootstrap',
'ui.grid', 'ui.grid.grouping', 'ui.grid.autoResize', 'ui.grid.resizeColumns']);

index.html:

<div  id="grid1" ui-grid="gridOptions"
                             class="grid" ui-grid-resize-columns ui-grid-grouping ui-grid-auto-resize></div>

and in my HTML as well. thats why all columns are displayed correctly for more than 10

This is not duplicate of this

Answer 1

1. This issue occurs in ui-grid after applying any functions,eg filter update,updating the values,editing or delete. ie its occurs while reloading the grid with updated values.

2. If you watch close,the Data inside the gird get changed but the paginations and its pageLimit still not updated.

3. So,after applying the filter the limit needs to set again and the paginations too.

eg

the below function you call for gird ,before or after custom filter.

var limit = 10 // your page limit 
 var pageNo = 1// default pageno on first load
 $scope.gridLists(pgNo,pgLimit){
  pageNo = (pgNo) ? pgNo : pageNo;
  limit =(pgLimit)? pgLimit : limit
   ----your--code----
   $scope.gridOptions.paginationCurrentPage = pageNo;
   $scope.gridOptions.paginationPageSize = parseInt(limit);

}

your filter applyfunction be

$scope.applyFilter(){
      --your changes---
      $scope.gridLists(1,10);
}