How to set custom column width in Blazor wasm app

Answered
Brent Minder asked on April 1, 2024

Can you point me to a sample for setting custom column widths for a Blazor wasm app?

3 answers

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster April 2, 2024

Hello, Brent!
 
Thank you for reaching out to us.
 
Kindly note that it is possible to set a custom column or row width in Flexmonster report using tableSizes report property. This way, you can set the width in pixels for every column identifying it by index or a specific tuple.
For example, in the following JSFiddle the columns remain its custom width even if sorted: https://jsfiddle.net/flexmonster/w4cfqj0k/.
 
In Blazor, tableSizes can be configured as follows:

Report report = new Report()
{
  // other report properties here
TableSizes = new TableSizes { Columns = new ColumnSize[] { new ColumnSize { Tuple = new string[] { "country.[australia]" }, Measure = new MeasureObject { UniqueName = "Price", Aggregation = "sum" }, Width = 321 } } } };

By the link, you can find a big code snippet with all Flexmonster report configurations in Blazor: https://www.flexmonster.com/doc/configure-report-in-blazor/#example.
 
Please note that it is possible to configure the necessary column widths from the UI, and then save the report.json file and copy-paste the tuples and sizes in pixels to your Blazor app.
This generic approach can be applicable to other report configurations as well. Please check out the video for more details: https://www.youtube.com/watch?v=GC4C7XLjccc.
 
Hope you will find our answer helpful.
Please let us know if you have any further questions.
 
Kind regards,
Solomiia

Public
Brent Minder April 2, 2024

Hi Solomiia,
That worked, and I did want to use the indeces instead of names. Here's a partial for anyone else:

Flexmonster.Blazor.Report report = new()
{
TableSizes = new TableSizes
{
Columns = new ColumnSize[] {
new ColumnSize {Idx = 0, Width = 100 }, // Col 1
new ColumnSize {Idx = 1, Width = 200 }, // Col 2
new ColumnSize {Idx = 2, Width = 225 }, // Col 3
}
}
};

Thanks,
Brent
 

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster April 3, 2024

Hello, Brent!

Thank you for your feedback and for sharing the code snippet with us.

We are glad to hear everything works well now.

Do not hesitate to contact us in case of any other questions.

Best regards,
Solomiia

Please login or Register to Submit Answer