Angular ui-grid custom filter not working on multiple grids

Question

I have two grids on the same page and the data is flowing into two separate tabs. This functionality works fine with no issue.

My problem is that the custom sorting and filtering seems to be bubbling and I can only get the filtering and sorting to work on one grid and not the other.

Below are my two sortListener functions

    var sortListener = function( grid, sortColumns ) {
      console.log('sort');
      var page = $scope.gridApi.pagination.getPage();
      var pageSize = $scope.gridOptions1.paginationPageSize;
      var url = getGridPageUrl(page, pageSize);
      var columns = $scope.gridApi.grid.columns;
      var payload = getGridPagePayload(sortColumns, columns);
      sendGridPageRequest(url, payload);
    };

    var sortSiteListener = function(grid, sortColumns) {
      console.log('sortOnSiteListener');
      var page      = $scope.gridApi.pagination.getPage();
      var pageSize  = $scope.gridOptions12.paginationPageSize;
      var urlOnSite = getOnSiteGridPageUrl(page, pageSize);
      var columns   = $scope.gridApi.grid.columns;
      var payloadOnSite   = getGridPagePayload(sortColumns, columns);
      sendOnSiteGridPageRequest(urlOnSite, payloadOnSite);
    };

Jade

tabset(ng-if="dataConstant.item.location_type !== 'On-Site Depot'")
    tab(heading="Audit Grid", select="tabShown = !tabShown", desselect="tabShown = !tabShown")
      div(ui-grid-auto-resize, id="grid1", ui-grid="gridOptions1", ui-grid-pagination, ui-grid-edit, ui-grid-row-edit, class="auditGrid")
    tab(heading="On Site Depot Parts", select="tabShown = !tabShown", desselect="tabShown = !tabShown")
      div(ui-grid-auto-resize, id="grid12", ui-grid="gridOptions12", ui-grid-pagination, ui-grid-edit, ui-grid-row-edit, class="auditGrid")

They are fired in the onRegisterApi for $scope.gridOptions1 and $scope.gridOptions12.

When calling the functions in $scope.gridOptions1 everything works as it should for sortListener but sortOnSiteListener fires as well.

I can't seem to figure out why this is bubbling.

Where are the tables HTML and the grid binding? It sounds like a binding problem. — Paulo Pedroso
– Paulo Pedroso, Commented Oct 8, 2015 at 18:59

CMR · Accepted Answer · 2015-10-09 13:50:06Z

You may not pass the same filterfunction-reference into your different gridOptions.

If you got something like:

var genderFilter = { someFilter }; // mistake

var gridOptions1 = {
  data: ...,
  columnDefs: [
  { field: 'foo', filter: genderFilter },
  ...
};

var gridOptions12 = {
  data: ...,
  columnDefs: [
  { field: 'foo', filter: genderFilter },
  ...
};

Instead use a new function for every Grid.

var genderFilter1 = { someFilter };
var genderFilter2 = { someFilter };

var gridOptions1 = {
  data: ...,
  columnDefs: [
  { field: 'foo', filter: genderFilter1 },
  ...
};

var gridOptions12 = {
  data: ...,
  columnDefs: [
  { field: 'foo', filter: genderFilter2 },
  ...
};

You can use a cloning function or create a new instance by hand.

See Plunkr with WRONG setup and Plunkr with RIGHT setup. The Gender-Column is the one to watch out for.

Collectives™ on Stack Overflow

Angular ui-grid custom filter not working on multiple grids

Jade

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Jade

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related