690
Views
7
Comments
[OutSystems Data Grid] Is is possible to add columns dynamically on DataGrid?
Question
outsystems-data-grid
Reactive icon
Forge asset by OutSystems

I'm looking for how I can add columns dynamically on a grid table.

Is it possible to implement that sort of feature with Outsystems Datagrid?

Also, if we can't do that with OutsystemsDataGrid, is there any other way you can implement the feature to add dynamically columns instead of DataGrid.

Do you have any ideas?


This is the use-case I'm expecting.

1:  Let's say you have "Add column" button. Then a column is added on the grid table when you press the button. Also you can add rows and edit the table. 

The data is stored into any entity or something.

2:  Then when you open in browser again, you can see the table that you added column data and that you edited data.


If there is any good way, it'd be nice if you could give me how to implement it.


Best,

2021-10-09 07-57-44
Stefan Weber
 
MVP

Hi,

you can add new columns to the grid with javascript. Here is a sample


var provider = GridAPI.GridManager.GetActiveGrid().provider; // using OutSystems GridAPI to get the wijmo provider.

var column = new wijmo.grid.Column({ header: "Heading", binding: "Product.EAN" });

provider.columns.push(column);


I believe there is a way to use the OutSystems DataGrid API for this, but i couldnt find it.

Best

Stefan

UserImage.jpg
Tsubasa Yoshikawa

Hi, Thank you for your advice. I implemented it as that javascript.

 I can add a new column to Grid.

 

But after I reload, the added column is vanished.


 Why does this happen? I wonder if I need to do something in addition...

  Is there any way to avoid this?  I want the added columns to be stored in the Entity. 


If you have any ideas on the above, I was wondering if you could tell me about it.

I've attached my oml file for your reference.


MyGrid.oml
2021-10-09 07-57-44
Stefan Weber
 
MVP

Hi,

the javascript only modifies the Grid on the client. It does not automatically save some state.

If you want to persist the field settings you can use the following approach.

Create a helper entity containing your field definition (Header, Binding asf).

Use a List inside the GridColumnsPlaceholder and inside the list TextColumn.

I have attached a sample that also saves the state to the helper entity. Please note that this is quickly drafted. You shouldnt use an entity action directly in a client action. But it shows a possible way.

Please note that you have to manually enter the field definition in the ProductFields entity as those are not saved with the OML. The oml references the Sample Products entity.

Best

Stefan

DynamicGrid.oml
UserImage.jpg
Tsubasa Yoshikawa

HI,

Thank you.

Idownloaded your OML and just used it. Sorry, however this is not what I want.

You're using checkboxes just  to display some columns or not.



Let's say you have "Add column" button and "Save" button.

What I want is 

when you press "Add column" button, a new column will be added on Grid.

Then you can edit the data and you save it with "Save" button.


I know we can dynamically add a new row with Grid API.

I'd like to know how to add a new column on the table.

I wonder if there is no way to do this.

Also, if there is a good way to do what I want except DataGrid, I'm so happy to know about that.


Best,

2021-10-09 07-57-44
Stefan Weber
 
MVP

Mh. A full dynamic grid in the sense of that you define the schema on the client via some buttons or a form should be doable with the grid. Again you would need a helper table to store the schema just like above.

Behind the OutSystems Grid is the https://www.grapecity.com/wijmo/api/modules/wijmo_grid.html

Maybe it is better to directly interact with.

UserImage.jpg
ARS

I cannot share the specific implementation details due to IP but the way we have done it is

#1: To have dynamic Forms component from forge that spin-up templatized forms while,

#2: Running a SQL Pivot query to pivot row data into columns, converting the resultant aggregate list into a JSON object and then binding it to the grid


Hope this helps! I will need some time to create a generic demo on this and I intend to post a component on forge too, so that larger community can access the functionality

UserImage.jpg
Tsubasa Yoshikawa


Hi ARS,

Thank you.

I want to dynamically add a column and also save the column data but I wonder if it is hard to make it with Outsystems Logic...

I looked into Forge but there was actually nothing to meet my expectations...


By the way, I was just curious but

Do you mean IPP ?

 If so, I think  I can receive your OML and convert IPP of it and see it.


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