[OutSystems Data Grid] Dynamic Grid Runtime Shaping
Reactive icon
Forge component by Platform Maintenance
Application Type

I am interested in using the React Grid where the columns, rows, and cell values will only be known only at runtime.  The information is not known at design time, thus no columns widgets are contained within the grid.  The use case is an application where users create, modify, and delete attributes that data should be collected on.  The users then will define a study based on a set of selected attributes.  The study UI is a grid based screen, where the attributes are the columns.  Note attributes have a type, with some being based on a data type (text, int, boolean, etc.), while others will be on a set of fixed values.

Theoretical Example

For this example, lets use an existing screen from the DataGridSampleReactive application as the goal of what the grid should look like when dynamically generated:  UI Flows/Sample/DependentDropdowns.

   Data:  18 columns

   Grid:  2 Columns


We will create the DynamicDependentDropdowns screen by using the DependentDropdowns screen as the base. 

  1.  Copy & Paste UI Flows/Sample/DependentDropdowns screen and rename it as DynamicDependentDropdowns.

  2.  Open the DynamicDependentDropdowns screen 

  3.  Navigate to the GridClientSide grid.

  4.  Delete the two DropdownColumn widgets contained in the GridClientSide grid.

  5.  Publish the application and navigate to the screen.

At design time, no columns were known to the grid, however at runtime the grid dynamically determined the columns based on the data payload,  18 columns are displayed.  This is good start.

The dynamic grid runtime shaping would be performed by developer code that would be triggered in an OutSystems grid event that fires after the data is fetched and initially bound to the grid.  In this example, the developer code needs to perform two tasks:

  1.  Remove/Hide grid columns that are not desired to be displayed.

  2.  Define/Redefine the needed Dropdown columns.

I am looking for the proper way to accomplish the two above tasks by leveraging DataGrid.Gridframework.js form with in the GridInitialize event.  In wijmo this would done with manipulating the column objects themselves.  Note sure this safe or even possible with the reactive Gridframework.  I do see that the Gridframework's Grid.OnInitialization CreateDataGrid action the is leveraging Serialized_configs.JSON input parameter; is manipulating this JSON the safest way to dynamically shape the grid at runtime?



Hello @erik berg ,

There is a post that I would like you to look at, I believe it might help showing how can dynamic data grid can be created.


Please let us know if this helps to start.

For the Dropdown Columns, the use case is more complicated, but let's try to go step by step.

Bruno Martinho

Thanks for the reference, I will look into that sample code.

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