SlickGrid -- viewing and grouping by multiple values field

Question

I'm using SlickGrid and very happy with it, one of the best grids I've ever encountered. I use DataView for the data and groupItemMetadataProvider for grouping.

I have a following problem and looking for a solution. My data contains some fields with multiple values. E.g. one data entry can be associated with multiple countries: US, IR, NZ or multiple categories: cats, dogs, birds.

Two questions:

What is the best practice to implement the view for several entries in one cell. ? I suppose, custom template or formatter can be used here, but will be glad to hear your suggestions.
How to implement grouping by such field? E.g. I would like to group by country, so the entry should be shown under each country group, same row under US, AU and NZ.

Real Life Example

Without grouping

Name    | Animals
-----------------
Paker   | cats, dogs, birds
Michael | cats, snakes

Group by animals

Name    | Animals
-----------------
- cats
Paker   | cats, dogs, birds
Michael | cats, snakes

- dogs
Paker   | cats, dogs, birds

- birds
Paker   | cats, dogs, birds

- snakes
Michael | cats, snakes

Cross-posted to SlickGrid Google Group: https://groups.google.com/forum/#!topic/slickgrid/BxS_4Lny3KE

Thanks a lot!

Consideration for bullet #1: If you get too fancy with your display, you'll get into [dynamic row height](http://stackoverflow.com/questions/2805094/is-variable-rowheight-a-possibility-in-slickgrid) territory which could be painful. The [extractGroups function](https://github.com/mleibman/SlickGrid/blob/e004912b5ce29ac0d0cb04df50fe66db5e3af9ea/slick.dataview.js) expects a row to belong to only 1 group, thus the default implementation will not allow you to achieve bullet #2 with the data as provided. — Origineil, Oct 02 '14 at 14:17
A [less than ideal solution](http://jsfiddle.net/origineil/7jp0z2t1/) then becomes maintaining datasets representing respective desired states. — Origineil, Oct 02 '14 at 15:27
@Origineil, thanks for your solution. Of course I want some kind of native solution, but as I understand it's not something that SlickGrid supports. The problem that I need to make some operations on the items. E.g. update / deletion. Probably I'll need to find all original items in both raw and flattened collections and to update or delete them as well. — Paker, Oct 02 '14 at 16:32
@Origineil, can you please add you comment as an answer, I used your solution and want to accept it. — Paker, Oct 06 '14 at 08:05

score 2 · Accepted Answer · edited May 23 '17 at 10:33

When displaying custom or collection based data within a single cell, if attempting to render that data vertically, you'll need to consider the lack of native support for dynamic row height.

Inspecting the grouping function (extractGroups ~line 472)

for (var i = 0, l = rows.length; i < l; i++) {
 r = rows[i];
 val = gi.getterIsAFn ? gi.getter(r) : r[gi.getter];
 group = groupsByVal[val];
 if (!group) {
   group = new Slick.Group();
   group.value = val;
   group.level = level;
   group.groupingKey = (parentGroup ? parentGroup.groupingKey + groupingDelimiter : '') + val;
   groups[groups.length] = group;
   groupsByVal[val] = group;
 }
 group.rows[group.count++] = r;
}

reveals that a custom getter is possible, but that a single value is used/expected in the grouping of each row. Thus, for a row having a multi-value cell to appear in multiple groups (without modyfying source), the data would have to be "flattened".

A less than ideal solution then becomes to maintain datasets respective to the view state being rendered. As data interaction needs and/or data size increase, this workaround becomes less feasible and tends toward the need to implement a customization in the source.

SlickGrid -- viewing and grouping by multiple values field

1 Answers1