I was asked by a colleague to help find a way to provide grouping functionality within the grid component in Workflow. Using the Angular options, this worked for him; however, there was no way to have the grid load with initial groupings (as far as we could tell). After a bit of trial, error, and effort, I found a way to preload the groupings in the Angular grid.
Give your grid a specific Control ID on the Functionality tab.
Supply the component with the usual required parameters.
- Grid Mode
- Data Type
- Is Array
- Grid Data
- Columns
On the Response tab, select Allow Grouping if you want the user to be able to interact with the grouping feature.
On the General tab, select Use Angular JS.
At the project's top level options, select Use Angular Js Capability.
Now we're ready to include some javascript to make the grouping happen. In order to properly code the grouping, we'll need to know the name of the column as it is used in the data itself. I'll assume (though I have not thoroughly researched) that the rendered HTML column matches the Object's Property Column as configured in the Workflow grid component; so start with that and go from there.
Include whichever following script is appropriate into your form's Behavior tab, as an added onload action. Double-click any empty space on your form, or right-click and select Edit Form in any blank space inside or outside your form in the Form Builder canvas.
setTimeout(function() {$('#TestGrid').data("kendo-grid").dataSource.group({field: "OSName"});}, 100);
The setTimeout delay is used because the kendo Angular component takes just a tiny moment to render, meaning that we need to delay our script long enough to allow the grid to complete. Otherwise, the script we run will not find the target dataSource. Depending on the data displayed in the grid, the delay may need adjustment to suit. The 100 value in the script above is the delay, in milliseconds.
The colleague for whom I worked on this solution needed multiple initial groupings. The code was then adjusted to force an array of groupings, as such:
setTimeout(function() {$('#TestGrid').data("kendo-grid").dataSource.group([{field: "OSName"},{field: "OSVersion"}]);}, 100);
Note the square brackets added in to indicate an array.
If pre-sorting on those groupings is desired, add a few directionals in:
setTimeout(function() {$('#TestGrid').data("kendo-grid").dataSource.group([{field: "OSName", dir: "asc"},{field: "OSVersion", dir: "desc"}]);}, 100);
asc and desc being 0->9, A->Z and 9->0, Z->A, respectively.
That should do it! Hopefully that'll help someone else out in the future!
