225
Views
10
Comments
How to use group the rows and show expanded and contracted view to the datagrid row?


The row data and column data we are getting from backend api so the columns are dynamic in UI . So when we need to group the rows based on api response by writing js code in OUtsystems by pacing Datagrid.ID


Can anyone help me out by sharing the code snippet to group the rows by using provider     var provider = GridAPI.GridManager.GetGridById($parameters.gridId).provider or any way dynamically


image (1).png
2023-01-19 15-05-03
Sirajeddine Bouasker

Hi,
I think this sample can help you to better understand DataGrid widget and it contains samples

https://www.outsystems.com/forge/component-overview/9765/outsystems-data-grid-sample

Kind regards
Sirajeddine

UserImage.jpg
NITHIN ARADHYA

I Looked into it , but couldn't find  grouping rows sample in the above forge component . And has columns are also dynamic , we need to try in javascript way to group the rows.And I tried using  this code snippet by using GetViewLayout and SetViewLayout as per below image attached but right now all the rows are getting grouped to single group,but i need to group the. rows equally with n number of groups in data grid

Screenshot 2023-01-19 at 8.03.56 PM.png
Screenshot 2023-01-19 at 8.04.53 PM.png
2022-12-09 04-50-17
Shubham Doshi

Hello Nithin,

Please find below images for reference:

UserImage.jpg
NITHIN ARADHYA

I tried going the same , didn't work . I am getting sub group rows one inside the other .
Could you please share the oml/oap  file please ,it will be very helpful in getting all the contexts on groupCols.

Screenshot 2023-01-20 at 1.09.52 PM.png
2022-12-09 04-50-17
Shubham Doshi

Hi,

I cannot share the OML, Even the screenshots are not possible, hence the images. However, if you debug the action through console, you will get the solution.

UserImage.jpg
NITHIN ARADHYA

Okay , can you please tell me what is groupCols ? is it List of column headers ? Even after making the changes same like the above solution , but ui looks like my screenshot.Bcoz i am not trying to group columns here ,i am trying to group rows like below Figma design screenshot

And if you mind sharing the image of the how grid looks like in UI ?

Screenshot 2023-01-20 at 4.38.18 PM.png
2022-12-09 04-50-17
Shubham Doshi

Yes. groupCols is list of column headers. Groupby doesn't apply with the column header. Suppose If I have "Status" as a column, then it will group by records in "Active" and "Closed". It looks similar to your screenshot.

UserImage.jpg
NITHIN ARADHYA

I tried grouping the rows based on the above instructions,  but still it didn't work

2022-12-09 04-50-17
Shubham Doshi

Can you provide snaps of your action flow? You need to pass Grouping column's name as a input. And use that input inside 'groupCols' to group by data according to the column name provided

UserImage.jpg
NITHIN ARADHYA

It worked thanks

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.