Table Records With Dynamic Columns And Rows | OutSystems

Trang chủ » Html Table Hide Column Dynamically » Table Records With Dynamic Columns And Rows | OutSystems

Có thể bạn quan tâm

Community/Forums/Questions2019-12-16 02-11-04Hai Minh NguyenRank: #9989Table Records with dynamic columns and rows2996Views12CommentsSolvedQuestion

Hi guys,

I look for a solution to create a table records with dynamic number of columns and rows from a 2D array similar to below image.

Do you guys have any suggestion for this? Thanks in advanced.

0023 May 2019Copy post link2019-05-22 11-30-09Marcelo Ferreira MVPRank: #11Solution

Hi Eucliwood,

With data grid component you don't need to know which columns you want to use. The GridContainer has a property called "AutoGenerateColumns" that generate the columns needed based on the JSON that you output in the rest service you use on the variable "RestURL"

Regards

Marcelo

See solution in context0027 May 2019Copy comment link2019-12-16 02-11-041 reply28 May 2019Show threadHide thread2019-12-16 02-11-04Hai Minh NguyenRank: #9989

Fábio Fantato wrote:

Did you try this component https://www.outsystems.com/forge/component-overview/3669/dynamictable ? It is simpler than DataGrid, but for your usecase maybe it could work.

Marcelo Ferreira wrote:

With data grid component you don't need to know which columns you want to use. The GridContainer has a property called "AutoGenerateColumns" that generate the columns needed based on the JSON that you output in the rest service you use on the variable "RestURL"

Hi Fábio and Marcelo,

Thank you for the input.

Looks like both the ways to approach the issue is to create the table using JSON. I have tested the two components, though I have trouble when trying to merge adjacent cells in the table.

Let's say I want all adjacent cells to be merged together when they have the same value. What should I do to achieve this using JSON?

0028 May 2019Copy comment link2020-02-28 09-46-54Eduardo JauchRank: #7

Hi Eucliwood,

If you know the MAXIMUM number of columns, you can use a Table Records and HIDE columns in the browser using Display NONE (CSS). The downside is that the columns will be in the HTML.

The alternative is to use lists inside lists. For that, you will probably have a list of "lines" and then, for each line, a list of columns. Your data model can simplify or make this more complex, of course, as implementation will depend on it.

Cheers.

0023 May 2019Copy comment link2020-09-15 13-07-23Kilian Hekhuis MVPRank: #4

Hi Eucliwood,

Alternatively, if you are on Platform 11, you could take a look at the Data Grid Forge component.

EDIT: Correction, it's also available for P10.

2023 May 2019Copy comment link2019-12-16 02-11-042020-09-15 13-07-232 repliesLast reply 27 May 2019Show threadHide thread2019-12-16 02-11-04Hai Minh NguyenRank: #9989

Thank you all for the input.

Eduardo Jauch wrote:

Hi Eucliwood,

If you know the MAXIMUM number of columns, you can use a Table Records and HIDE columns in the browser using Display NONE (CSS). The downside is that the columns will be in the HTML.

The alternative is to use lists inside lists. For that, you will probably have a list of "lines" and then, for each line, a list of columns. Your data model can simplify or make this more complex, of course, as implementation will depend on it.

Cheers.

Hi Eduardo,I thought about this too. But as I will not know the maximum number of columns, I will be unable to create a Table Records.Your suggestion of using lists inside lists is great. I will test to see if I can implement it this way.

Kilian Hekhuis wrote:

Hi Eucliwood,

Alternatively, if you are on Platform 11, you could take a look at the Data Grid Forge component.

EDIT: Correction, it's also available for P10.

Hi Kilian,My understanding for Data Grid component is you have to know the number of columns you are going to create. Is it true?

0023 May 2019Copy comment link2020-09-15 13-07-23Kilian Hekhuis MVPRank: #4

Eucliwood wrote:

My understanding for Data Grid component is you have to know the number of columns you are going to create. Is it true?

Yes, you seem to be right. I hadn't looked at the component in detail, and it seems the columns need to be set at design time. However, they do have a "Hide" Property that seems to make it easier to hide columns than when using Table Records.

0027 May 2019Copy comment link2020-02-28 09-46-54Eduardo JauchRank: #7

Didn't used it yet, always forgetting...

It allows to create columns dynamically?

0023 May 2019Copy comment link2024-07-15 13-39-00Fábio Fantato MVPRank: #25

Hi Eucliwood,

Did you try this component https://www.outsystems.com/forge/component-overview/3669/dynamictable ? It is simpler than DataGrid, but for your usecase maybe it could work.

See the image below:

0027 May 2019Copy comment link2019-05-22 11-30-09Marcelo Ferreira MVPRank: #11Solution

Hi Eucliwood,

With data grid component you don't need to know which columns you want to use. The GridContainer has a property called "AutoGenerateColumns" that generate the columns needed based on the JSON that you output in the rest service you use on the variable "RestURL"

Regards

Marcelo

0027 May 2019Copy comment link2019-12-16 02-11-041 reply28 May 2019Show threadHide thread2019-12-16 02-11-04Hai Minh NguyenRank: #9989

Fábio Fantato wrote:

Did you try this component https://www.outsystems.com/forge/component-overview/3669/dynamictable ? It is simpler than DataGrid, but for your usecase maybe it could work.

Marcelo Ferreira wrote:

With data grid component you don't need to know which columns you want to use. The GridContainer has a property called "AutoGenerateColumns" that generate the columns needed based on the JSON that you output in the rest service you use on the variable "RestURL"

Hi Fábio and Marcelo,

Thank you for the input.

Looks like both the ways to approach the issue is to create the table using JSON. I have tested the two components, though I have trouble when trying to merge adjacent cells in the table.

Let's say I want all adjacent cells to be merged together when they have the same value. What should I do to achieve this using JSON?

0028 May 2019Copy comment link2020-09-15 13-07-23Kilian Hekhuis MVPRank: #4

Cool! Thanks Marcelo.

0027 May 2019Copy comment link2018-10-17 18-00-19Carlos GonçalvesRank: #1010

in Alternative to what was already suggested, I would suggest a less efficient way but more versatile.

Create a Table Record with 2 Cols, 1 col with the main list and another col that will take an webblock (since you cannot have a list inside a list). That webblock will receive the parameter from the Table Record and will create the data for that "line" inside the webblock.

How do you draw the cols dynamically? you add an expression inside the list record with "Escape content = no" and create your tags with the values inside the List Record

Eg:

"</td><td class =""table class i forgot the name"" ">"+ListRecord.List.Current.Value+"</td>"

With this line it will create as much cols as values you have in your list Record.

For the header you have to do the same process but with the header Names.

Last question and probably the more anoying one is have the same size in the header and in the respective col. Well for that i used percentages.

I hope this helped.

BR

0028 May 2019Copy comment link2019-05-22 11-30-09Marcelo Ferreira MVPRank: #11

Hi,

To be honest never try to do that but on this sample there are a couple of examples that do that. check if any of them helps you.

Regards,

Marcelo

0028 May 2019Copy comment link2020-01-15 14-26-00Ricardo Henrique Silva CalheirosRank: #5845

Hi friends

Marcelo as you had suggested, i was looking for a Grid Container but I didn't find the propoerty "AutoGenerateColumns". I'm developing in Reactive Web right now...

Capturar.PNG0020 Jan 2021Copy comment linkTry OutSystems nowGenerate an App with AI Loading...

Từ khóa » Html Table Hide Column Dynamically