Empty datagrid with identity fails

fellowshipdevs · July 20, 2021, 8:37pm

Hi. First of all, this is an amazing tool that is already helping me a lot. There's only this one use case that is stopping me from using it fully.

My use case is this: I have a textbox, a button, and a data grid. The datagrid is populated based on a custom function that returns google maps autocomplete addresses, based on the input of the textbox. This means that the datagrid starts empty. When I do it without default security, it works fine. When I add security, it fails. What could the issue be? See my setup below.

Page events:

Textbox properties:

Button click event:

Datagrid properties:

This is the code in my page:

[Inject]
        HttpClient Http { get; set; }

        public class MatchedSubstring
        {
            public int length { get; set; }
            public int offset { get; set; }
        }

        public class MainTextMatchedSubstring
        {
            public int length { get; set; }
            public int offset { get; set; }
        }

        public class StructuredFormatting
        {
            public string main_text { get; set; }
            public List<MainTextMatchedSubstring> main_text_matched_substrings { get; set; }
            public string secondary_text { get; set; }
        }

        public class Term
        {
            public int offset { get; set; }
            public string value { get; set; }
        }

        public class Prediction
        {
            public string description { get; set; }
            public List<MatchedSubstring> matched_substrings { get; set; }
            public string place_id { get; set; }
            public string reference { get; set; }
            public StructuredFormatting structured_formatting { get; set; }
            public List<Term> terms { get; set; }
            public List<string> types { get; set; }
        }

        public class ApiResult
        {
            public IEnumerable<Prediction> predictions { get; set; }
            public string status { get; set; }
        }


        public async Task<ApiResult> GetAddressSuggestions(string searchTerm)
        {
            string encodedSearchTerm = System.Net.WebUtility.UrlEncode(searchTerm);
            var response = await Http.SendAsync(new HttpRequestMessage(HttpMethod.Get, new Uri($"{UriHelper.BaseUri}api/address/autocompleteAddress?searchTerm={encodedSearchTerm}")));

            return await response.ReadAsync<ApiResult>();
        }

Finally, this is it working when I don't have security set up.

However, when I set up default security, I get this:

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Object reference not set to an instance of an object.
System.NullReferenceException: Object reference not set to an instance of an object.
  at BookingApp.Client.Pages.AddBusiness.<BuildRenderTree>b__0_0 (Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder2) [0x001f5] in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent (System.Int32 sequence, Microsoft.AspNetCore.Components.RenderFragment fragment) <0x2f2caa0 + 0x0001e> in <filename unknown>:0 
  at Radzen.Blazor.RadzenContent.BuildRenderTree (Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder) <0x34171e0 + 0x000fa> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__6_0 (Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder builder) <0x2e01128 + 0x0001a> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch (Microsoft.AspNetCore.Components.Rendering.RenderBatchBuilder batchBuilder, Microsoft.AspNetCore.Components.RenderFragment renderFragment) <0x2e00a80 + 0x00062> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch (Microsoft.AspNetCore.Components.Rendering.RenderQueueEntry renderQueueEntry) <0x2e00480 + 0x0004c> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue () <0x2dff9b8 + 0x00098> in <filename unknown>:0 
