How multiple column grouping can be done in slickgrid?

Question

Im a newbie to slickgrid. I have gone through few examples of slickgrid and good with basics. I have a scenario where i need grouping based on multiple columns but slickgrid grouping is based on a single column.

How can multilpe column grouping done in slickgrid with expand and collapse functionality on each group?

Anyone who is aware of the solution for this,kindly explain in a basic way since im new to slickgrid.

My requirement is like grouping the rows itself as in this link slickgrid-grouping-example. This example is for grouping based on one column. My requirement is to group based on multiple columns

Answer 1

I know the question is getting old but I made this functionality possible not long ago and got a pull request in the queue of SlickGrid projet on Github under my name. You could maybe try it out and give me some feedback. I modified 3 files to do so, including the example file. At this point, I do not know if my commit will be accepted or not, so try it at your own risk, though I'm very confident about my solution as I am already using it at work. Here is the link to it: https://github.com/mleibman/SlickGrid/pull/522/files

Here is an example of 3 multiple columns grouping, this code portion comes from the example-grouping.html file which I modified as well. Defining multiple grouping works with arrays, very similar to previous implementation, just wrap it in arrays when defining multiple grouping.

function groupByDurationPercentageStart() {
  dataView.groupBy(
    ["duration", "percentComplete", "start"],
    [
      (function (g) {
        return "Duration:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
      }),
      (function (g) {
        return "Complete:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
      }),
      (function (g) {
        return "Start Date:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
      })
    ],
    [
      function (a, b) {
        return a.value - b.value;
      },
      function (a, b) {
        return a.value - b.value;
      },
      function (a, b) { // string sorting
        var x = a.value, y = b.value;
        return x == y ? 0 : (x > y ? 1 : -1);
      }
    ]
  ); 
  dataView.setAggregators([
    new Slick.Data.Aggregators.Avg("percentComplete"),
    new Slick.Data.Aggregators.Sum("cost")
  ], true, false);     
}

Hope it helps you guys, now it really does have all features, I love this grid =)