current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite
1

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.

share|improve this question
    
Where are the tables HTML and the grid binding? It sounds like a binding problem. – Paulo Pedroso Oct 8 '15 at 18:59
    
updated with the jade for the grid – fauverism Oct 8 '15 at 19:10
    
There's not enough info to help you. – Paulo Pedroso Oct 8 '15 at 20:22
up vote 1 down vote accepted

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.