CODEWITHSUNDEEP
javascriptjqueryslickgrid
user3293666
user3293666

Reputation: 353

SlickGrid Display Aggregation at grouping level

I am following this example for grouping with aggregation: http://mleibman.github.io/SlickGrid/examples/example-grouping.html

This has grouping done in one row and Aggregation done in separate row. I want both to be displayed in same instead of having two separate rows

For e.g In above exampple i want to a single row to like + Duration : 3 (4 items) avg: 20 % cost:60 And then we click on expand button we see all details inside it.

Any suggestions?

Upvotes: 2

Views: 2166

Answers (2)

Luis Linares
Luis Linares

Reputation: 1

I share my solution.

To show totals, you can add aggregators with

aggregators: [
  new Slick.Data.Aggregators.Sum('your_column_name1');
  new Slick.Data.Aggregators.Sum('your_column_name2');
  new Slick.Data.Aggregators.Sum('your_column_name3');
]

And then, on the formatter function, you can access to totals.

So, use totals and format the grouping row using the same css clases that cells uses, like this:

setGrouping({
            getter: "your_getter",
            formatter: function (g) {
                let html = `<span class='l0 r0'>${g.value}</span>`
                            +`<span class='slick-cell l1 r1'>${g.totals.sum['your_column_name1']}</span>`
                            +`<span class='slick-cell l2 r2'>${g.totals.sum['your_column_name2']}</span>`
                            +`<span class='slick-cell l3 r3'>${g.totals.sum['your_column_name3']}</span>`;
                return html;
            },
            collapsed: false,
           aggregators: [
               new Slick.Data.Aggregators.Sum('your_column_name1');
               new Slick.Data.Aggregators.Sum('your_column_name2');
               new Slick.Data.Aggregators.Sum('your_column_name3');
           ]
        }

Note that the first span must be without slick-cell class, to allow expand and collapse icon to show correctly.

Additional, you have to nottice that each span has two classes which are incremental.

l0 r0
l1 r1
l2 r2
l3 r3

Where l0 and r0 are for the first column, l1 and r1 for the second and so on.

Using this approach, i've been able to create something like this:

Example Image

Upvotes: 0

Origineil
Origineil

Reputation: 3118

You need to change the formatter and the lazyTotalsCalculation.

  • lazyTotalsCalculation = false

    formatter: function (g) {
  var total = sumTotalsFormatter(g.totals, columns[6]),
      avg = avgTotalsFormatter(g.totals, columns[3]);
  return "Duration:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span><span>avg: " + avg + "</span><span> cost: " +  (total.length>0?total.split(":")[1] : total) + "</span>" ;
},

That is the quick and dirty route. To make the code more robust instead of "hardcoding" the column index, you'll want to lookup the columns along the lines of:

grid.getColumns()[grid.getColumnIndex("cost")]
grid.getColumns()[grid.getColumnIndex("%")]

Upvotes: 4

Related Questions