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):

Code: Select all

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:

Code: Select all

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/ja ... erTemplate

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 (18.58 KiB) Viewed 71054 times

[hpl123]

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...

Code: Select all

// 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.

Code: Select all

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:

Code: Select all

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

This way you don't lose the AwareIM behavior.

It works for me.

[PointsWell]

So, its possible to use:

Code: Select all

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

Code: Select all

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

doesn't appear to do anything

[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?

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 (34.02 KiB) Viewed 56390 times