I have a Data Grid where I set th first 2 columns as grouping columns, i. e. I set the property rowGroupIndex to 0 (first col), and rowGroupIndex to 1 (second col). I also set for both columns the property visible to false. Otherwise the “original” columns are also shown. I get the desired result as seen in the attached screenshot.
My questions:
How to set the max-width of these 2 grouping columns (Stufe (+) and Klasse)? The maxWidth property on the grid column only works for non grouping columns.
Is it possible to hide/avoid the button above the grid header columns (Stufe (+) and Klasse). Closing them is possible bei the close button, but I’d like to not show them at all.
By the way, sorting the first column works as expected, but not so on the second column
Regards,
PS: Is the hint in the docs still valid, that grouping is not yet supported for foundset having multiple primary key columns? I have multiple primary key columns on this fondest but it seems to work as expected. And I assume the above questions have nothing to do with multiple primary key columns.
Thanks for the tips. I also tried your point 1. but then Stufe and Klasse is in the same first column (Stufe). And I like to have Stufe and Klasse in their corresponding columns with the appropriate header.
Your point 2. is exactly what I was looking for. Thanks!
I don’t get an overview (yet) how to program the grids functionalities as shown in the ag grid docs.
As said, I’d like to open (and close) groups programmatically. Did not find a way yet.
For gridOptions I also have no overview what is working and what is not working. For example, rowGroupPanelShow ‘never’ (or an other value) works, suppressGroupRowsSticky true works, BUT groupDefaultExpanded -1 (or 1, 2 etc) does not work and gives an error in the console. I find these results by trial and error.
Is there somewhere a documentation where I can see what works and what does not work?
The reason groupDefaultExpanded doesn’t work has to do with the Row Model. Servoy’s implementation uses the Server-Side Row Model which allows foundset data to be lazy-loaded. Because the client doesn’t have all the data at once, grouping operations must be performed server-side (SSRM Row Grouping).
I have an idea of how you may be able to acheive this, however this is just based on reading the code. I’ll have to experiment with this as it would be useful.
If you look at this AG Grid example, a callback called isServerSideGroupOpenByDefault is added to the gridOptions which determines if the group is open based on the route.
Now looking at Servoy’s server API for groupingtable, they provide a function calledaddFunctionCall that allows you to define a server-side function on the grid. They provide a nice example of how to acheive this.
As I said, I haven’t tried this yet, but it looks promising.
As a follow up to my comment above, it’s actually easier than I thought, there’s no need to use addFunctionCall(). The following is a working example:
/**
* @param {JSEvent} event
*/
function onLoad(event) {
const f = function(params) {
const route = params.rowNode.getRoute();
if (!route) return;
// Example 1: Open group based on group name.
const routeAsString = route.join(",");
const routesToOPenByDefault = ['Group Name 1, 'Group Name 2'];
return routesToOPenByDefault.indexOf(routeAsString) >= 0;
// Example 2: Open first level of grouping
// return route.length === 1;
};
// Add isServerSideGroupOpenByDefault property to existing design time grid options
elements.grid.gridOptions = Object.assign(
{},
elements.grid.gridOptions || {},
{ "isServerSideGroupOpenByDefault": clientutils.generateBrowserFunction(String(f)) }
);
}
Thanks a lot for your example, which I appreciate very much!
I stumble over some things, having Developer Version: 2024.3.5.3948_LTS:
In the code line: ```
const routeAsString = route.join(“,”);
2. I have to say that I still don't know which Servoy form property is corresponding to the "Group name"? Is it the property headerGroup of a column?
3. In the code line: ```
return routesToOpenByDefault.indexOf(routeAsString) >= 0;
``` I get the warning: return statement is inconsistent with previous usage. Solved it by: if (!route) {return false;}
Using th example 2 I get: The property length is undefined in route
Any idea what's the problem?
Thanks and best regards
Looks like some recent posts went missing during the forum move. I did reply to your question about what determines the group name.
The group name such as ‘Group Name 1’ in my example, is not defined in the grid properties, but refers to the runtime data being displayed in the grid. So if you were grouping meals, the group names might be ‘Breakfast’, ‘Lunch’, and ‘Dinner’.
With this example in mind you may have the following routes:
[‘Breakfast’]
[‘Breakfast’, ‘Fruit Loops’]
[‘Breakfast’, ‘Pancakes’]
[‘Lunch’]
[‘Lunch’, ‘Ham Sandwich’]
[‘Dinner’]
[‘Dinner’, ‘Pasta’]
[‘Dinner’, ‘Pizza’]
[‘Dinner’, ‘Pizza’, ‘Pineapple Pizza’]
If you want to open the group ‘Dinner’ and the sub-group ‘Pizza’ you would need to test the routes as follows:
Opening groups based on the grid data requires knowing in advance what the data will be. Hence this strategy only works well with pre-defined group names.
For setting the max width of grouping columns, you can try applying CSS directly to the grid using .ag-row-group-cell or .ag-cell-grouped selectors. Another approach could be using the autoGroupColumnDef property to set maxWidth for the grouping columns.
To hide the expand/collapse button above the grid header, you might set suppressGroupRow to true in your grid options or configure autoGroupColumnDef with headerCheckboxSelection: false and cellRendererParams: { suppressCount: true }.
Regarding the sorting issue, ensure the comparator function is properly set on the second column. You might also try setting enableRowGroup: true and sortable: true explicitly for that column.
About the multiple primary key columns, if it works fine for you, it’s possible the documentation might be outdated. If there are no issues with grouping, it should be safe to proceed as is.
Hi honey
Thanks for your ideas/solutions. I am also trying to set the grouping columns with CSS styles and tried yours, i. e. .ag-row-group-cell and .ag-cell-grouped. In my environment, they unfortunately don’t seem to work.
I am not sure about autoGroupColumnDef, as I don’t find such a property on my grid or grid column.
For the sort part, I have set enableRowGroup: true and enableSort: true on both columns, but it seems these settings have an effect only on the first column.
Thanks for all the good help with Data Grid grouping. As the default opening works, I am looking to programatically change the expanding/collapsing of the groups. Anyone has an idea/example how to achieve that?
Another question I have is there a way to interactively e expand/collapse all groups like with what usually done with the modifier key Option|Alt?
