Tip: Multiple groups grouping (nested) in query (built into AIM from v.8.6)

hpl123

Hi all,
Here is a tip on how to get multiple groupings in a query so you could have for example:
Group 1
Group 2
Data

The only thing with this script is the group template is not used (the group template is used to format the name of the group for example) so the group name will be: Group 1: Value of Group 1 (instead of just the value which is the way it works when using grouping from Aware). It is probably possible to define the group template but I haven´t dug into that yet, if anyone knows how to define the group template, please share the solution.

Add the following to the queries advanced (init) script and the field parameter is the group and just add multiple groups to get multiple groupings (nested):

var ds = config.dataSource;
ds.group = [{field:"GroupTemp", dir: "asc" },{ field: "FlagTemp", dir: "asc"}];

Update: This is from v 8.6 built into AwareIM I have been told by Pointswell (have not upgraded and tested it yet).

hpl123

Update:
Here is also how to customize the group header name:

var ds = config.dataSource;
config.columns=[
{field: "GroupTemp", title: "Group",groupHeaderTemplate: "#= value #" },
{field: "FlagTemp", title: "Flag", groupHeaderTemplate: "#= value #" },
{field: "ItemPresentationTemp",encoded: false}];
ds.group = [{field:"GroupTemp", dir: "asc" },{ field: "FlagTemp", dir: "asc"}];

When using this above you can customize the group header to anything you want, see here for parameters:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.groupHeaderTemplate

NB: When using this above you have to add all columns you want (this above override all column settings set in the config tool) so in the code snippet above, the 2 first fields are for the grouping and they have the group header template as you can see. The last one is just for a row of data and the encoded parameter is added to enable html presentation in the query row).

PointsWell

This is awesome and has fixed a whole bunch of issues I have been having with the lack of tabs within panels of a VP.

How do you render this to be collapsed on opening?

tford

I would be interested to see a screen shot of the output this produces.

PointsWell

Screen Shot 2017-07-21 at 23.01.13.png

hpl123

PointsWell wrote
This is awesome and has fixed a whole bunch of issues I have been having with the lack of tabs within panels of a VP.

How do you render this to be collapsed on opening?

Not yet no, I did google it and it SEEMED a JS/Jquery simulated click was the only way BUT this may have been old information so may be possible now. I have no use for this solution yet for some time so will probably not dig into to it yet but if you find the solution please share 🙂. Thanks

yuri.rj

to expando or collapse first level...

// first expand the first master table row
grid.expandRow(".k-master-row:first");
grid.collapseRow(".k-master-row:first");

Using the code below have problems when you have an editable column.

var ds = config.dataSource;
config.columns=[
{field: "GroupTemp", title: "Group",groupHeaderTemplate: "#= value #" },
{field: "FlagTemp", title: "Flag", groupHeaderTemplate: "#= value #" },
{field: "ItemPresentationTemp",encoded: false}];
ds.group = [{field:"GroupTemp", dir: "asc" },{ field: "FlagTemp", dir: "asc"}];

So, its possible to use:

config.columns[0].groupHeaderTemplate="#= value #";
config.columns[1].groupHeaderTemplate="#= value #";

This way you don't lose the AwareIM behavior.

It works for me.

PointsWell

yuri.rj wrote

So, its possible to use:

config.columns[0].groupHeaderTemplate="#= value #";
config.columns[1].groupHeaderTemplate="#= value #";

This way you don't lose the AwareIM behavior.

It works for me.

I've been trying to use this, but I am assuming that there is some setup missing as just using the

config.columns[0].groupHeaderTemplate="#= value #";
config.columns[1].groupHeaderTemplate="#= value #";

doesn't appear to do anything

PointsWell

hpl123 wrote
PointsWell wrote
This is awesome and has fixed a whole bunch of issues I have been having with the lack of tabs within panels of a VP.

How do you render this to be collapsed on opening?

Not yet no, I did google it and it SEEMED a JS/Jquery simulated click was the only way BUT this may have been old information so may be possible now. I have no use for this solution yet for some time so will probably not dig into to it yet but if you find the solution please share 🙂. Thanks

The fix to this is to combine the Javascript with the Config Tool UI.

In the UI set the Group column and initially collapsed then in the JS create the conditions to group the multiple levels.

I have used the config.groupable="true" to allow user modification of the grouping condition.

The down side is that every time the user changes the grouping order it refreshes the grid and collapses everything again.

Screen Shot 2021-03-09 at 13.54.47.png