need to use groupBy after using filterBy, doesn't work

I have a grid with data loaded. I then use groupBy and this appropriately groups the grid as I need it.

I then need to filter the grid, so I use filterBy. This appropriately filters the grid as I need it, but it also causes the grid to ungroup. This makes sense, and I can see why it would do that.

My problem is that I then need to regroup the now filtered grid. So, I use groupBy again. But this time it does not group the grid.

My question: How do I group the grid after it has been filtered?


Try filtering the grid first and then apply the groupBy() function.

Thank you! I tried changing around the order. That didn’t solve it. HOWEVER, your suggestion did put me on the right track, and it is now solved.

Indeed, using filterBy does necessitate having to re-use groupBy (and in my case, I need to filter repeatedly, and therefore need to group repeatedly).

The cause of my problem centered around that the column I am grouping on was (and needs to be) a hidden column. Using groupBy on a hidden column BEFORE grid.init is OK, works fine. However, using groupBy on a hidden column AFTER grid.init does not work. The fact that it works before but not after is what made this difficult to identify.

The solution: Don’t make the column hidden. Instead, give it a zero width, which “hides” it. Everybody’s happy. And groupBy works every time.

Thanks, again.

Actually, I was still a little confused, but almost had it right.

The column being grouped on CAN be hidden, asl long as it is not also the primary index column.

If the primary index column is hidden, groupBy only works before the grid.init. After grid.init, the primary index column must NOT be hidden to allow groupBy to work properly. So, again, my solution was to just give it a zero width instead of hiding it.

If I still don’t have it quite right, please feel free to let me know.


How are you loading the grid? I was just working on a grid today which filters and groups where the grouping column is hidden. It works fine.

One thing which is helpful is to include an id for each row. The cool thing with dhtmlx is that you do not need to create a column for id unless you want to show it. The grid registers the id and maintains it behind the scenes.

Here’s how it’s working for me.

  1. define the grid
  2. set the columns as hidden
  3. build the grid
  4. load json data using a .parse()
  5. add event handlers
  6. filter the grid with:
  grid.filterBy(2, function(val, rId){
      if (val == 'Y' || this.cells(rId, 0).getValue() == '1') {
        return true
      return false;

(I wish dhtmlx would document that the rId is passed into the filterBy() function…drove me batty trying to figure out how to apply “or” logic in the filter)

  1. group with:
  grid.customGroupFormat=function(name,count){return name;};

Then when some event happens, like a button press, I repeat 6 and 7.

one more thing…if the id field is not really unique–lots of problems.

Shaneg, you’re right. It is not available to group the grid by the hidden column.
Your solution with zero width is legal.

Note that the grouping and filtering can be applied only after the data is loaded completely to the grid.

Update: groupBy+setColumnHidden method will work together successfully in case of using the second attribute of the groupBy method:
F.e.: mygrid.groupBy(0,["#stat_max","#title","#cspan","#stat_total","","#cspan","#cspan","#cspan"]);

1 Like