Get Free Trial
Get Free Trial

Blazor WebAssembly app: save/load "grid layout"

posted on March 23rd, 2023

Answered
Anton Ihnatenko asked on March 23, 2023

We want to display different reports via FlexmonsterComponent in Blazor WebAssembly application. We want to allow users to customize the grid, e.g. hide/display columns, move rows to columns, change formats or highlight cells based on their values. Each user may have their own "grid layout", or they may want to reset it and get the "default layout" which is created/updated by our manager.

Please, advise how to correctly save/load "grid layout" (but not the data displayed in the grid at the moment) of FlexmonsterComponent, and then how to load new data into the component without changing the layout which the user currently has.

9 answers

Public
Nadia Khodakivska Nadia Khodakivska ⋅ Flexmonster ⋅ March 24, 2023

Hello Anton,

Thank you for reaching out to us.

All the configurations are stored in a report. A report is a JSON object that can be saved and restored later.
Saving the report
Flexmonster provides several ways to get the report from the component:

  1. getReport() API call
  2. save() API call to save a report to the server or to the local file system
  3. click the Save button on the Toolbar

Check the following page to find more information: https://www.flexmonster.com/doc/save-and-restore-report/#save-report
Setting the report:
Next, you can set the report for the component using these methods:

  1. setReport() API call
  2. open() API call to select a file from the local file system
  3. load() API call to load a file from a URL
  4. on the Toolbar, the user can hover on the Open button and choose Local or Remote report.

Here you can find a detailed guide: https://www.flexmonster.com/doc/save-and-restore-report/#restore-report
Loading new data into the component:
You can use the updateData() API call that allows updating data for the report without cleaning the report. You are welcome to check our documentation for more details: https://www.flexmonster.com/api/updatedata/

Please let us know if it works for you. Feel free to contact us if other questions arise.

Kind regards,
Nadia

Public
Anton Ihnatenko ⋅ March 29, 2023

Hello Nadia,
Thank you for a quick reply. In order to save the layout, I call GetReport method like this:

private FlexmonsterComponent _flex;
...
Report report = await _flex.GetReport(new GetReportOptions
{
  WithDefaults = true,
  WithGlobals = true
});