f.printErr @ blazor.webassembly.js:1
f.preRun.push.window.Blazor._internal.dotNetCriticalError @ blazor.webassembly.js:1
_mono_wasm_invoke_js_unmarshalled @ dotnet.3.2.0.js:1
do_icall @ 00755c3a:0x10f924
do_icall_wrapper @ 00755c3a:0x50b6a
interp_exec_method @ 00755c3a:0x2588e
interp_runtime_invoke @ 00755c3a:0xf7391
mono_jit_runtime_invoke @ 00755c3a:0xddb3d
do_runtime_invoke @ 00755c3a:0x3ba85
mono_runtime_invoke_checked @ 00755c3a:0x96a2
mono_runtime_try_invoke_array @ 00755c3a:0x66c26
ves_icall_InternalInvoke @ 00755c3a:0xb44ff
ves_icall_InternalInvoke_raw @ 00755c3a:0xb3ffd
do_icall @ 00755c3a:0x10f8b1
do_icall_wrapper @ 00755c3a:0x50b6a
interp_exec_method @ 00755c3a:0x2588e
interp_runtime_invoke @ 00755c3a:0xf7391
mono_jit_runtime_invoke @ 00755c3a:0xddb3d
do_runtime_invoke @ 00755c3a:0x3ba85
mono_runtime_try_invoke @ 00755c3a:0xcfdb
mono_runtime_invoke @ 00755c3a:0x44b39
mono_wasm_invoke_method @ 00755c3a:0xca6a7
Module._mono_wasm_invoke_method @ dotnet.3.2.0.js:1
call_method @ dotnet.3.2.0.js:1
(anonymous) @ dotnet.3.2.0.js:1
beginInvokeDotNetFromJS @ blazor.webassembly.js:1
s @ blazor.webassembly.js:1
e.invokeMethodAsync @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
r @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
r @ blazor.webassembly.js:1
d @ blazor.webassembly.js:1
f @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
e.onGlobalEvent @ blazor.webassembly.js:1
Show 14 more frames
blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Out of memory
System.OutOfMemoryException: Out of memory
  at System.Buffers.TlsOverPerCoreLockedStacksArrayPool`1[T].Rent (System.Int32 minimumLength) <0x2f215d0 + 0x00164> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.ArrayBuilder`1[T].GrowBuffer (System.Int32 desiredCapacity) <0x2f21398 + 0x00034> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.ArrayBuilder`1[T].Append (T& item) <0x2f21198 + 0x00022> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.RemoveOldFrame (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldFrameIndex) <0x340cea0 + 0x00124> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldStartIndex, System.Int32 oldEndIndexExcl, System.Int32 newStartIndex, System.Int32 newEndIndexExcl) <0x2e0a650 + 0x004de> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff (Microsoft.AspNetCore.Components.RenderTree.Renderer renderer, Microsoft.AspNetCore.Components.Rendering.RenderBatchBuilder batchBuilder, System.Int32 componentId, Microsoft.AspNetCore.Components.RenderTree.ArrayRange`1[T] oldTree, Microsoft.AspNetCore.Components.RenderTree.ArrayRange`1[T] newTree) <0x2e09728 + 0x00094> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch (Microsoft.AspNetCore.Components.Rendering.RenderBatchBuilder batchBuilder, Microsoft.AspNetCore.Components.RenderFragment renderFragment) <0x2e00a80 + 0x000aa> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch (Microsoft.AspNetCore.Components.Rendering.RenderQueueEntry renderQueueEntry) <0x2e00480 + 0x0004c> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue () <0x2dff9b8 + 0x00098> in <filename unknown>:0 
f.printErr @ blazor.webassembly.js:1
f.preRun.push.window.Blazor._internal.dotNetCriticalError @ blazor.webassembly.js:1
_mono_wasm_invoke_js_unmarshalled @ dotnet.3.2.0.js:1
do_icall @ 00755c3a:0x10f924
do_icall_wrapper @ 00755c3a:0x50b6a
interp_exec_method @ 00755c3a:0x2588e
interp_runtime_invoke @ 00755c3a:0xf7391
mono_jit_runtime_invoke @ 00755c3a:0xddb3d
do_runtime_invoke @ 00755c3a:0x3ba85
mono_runtime_try_invoke @ 00755c3a:0xcfdb
mono_runtime_invoke @ 00755c3a:0x44b39
mono_wasm_invoke_method @ 00755c3a:0xca6a7
Module._mono_wasm_invoke_method @ dotnet.3.2.0.js:1
call_method @ dotnet.3.2.0.js:1
set_task_result @ dotnet.3.2.0.js:1
(anonymous) @ dotnet.3.2.0.js:1
Promise.then (async)
js_to_mono_obj @ dotnet.3.2.0.js:1
_mono_wasm_invoke_js_with_args @ dotnet.3.2.0.js:1
do_icall @ 00755c3a:0x10f8b1
do_icall_wrapper @ 00755c3a:0x50b6a
interp_exec_method @ 00755c3a:0x2588e
interp_runtime_invoke @ 00755c3a:0xf7391
mono_jit_runtime_invoke @ 00755c3a:0xddb3d
do_runtime_invoke @ 00755c3a:0x3ba85
mono_runtime_try_invoke @ 00755c3a:0xcfdb
try_invoke_perform_wait_callback @ 00755c3a:0xb62e0
worker_callback @ 00755c3a:0x9a7a3
fire_tp_callback @ 00755c3a:0x105481
mono_background_exec @ 00755c3a:0xeb5ee
Module._mono_background_exec @ dotnet.3.2.0.js:1
pump_message @ dotnet.3.2.0.js:1
setTimeout (async)
_schedule_background_exec @ dotnet.3.2.0.js:1
mono_threads_schedule_background_job @ 00755c3a:0x14dbd
ves_icall_System_Threading_ThreadPool_RequestWorkerThread @ 00755c3a:0xa0025
ves_icall_System_Threading_ThreadPool_RequestWorkerThread_raw @ 00755c3a:0x9fecf
do_icall @ 00755c3a:0x10f790
do_icall_wrapper @ 00755c3a:0x50b6a
interp_exec_method @ 00755c3a:0x2588e
interp_runtime_invoke @ 00755c3a:0xf7391
mono_jit_runtime_invoke @ 00755c3a:0xddb3d
do_runtime_invoke @ 00755c3a:0x3ba85
mono_runtime_try_invoke @ 00755c3a:0xcfdb
mono_runtime_invoke @ 00755c3a:0x44b39
mono_wasm_invoke_method @ 00755c3a:0xca6a7
Module._mono_wasm_invoke_method @ dotnet.3.2.0.js:1
call_method @ dotnet.3.2.0.js:1
(anonymous) @ dotnet.3.2.0.js:1
beginInvokeDotNetFromJS @ blazor.webassembly.js:1
s @ blazor.webassembly.js:1
e.invokeMethodAsync @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
t.dispatchEvent @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
e.onGlobalEvent @ blazor.webassembly.js:1
blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: No element is currently associated with component 134
      Error: No element is currently associated with component 134
          at e.updateComponent (https://localhost:5001/_framework/blazor.webassembly.js:1:12412)
          at Object.t.renderBatch (https://localhost:5001/_framework/blazor.webassembly.js:1:1704)
          at Object.window.Blazor._internal.renderBatch (https://localhost:5001/_framework/blazor.webassembly.js:1:34848)
          at _mono_wasm_invoke_js_unmarshalled (https://localhost:5001/_framework/wasm/dotnet.3.2.0.js:1:172099)
          at wasm_invoke_iiiiii (<anonymous>:wasm-function[3160]:0x9b33d)
          at icall_trampoline_dispatch (<anonymous>:wasm-function[5777]:0xfe711)
          at mono_wasm_interp_to_native_trampoline (<anonymous>:wasm-function[4607]:0xca81d)
          at ves_pinvoke_method (<anonymous>:wasm-function[3209]:0x9cd40)
          at interp_exec_method (<anonymous>:wasm-function[1120]:0x2598d)
          at interp_runtime_invoke (<anonymous>:wasm-function[5655]:0xf7391)
Microsoft.JSInterop.JSException: No element is currently associated with component 134
Error: No element is currently associated with component 134
    at e.updateComponent (https://localhost:5001/_framework/blazor.webassembly.js:1:12412)
    at Object.t.renderBatch (https://localhost:5001/_framework/blazor.webassembly.js:1:1704)
    at Object.window.Blazor._internal.renderBatch (https://localhost:5001/_framework/blazor.webassembly.js:1:34848)
    at _mono_wasm_invoke_js_unmarshalled (https://localhost:5001/_framework/wasm/dotnet.3.2.0.js:1:172099)
    at wasm_invoke_iiiiii (<anonymous>:wasm-function[3160]:0x9b33d)
    at icall_trampoline_dispatch (<anonymous>:wasm-function[5777]:0xfe711)
    at mono_wasm_interp_to_native_trampoline (<anonymous>:wasm-function[4607]:0xca81d)
    at ves_pinvoke_method (<anonymous>:wasm-function[3209]:0x9cd40)
    at interp_exec_method (<anonymous>:wasm-function[1120]:0x2598d)
    at interp_runtime_invoke (<anonymous>:wasm-function[5655]:0xf7391)
  at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,T2,TResult] (System.String identifier, T0 arg0, T1 arg1, T2 arg2) <0x3203c08 + 0x00046> in <filename unknown>:0 
  at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,TResult] (System.String identifier, T0 arg0, T1 arg1) <0x3203b28 + 0x00014> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.UpdateDisplayAsync (Microsoft.AspNetCore.Components.RenderTree.RenderBatch& batch) <0x3203a30 + 0x0001e> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue () <0x2dff9b8 + 0x000f2> in <filename unknown>:0 
f.printErr @ blazor.webassembly.js:1
f.preRun.push.window.Blazor._internal.dotNetCriticalError @ blazor.webassembly.js:1
_mono_wasm_invoke_js_unmarshalled @ dotnet.3.2.0.js:1
do_icall @ 00755c3a:0x10f924
do_icall_wrapper @ 00755c3a:0x50b6a
interp_exec_method @ 00755c3a:0x2588e
interp_runtime_invoke @ 00755c3a:0xf7391
mono_jit_runtime_invoke @ 00755c3a:0xddb3d
do_runtime_invoke @ 00755c3a:0x3ba85
mono_runtime_try_invoke @ 00755c3a:0xcfdb
mono_runtime_invoke @ 00755c3a:0x44b39
mono_wasm_invoke_method @ 00755c3a:0xca6a7
Module._mono_wasm_invoke_method @ dotnet.3.2.0.js:1
call_method @ dotnet.3.2.0.js:1
set_task_result @ dotnet.3.2.0.js:1
(anonymous) @ dotnet.3.2.0.js:1
Promise.then (async)
js_to_mono_obj @ dotnet.3.2.0.js:1
_mono_wasm_invoke_js_with_args @ dotnet.3.2.0.js:1
do_icall @ 00755c3a:0x10f8b1
do_icall_wrapper @ 00755c3a:0x50b6a
interp_exec_method @ 00755c3a:0x2588e
interp_runtime_invoke @ 00755c3a:0xf7391
mono_jit_runtime_invoke @ 00755c3a:0xddb3d
do_runtime_invoke @ 00755c3a:0x3ba85
mono_runtime_try_invoke @ 00755c3a:0xcfdb
try_invoke_perform_wait_callback @ 00755c3a:0xb62e0
worker_callback @ 00755c3a:0x9a7a3
fire_tp_callback @ 00755c3a:0x105481
mono_background_exec @ 00755c3a:0xeb5ee
Module._mono_background_exec @ dotnet.3.2.0.js:1
pump_message @ dotnet.3.2.0.js:1
setTimeout (async)
_schedule_background_exec @ dotnet.3.2.0.js:1
mono_threads_schedule_background_job @ 00755c3a:0x14dbd
ves_icall_System_Threading_ThreadPool_RequestWorkerThread @ 00755c3a:0xa0025
ves_icall_System_Threading_ThreadPool_RequestWorkerThread_raw @ 00755c3a:0x9fecf
do_icall @ 00755c3a:0x10f790
do_icall_wrapper @ 00755c3a:0x50b6a
interp_exec_method @ 00755c3a:0x2588e
interp_runtime_invoke @ 00755c3a:0xf7391
mono_jit_runtime_invoke @ 00755c3a:0xddb3d
do_runtime_invoke @ 00755c3a:0x3ba85
mono_runtime_try_invoke @ 00755c3a:0xcfdb
mono_runtime_invoke @ 00755c3a:0x44b39
mono_wasm_invoke_method @ 00755c3a:0xca6a7
Module._mono_wasm_invoke_method @ dotnet.3.2.0.js:1
call_method @ dotnet.3.2.0.js:1
(anonymous) @ dotnet.3.2.0.js:1
beginInvokeDotNetFromJS @ blazor.webassembly.js:1
s @ blazor.webassembly.js:1
e.invokeMethodAsync @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
t.dispatchEvent @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
e.onGlobalEvent @ blazor.webassembly.js:1
blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: No element is currently associated with component 132
      Error: No element is currently associated with component 132
          at e.updateComponent (https://localhost:5001/_framework/blazor.webassembly.js:1:12412)
          at Object.t.renderBatch (https://localhost:5001/_framework/blazor.webassembly.js:1:1704)
          at Object.window.Blazor._internal.renderBatch (https://localhost:5001/_framework/blazor.webassembly.js:1:34848)
          at _mono_wasm_invoke_js_unmarshalled (https://localhost:5001/_framework/wasm/dotnet.3.2.0.js:1:172099)
          at wasm_invoke_iiiiii (<anonymous>:wasm-function[3160]:0x9b33d)
          at icall_trampoline_dispatch (<anonymous>:wasm-function[5777]:0xfe711)
          at mono_wasm_interp_to_native_trampoline (<anonymous>:wasm-function[4607]:0xca81d)
          at ves_pinvoke_method (<anonymous>:wasm-function[3209]:0x9cd40)
          at interp_exec_method (<anonymous>:wasm-function[1120]:0x2598d)
          at interp_runtime_invoke (<anonymous>:wasm-function[5655]:0xf7391)
Microsoft.JSInterop.JSException: No element is currently associated with component 132
Error: No element is currently associated with component 132
    at e.updateComponent (https://localhost:5001/_framework/blazor.webassembly.js:1:12412)
    at Object.t.renderBatch (https://localhost:5001/_framework/blazor.webassembly.js:1:1704)
    at Object.window.Blazor._internal.renderBatch (https://localhost:5001/_framework/blazor.webassembly.js:1:34848)
    at _mono_wasm_invoke_js_unmarshalled (https://localhost:5001/_framework/wasm/dotnet.3.2.0.js:1:172099)
    at wasm_invoke_iiiiii (<anonymous>:wasm-function[3160]:0x9b33d)
    at icall_trampoline_dispatch (<anonymous>:wasm-function[5777]:0xfe711)
    at mono_wasm_interp_to_native_trampoline (<anonymous>:wasm-function[4607]:0xca81d)
    at ves_pinvoke_method (<anonymous>:wasm-function[3209]:0x9cd40)
    at interp_exec_method (<anonymous>:wasm-function[1120]:0x2598d)
    at interp_runtime_invoke (<anonymous>:wasm-function[5655]:0xf7391)
  at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,T2,TResult] (System.String identifier, T0 arg0, T1 arg1, T2 arg2) <0x3203c08 + 0x00046> in <filename unknown>:0 
  at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,TResult] (System.String identifier, T0 arg0, T1 arg1) <0x3203b28 + 0x00014> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.UpdateDisplayAsync (Microsoft.AspNetCore.Components.RenderTree.RenderBatch& batch) <0x3203a30 + 0x0001e> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue () <0x2dff9b8 + 0x000f2> in <filename unknown>:0

enchev · July 21, 2021, 5:05am

You can run the application with Visual Studio to check using the debugger where the exception will brake.

fellowshipdevs · July 21, 2021, 4:06pm

Thanks for your response. I managed to pinpoint where the failure occurs.

It seems that when security is added, the page tries to load the datagrid source BEFORE the Load() method runs (which sets the datagrid source variable). See the below GIFs of when it works (when there isn't security configured) and when it doesn't.

Without security (when it works):

The Load() method runs first, sets up myApiResult page property.
The binding of the datagrid then triggers the "get" of myApiResult.
All is well.

See gif here.
See video here.

With security (when it doesn't work):

OnInitializedAsync() runs first, for the security part.
During the running of await Security.InitializeAsync(AuthenticationStateProvider);, the "get" is triggered for all 3 page properties. For 2 of them it doesn't matter, but for the myApiResult, it fails (because it's an object as opposed to a string or int?).
The app fails.
The Load() runs, but the app already failed.
The binding of the datagrid then triggers the "get" of myApiResult, but the app already failed.

See gif here.
See video here.

Let me know your thoughts.

enchev · July 21, 2021, 4:30pm

You might need to check this article:

fellowshipdevs · July 21, 2021, 4:57pm

Hi. Thanks for the response.

I've managed to make it navigate to the page without error, and was able to click the button and trigger the HTTP request without issue. I did this by adding "?" to the page "set property" and the "then" after the button click (see images).

After button click:

Page load:

However, when I add the Data reference to the datagrid (see image), it fails again the same way.

fellowshipdevs · July 21, 2021, 6:30pm

Furthermore, I managed to make it work by manually adding "?" on the ".razor" file (see image).

However, I want to be able to do this in Radzen. If add "?" to the datagrid Data property (i.e. Data = ${myApiResult?.predictions}), then the ".razor" file fails and looks like this:

What is the syntax for nullable data for the grid? Or is there any other way to make it work?

fellowshipdevs · July 22, 2021, 2:35pm

Apologies, I'm at a loss on this one. This use case is a critical part of the app.

The solution I mentioned above won't work, as Radzen will overwrite any code in the .razor file when I run it via the app.

I would appreciate any help.

enchev · July 22, 2021, 2:46pm

All you need to do is to use null conditional operators in property binding expressions in Radzen. For example: ${myresult?.mydata}

fellowshipdevs · July 22, 2021, 3:06pm

I put above the result of what happens when I do that in the datagrid "Data" property. It doesn't work. Here is again for your reference:

enchev · July 22, 2021, 3:25pm

I can see that there is a problem in the designer however the application will work for sure in runtime.

fellowshipdevs · July 22, 2021, 3:35pm

It doesn't. It goes from TItem="BookingApp.Pages.AddBusinessComponent.Prediction" to TItem="BookingApp.Pages.AddBusinessComponent".

Before:

After:

enchev · July 22, 2021, 3:40pm

Are you using the latest version of Radzen? We had such problem in the past with our designer inferring page type instead data item type however we believe that it was fixed.

fellowshipdevs · July 22, 2021, 3:56pm

Yes. I have 2.61.6, which is the latest in the download page.

enchev · July 22, 2021, 4:21pm

I was able to reproduce the problem and we we will do our best to include fix in the next update. In the meantime you can specify TItem as attribute to correct type:

fellowshipdevs · July 22, 2021, 4:42pm

Thanks! That took us a step closer, but there's still an issue.

I added the "?" to the data + the TItem attribute, and the errors in the .razor file disappeared. However, it was still giving me a build error in both in Radzen and Visual Studio (see Image #1).

It wasn't obvious to me where the error was (doouble-clicking it took me to the .razor file, which shows no errors as you can see). So I enlisted the help of github, and was able to see the difference before and after adding the "?". It seems that in the ".designer.cs" file, it still changes the type to the component (see Image #2).

What are your thoughts?

Image #1

Image #2

enchev · July 22, 2021, 4:49pm

The only workaround I can offer is to add this page file to application ignore list and fix the code directly.
Other possible solution is to not use null conditional operators for Data but add expression to Visible property checking if the object is null:

fellowshipdevs · July 22, 2021, 4:52pm

Sounds good, I'll try both. Thanks for your help! Greatly appreciated.