Pricing changes are coming in January. Contact our Sales team to secure the current price for your desired license.

How do i customize slicehierarchy in blazor wasm

Answered
Brent Minder asked on April 3, 2024

I've successfully right-aligned some headers, but the slice hierarchies don't seem to fall into the "header" type. How can i access the months hightlighted in the attached files?
It's a blazor wasm app if it matters.
Thanks,
Brent
 

Attachments:
Q2a.png
Q2b.png

5 answers

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster April 4, 2024

Hello, Brent!
 
Thank you for reaching out to us and for the provided screenshots.
 
Kindly note that the .align-right class in styles should have an !important mark to override our default styles, so the resulting CSS selector and rule should look as follows:

#fm-pivot-view .fm-grid-view div.fm-cell.align-right {
  text-align: right !important;
}

We have prepared a JSFiddle sample for reference: https://jsfiddle.net/flexmonster/k2tojLys/.
 
You can also make more precise CSS selectors and use them instead of customizeCell function, e.g., styles for the second header line:

#fm-pivot-view .fm-grid-view div.fm-header.fm-level-1 {
  text-align: right !important;
}

 
Please let us know if it helps.
Looking forward to hearing from you.
 
Kind regards,
Solomiia

Public
Brent Minder April 4, 2024

Hi Solomiia,
Thank you!
Your sample worked for some of the cells. In your example, how would you right align the "Totals" and "Total Sum of Price" without using this code which right-aligns the row slice hierarchy in our example (q2c.png)?

/* this code also right aligns stuff on the left grid that i need to leave left aligned*/
#fm-pivot-view .fm-grid-view div.fm-header.fm-level-1 {
text-align: right !important;
}

Attachments:
Q2c.png

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster April 5, 2024

Hello, Brent!
 
Thank you for your swift response.
 
Kindly note that you can apply styles to the totals column headers using div.fm-header-c.fm-total-c CSS selector.
I have updated the example for illustration: https://jsfiddle.net/flexmonster/47f51sdu/.
You are welcome to open the Dev console in your browser and check our grid structure for the class that can be overridden to apply styles to the necessary cells.
 
Hope it helps.
 
Kind regards,
Solomiia

Public
Brent Minder April 9, 2024

That took care of it.
Thanks Solomiia!

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster April 10, 2024

Hello, Brent!

Thank you for your feedback.

We are glad to hear everyting works well now.

Feel free to reach out to us if any other questions arise.

Kind regards,
Solomiia

Please login or Register to Submit Answer