CODEWITHSUNDEEP
javascriptangularjsangular-uiangular-ui-grid
fauverism
fauverism

Reputation: 1992

Angular ui-grid custom filter not working on multiple grids

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.

Upvotes: 0

Views: 1088

Answers (1)

CMR
CMR

Reputation: 933

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.

Upvotes: 1

Related Questions