19
Views
3
Comments
Vary number of columns automatically  in DataGrid
Application Type
Reactive

Hello.


Currently my DataGrid displays data for 12 months from the month I selected by MonthPicker.

I applied 12 piece of TextColumn which containes amount of the month of the column, and set every header name of the month. Like if I select May 2025, the headers name would be May, June, July...

I created Structures which named "MonthAmount",  and it contains "Amount" which is Integer List. 

Then I created     SalesBook Structure which containes "AccountName", "ProjectName", "SalesName", and "MonthAmount" which data type is MonthAmount structure and created nested list.

There's ForEach to append whole data and also there's ForEach in the loop to append monthly amount to "Amount Integer List", so it shows 12 months data in every row.

I'd like to show column of month by calcurating with row number of "Amount Integer List", for example, if I selected May 2025, MonthAmount.Amount[0] could be set and set header name to "5" calculated from row number "0".


I can bind MonthAmount with TextColumn and it shows all of values in "Amount Integer List", however I cannot set values like MonthAmount.Amount[0]. Then I want the DataGrid to vary number of columns automatically by "Amount Integer List" length.

Is that possible to solve this or are there other solutions?

I also consider using table widget if its possible to achieve this.


Thanks.

2022-12-22 10-00-39
Beatriz Sabino

Hi Yuika,

In the table widget, you can use CSS to hide columns based on a condition, such as If(MonthAmount.Amount = 0, "hidden", ""). However, I'm not sure if this approach also works with the DataGrid.

2022-12-30 07-28-09
Navneet Garg

Check the datagrid api SetColumnVisibility

https://farinha-dev.outsystemscloud.com/OutSystemsDataGridSample/API

there is one discussion as well related to this. please check it might help you
https://www.outsystems.com/forums/discussion/80434/outsystems-data-grid-hide-a-column-if-there-are-no-values-in-a-column/

You can also refer Wijmo's Flexgrid documentation as Outsystems data grid based on Wijmo's Flexgrid. So you can manipulate the columns using javascript as well.

OutSystems.GridAPI.GridManager.GetActiveGrid();

https://developer.mescius.com/wijmo/demos/Grid/Columns/DynamicColumns/purejs


If you can share oml (test grid) so It will be easy for me to suggest solution accordingly.


2024-12-10 04-40-04
Gitansh Anand

Hi @Yuika Maeda, from what I can understand you don't want to show column which don't have value in any row, since you are using data grid here is what you can try, first calculate the max number of column which have data and store it in a variable, you can calculate this inside your first loop, after assigning MonthAmount list just filter out not null values in MonthAmount list and if the length is greater then current value of the variable reassign it else keep the same value. Then the column block of the data grid has a "Visible" property in "ColumnOptionConfigs", on your first column apply this condition, length >= 1, for second column apply, length >= 2, and so on. I think this should work.

Thanks
Gitansh Anand

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