which fails with the following exception:
Uncaught (in promise) Error: Microsoft.JSInterop.JSException: An exception occurred executing JS interop: The JSON value could not be converted to System.String. Path: $.options.grid.drillThroughMaxRows | LineNumber: 0 | BytePositionInLine: 3876.. See InnerException for more details.
---> System.Text.Json.JsonException: The JSON value could not be converted to System.String. Path: $.options.grid.drillThroughMaxRows | LineNumber: 0 | BytePositionInLine: 3876.
---> System.InvalidOperationException: Cannot get the value of a token type 'Number' as a string.
at System.Text.Json.Utf8JsonReader.GetString()
at System.Text.Json.Serialization.Converters.StringConverter.Read(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options)
at System.Text.Json.Serialization.Metadata.JsonPropertyInfo`1[[System.String, System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].ReadJsonAndSetMember(Object obj, ReadStack& state, Utf8JsonReader& reader)
at System.Text.Json.Serialization.Converters.ObjectDefaultConverter`1[[Flexmonster.Blazor.GridOptions, Flexmonster.Blazor, Version=2.9.2.0, Culture=neutral, PublicKeyToken=null]].OnTryRead(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, GridOptions& value)
at System.Text.Json.Serialization.JsonConverter`1[[Flexmonster.Blazor.GridOptions, Flexmonster.Blazor, Version=2.9.2.0, Culture=neutral, PublicKeyToken=null]].TryRead(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, GridOptions& value)
at System.Text.Json.Serialization.Metadata.JsonPropertyInfo`1[[Flexmonster.Blazor.GridOptions, Flexmonster.Blazor, Version=2.9.2.0, Culture=neutral, PublicKeyToken=null]].ReadJsonAndSetMember(Object obj, ReadStack& state, Utf8JsonReader& reader)
at System.Text.Json.Serialization.Converters.ObjectDefaultConverter`1[[Flexmonster.Blazor.Options, Flexmonster.Blazor, Version=2.9.2.0, Culture=neutral, PublicKeyToken=null]].OnTryRead(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, Options& value)
at System.Text.Json.Serialization.JsonConverter`1[[Flexmonster.Blazor.Options, Flexmonster.Blazor, Version=2.9.2.0, Culture=neutral, PublicKeyToken=null]].TryRead(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, Options& value)
at System.Text.Json.Serialization.Metadata.JsonPropertyInfo`1[[Flexmonster.Blazor.Options, Flexmonster.Blazor, Version=2.9.2.0, Culture=neutral, PublicKeyToken=null]].ReadJsonAndSetMember(Object obj, ReadStack& state, Utf8JsonReader& reader)
at System.Text.Json.Serialization.Converters.ObjectDefaultConverter`1[[Flexmonster.Blazor.Report, Flexmonster.Blazor, Version=2.9.2.0, Culture=neutral, PublicKeyToken=null]].OnTryRead(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, Report& value)
at System.Text.Json.Serialization.JsonConverter`1[[Flexmonster.Blazor.Report, Flexmonster.Blazor, Version=2.9.2.0, Culture=neutral, PublicKeyToken=null]].TryRead(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, Report& value)
at System.Text.Json.Serialization.JsonConverter`1[[Flexmonster.Blazor.Report, Flexmonster.Blazor, Version=2.9.2.0, Culture=neutral, PublicKeyToken=null]].ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
--- End of inner exception stack trace ---
at System.Text.Json.ThrowHelper.ReThrowWithPath(ReadStack& state, Utf8JsonReader& reader, Exception ex)
at System.Text.Json.Serialization.JsonConverter`1[[Flexmonster.Blazor.Report, Flexmonster.Blazor, Version=2.9.2.0, Culture=neutral, PublicKeyToken=null]].ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
at System.Text.Json.Serialization.JsonConverter`1[[Flexmonster.Blazor.Report, Flexmonster.Blazor, Version=2.9.2.0, Culture=neutral, PublicKeyToken=null]].ReadCoreAsObject(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
at System.Text.Json.JsonSerializer.ReadCore[Object](JsonConverter jsonConverter, Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
at System.Text.Json.JsonSerializer.Read[Object](Utf8JsonReader& reader, JsonTypeInfo jsonTypeInfo)
at System.Text.Json.JsonSerializer.Deserialize(Utf8JsonReader& reader, Type returnType, JsonSerializerOptions options)
at Microsoft.JSInterop.JSRuntime.EndInvokeJS(Int64 taskId, Boolean succeeded, Utf8JsonReader& jsonReader)
--- End of inner exception stack trace ---
at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Flexmonster.Blazor.Report, Flexmonster.Blazor, Version=2.9.2.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
at Flexmonster.Blazor.FlexmonsterBase.GetReport(GetReportOptions getReportOptions)
 
Please advise.

Public
Nadia Khodakivska Nadia Khodakivska ⋅ Flexmonster ⋅ March 30, 2023

Hi Anton,

Thank you for reporting the issue.

The mentioned exception is caused by the wrong type of drillThroughMaxRows property of the report.grid.options object. Our team will provide a fix with our minor release with the ETA April 17th. We will notify you about the release. 
We recommend removing the drillThroughMaxRows property from your reports if it is present and using the getReport method without WithDefaults = true as a temporary workaround.

You are welcome to contact us in case other questions arise.

Kind regards,
Nadia

Public
Anton Ihnatenko ⋅ April 6, 2023

Hi Nadia,
We have tried your workaround and were able to save layout without

WithDefaults = true

. However, if I change any column size, and then try to save a layout, it fails with the following exception:
Uncaught Error Error: Microsoft.JSInterop.JSException: An exception occurred executing JS interop: The JSON value could not be converted to Flexmonster.Blazor.ColumnSize. Path: $.tableSizes.columns | LineNumber: 0 | BytePositionInLine: 3085.. See InnerException for more details.
---> System.Text.Json.JsonException: The JSON value could not be converted to Flexmonster.Blazor.ColumnSize. Path: $.tableSizes.columns
Please advise.

Public
Nadia Khodakivska Nadia Khodakivska ⋅ Flexmonster ⋅ April 6, 2023

Hi Anton,

Thank you for the feedback and for reporting the exception.

Our team will also provide the fix with our minor release with the ETA April 17th. We will notify you about the release. 

Feel free to reach out to us in case other questions arise.

Kind regards,
Nadia

Public
Nadia Khodakivska Nadia Khodakivska ⋅ Flexmonster ⋅ April 18, 2023

Hello, Anton,

We are glad to inform you that the issue with types in the Report class was fixed.

This fix is available in the 2.9.49 version of Flexmonster: https://www.flexmonster.com/release-notes/version-2-9-49/ 

You are welcome to update the component. Here is our guide on upgrading to the latest version: https://www.flexmonster.com/doc/updating-to-the-latest-version/

Please tell us if the fix works. Looking forward to hearing from you.

Kind regards,
Nadia

Public
Nadia Khodakivska Nadia Khodakivska ⋅ Flexmonster ⋅ April 25, 2023

Hello Anton,

Hope you are doing well.

We were wondering if you had a chance to check the fix. Please let us know if it works for you.

Looking forward to your feedback.

Kind regards,
Nadia

Public
Anton Ihnatenko ⋅ April 27, 2023

Hello Nadia,
We have updated to version 2.9.49 and were able to load/save grid layouts.
Thank you for the support.

Public
Nadia Khodakivska Nadia Khodakivska ⋅ Flexmonster ⋅ April 27, 2023

Hello,

Thank you for the feedback.

We are glad to hear that the fix works for you.

You are welcome to contact us in case other questions arise.

Kind regards,
Nadia

Please login or Register to Submit Answer