Overriding row indentation on expandable rows

Apliqo UX
1

Expandable rows are great in UX, but sometimes we need to override the indentation on the row header column, esp if there are too many levels of C-Level rollup nodes. There is a way to “Disable Indentation” but we can’t do this without turning off “Disable Drill”.

image

I was experimenting with a few ways to do this and discovered:
(1) using the handsontable “htLeft” classname doesn’t work consistently on all the rows (or using a custom class that uses “text-align left”)
image

(2) I can’t find a way to specify the first column (using columnFormat) with a specific classname as using the row dimension header label doesn’t work. However, using rowFormat on all the rows does work.

image

(3) Using padding-left overrides the indentation.

image

image

Wanted to share this in case anyone finds this useful

1 Like
2

This is “interesting” but I’m not sure we woudl want to include it as a standard feature (e.g. expand/collapse without indentation) as the indentation is a pretty useful visual guide as to what the child/parent/ancestor relationships are.

Would anyone else be interested in this as a standard feature??

Probably the best way to implement as a standard feature would just be to expose an additional property number of spaces per indentation level (I think the default we are using is 2) and make this editable. Setting to 0 would then also achieve the desired result.

3

I would probably vote this to be a standard features, it is a way to provide more real estate to users.

Also, I think what @wwang 's screenshot is very neat even without any indent.

4

I agree the indentation is pretty useful and visually explains the relationship but in the reporting layer this is often needed.

I’d also vote for it.

5

Just got across this situation, to take out the indentation for the dim on the rows but keep the expand/collapse of consols…

Recently, I found out that you can now use the column number to apply formatting!
So on this same example and class, just use column “0”, which is the very first one, and it will work as well!

“columnFormat”: {
“0”: [
{
“className”: “font-align-left”
}
]

Sharing this update as can be handy for quite a few occasions!

5 Likes
6

@rmazziero @cw-ch-scott

Can I do 4 column in one go?

I have tried this but it’s not working

“columnFormat”: {
“0,2,3,4”: [
{
“className”: “font-align-left”
}
]

Thanks

7

Look at the examples.

If column or row name (or index) is omitted then the formatting rule applies to all rows or columns.

E.g. the code below will apply left alignment to all columns.

“columnFormat”: {
    “”: [
        {
            “className”: “font-align-left”
        }
    ]
}

Otherwise the rows or columns need to be listed individually as an array within the json code.
E.g. the code below will apply left alignment to both the Actual and Budget columns, but no other columns.

“columnFormat”: {
    “Actual”: [
        {
            “className”: “font-align-left”
        }
    ],
    “Budget”: [
        {
            “className”: “font-align-left”
        }
    ]
}

You can’t specify “0,2,3,4”: []
This is telling to code to apply the format to a column named “0,2,3,4” which doesn’t exist in the table.

1 Like
8

@cw-ch-scott Thanks! just because I have stacked dimensions so doesn’t want to hard-code the column name per particular dimension instead of column by column.
Anyway thank you very much for your help!

9

Hi,

you can still reference multiple columns by order number, without the column name, just do it separated, syntax as below:

"columnFormat": {
      "0": [
        {
          "className": "font-align-left"
        }
      ],
      "1": [
        {
          "className": "font-align-left"
        }
      ],
      "2": [
        {
          "className": "font-align-left"
        }
      ],
      "3": [
        {
          "className": "font-align-left"
        }
      ]
}

This approach will still work, if the column name change depending on filters, or other factors…

1 Like
10

Thanks @rmazziero. I guess it’s only way for now :slight_smile:

11

Want to bring back this topic…

I am looking for a way to align the text to the left but considering the + Rollup symbol, aligning all text on the same way, instead of being just to the left… as the N levels and the Consols end up misaligning…
This works quite nicely on TM1Web:
image

So I almost done it, noticed that there is a “leaf” css class for N level… so overriding the leaf class to have more padding that the others… it is looking like this:

image
image257×630 90 KB

BUT… for some reason, note that some N level accounts on the rows does not have this class, not sure why… ?!?
In this case only a few accounts are not aligning…
image

Is there a better way to identify when the row element is N? or another way to apply this left alignment considering the rollup symbols into it?

I understand it is a detail, but would look better this way, I am getting this requests from Clients and this works on TM1Web.

Thanks!