Slickgrid grouping rows style

Question

In this example:

http://mleibman.github.io/SlickGrid/examples/example-grouping

You can group the rows by certain columns, but I would like the rows inside the groups to be indented. Is there a way I can add a class to the grouped rows or something? I can't seem to find a good way to do this.

I'm creating the grouping by doing:

function groupByDuration() {
  dataView.setGrouping({
    getter: "duration",
    formatter: function (g) {
      return "Duration:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
    }
  });
}

Thanks!

Answer 1

Try this...

$(".slick-row:not(.slick-group)").css('margin-left','20px');

This will give you all the rows(divs) which don't have class slick-group i.e. who are the grouped rows.

For nested groups, you have to check whether any of the parent has class slick-group by closest() and apply the margin accordingly

Answer 2

I solved this by adding my own custom formatter to the first column.

var myFormatter = function(row, cell, value, columnDef, dataContext) {
    var groupings = this.getGrouping().length;
    var indentation = groupings * 15 + 'px';
    var spacer = '<span style="margin-left:' + indentation + '"></span>';
    return spacer + value;
};

I bind the function to slickgrid's dataView so I can access the groupings.