Merging table cells dynamically

Merging table cells dynamically

  
Hi everyone! Is it possible to have a "rowspan" property in cells, while still using the table records widget?

I was wondering if I can show this :

Product | Week Ready | Cost
A 2 23
3 25
B 2 30
3 35


instead of

Product | Week Ready | Cost
A 2 23
A 3 25
B 2 30
B 3 35

Is it possible? Thanks !
Dear Gonçalo Gaiolas,

It is not possible to do what you suggest automatically, but you can obtain that result by limiting the display of the value in the left column only to when it differs from the row above.

In practise, imagine that the Entity in your example is called Product, and contains the Attributes Name, WeekReady and Cost. To display a Record List with values of this record type, you should first create a Table Record and add the three columns as per normal (I believe you already did this).

Now move the Name expression on the leftmost cell inside an If widget (in the If area, not the Else area). Assuming that your Table Record’s name is “TableRecords1”, the condition for the If could then be

TableRecords1.List.CurrentRowNumber = 0 or TableRecords1.List[TableRecords1.List.CurrentRowNumber-1].Product.Name <> TableRecords1.List.current. Product.Name

This will show the Name attribute only in rows where it changes, producing the effect you want.

Please let me know if this worked for you.

Best regards,


Miguel
Hi Miguel,

It works like a charm!

Now, additional work for you ;)

Can I make every row under a product appear with the same backgound color? This way, every product had a "color zone". This would be just perfect.

Thank you so much for your help!

Gonçalo
Dear Gonçalo Gaiolas,

The "abstract" way to achieve condition-dependent Styles in a Record widget is to disable the automatic styling of the widget and then, on a per-cell basis, apply a style using Extended Properties. In the specific case of the Table Record widget, you should first set both the Odd Line Style and Even Line Style to "(none)" and then on each cell add a "style" (or "class") property to each cell, which value would be computed as a Text expression.

The specific scenario you are presenting is not trivial though. While detecting the change in the Name Attribute in your example can easily be attained using the condition on my last post, identifying what was the "style" used in the last row (so you could maintain the same or change to a different one) would probably require a fair bit of JavaScript to access the DOM.

What I can suggest, then, is outputting a suitable visual cue when a Name change is detected, rather then trying to maintain a state across rows. After some experimenting I found that a Separator line between changing names seems to produce a fairly satisfying visual effect. Please try the following:

- Disable the automatic styling on your Table Record (see above for the properties to change);
- Add the Extended Property style to all the cells in the data row (not on the header row) and set its value to:

FormatBoolean( TableRecords1.List.CurrentRowNumber = 0 or TableRecords1.List[TableRecords1.List.CurrentRowNumber-1].Product.Name <> TableRecords1.List.current. Product.Name, "border-style: solid; border-top-width: 2px;border-left-width: 0px;border-right-width: 0px;border-bottom-width: 0px", "" )

You will recognise the boolean expression above as the same as on my last post, which decides if the cells should have an overhead line or not.

Experiment with the effect (width etc) until you are happy with it. Hope this is a satisfactory substitute.

Best regards,


Miguel
Hello all

This is an old thread, and because of that I would like to ask if there is now a solution for this.
I need to show an image spanned for a dynamicaly number of rows, when those cells across several rows have the same image.
i.g. If cells in 3 rows have the same image, the image will be shown only once spanned across those 3 rows.
I can see a "column span" proprety, but I cant see a "row span".

Is there any solution for this?

Antonio
think you have to toy with an expression that will solve your rowspan.

in a cell you can add the expression  "</td><td rowspan='3'>" for example.
you end up with an "empty" colum, but you can change that with styling I presume.


The only problem is that next 2 rows will be moved one position to the right, desaligning the table.
Rowspan needs that cells in the same position in the following rows dont exist at all.
Another solution?
One can hide the following cells with  style="display:none;"

Try

<!DOCTYPE html>
<html>
<body>
 
<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td>Savings January</th>
  </tr>
  <tr>
    <td>February</td>
    <td rowspan="3">90$</td>
    <td>Savings February</th>
  </tr>
  <tr>
    <td>March</td>
    <td style="display:none;"></td>
    <td>Savings March</th>
  </tr>
  <tr>
    <td>April</td>
    <td style="display:none;"></td>
    <td>Savings April</th>
  </tr>
  <tr>
    <td>May</td>
    <td></td>
    <td>Savings May</th>
  </tr>
  <tr>
    <td>June</td>
    <td>$80</td>
    <td>Savings June</th>
  </tr>
</table>
 
</body>
</html>