Grid: TypeError: Cannot read property 'querySelector' of null when navigating away from page

[HappyCamper]

Hi There,

I have a list view page where I have a datagrid control which shows records from a custom model.  One of the columns I use a custom template with a a ref which navigates to the details page:

<GridColumn Field=Name HeaderText="Name" Visible="true" IsPrimaryKey="false" Width="130">

                                    <Template>

                                        @{

                                            var sunit = (context as Tenant.Unit);

                                            if (sunit.Type.ImageUri != null)

                                            {

                                                <img src="@sunit.Type.ImageUri" title="@sunit.Type.Name" width="16" height="16" />

                                            }

                                            <a rel='nofollow' href="@_Globals.CurrentAddressbarCompanyID/Unit/@sunit.Id">@sunit.Name</a>

                                        }

                                    </Template>

</GridColumn>

When I click on the a ref to navigate to my details page, I get the following error when loading the new page.

Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: Cannot read property 'querySelector' of null

TypeError: Cannot read property 'querySelector' of null

    at Object.focus (https://localhost:44349/_content/Syncfusion.Blazor/scripts/sf-grid-580d73.min.js:1:118297)

    at https://localhost:44349/_framework/blazor.server.js:8:31619

    at new Promise (<anonymous>)

    at e.beginInvokeJSFromDotNet (https://localhost:44349/_framework/blazor.server.js:8:31587)

    at https://localhost:44349/_framework/blazor.server.js:1:20052

    at Array.forEach (<anonymous>)

    at e.invokeClientMethod (https://localhost:44349/_framework/blazor.server.js:1:20022)

    at e.processIncomingData (https://localhost:44349/_framework/blazor.server.js:1:18006)

    at e.connection.onreceive (https://localhost:44349/_framework/blazor.server.js:1:11091)

    at WebSocket.i.onmessage (https://localhost:44349/_framework/blazor.server.js:1:39007)

Microsoft.JSInterop.JSException: Cannot read property 'querySelector' of null

TypeError: Cannot read property 'querySelector' of null

    at Object.focus (https://localhost:44349/_content/Syncfusion.Blazor/scripts/sf-grid-580d73.min.js:1:118297)

    at https://localhost:44349/_framework/blazor.server.js:8:31619

    at new Promise (<anonymous>)

    at e.beginInvokeJSFromDotNet (https://localhost:44349/_framework/blazor.server.js:8:31587)

    at https://localhost:44349/_framework/blazor.server.js:1:20052

    at Array.forEach (<anonymous>)

    at e.invokeClientMethod (https://localhost:44349/_framework/blazor.server.js:1:20022)

    at e.processIncomingData (https://localhost:44349/_framework/blazor.server.js:1:18006)

    at e.connection.onreceive (https://localhost:44349/_framework/blazor.server.js:1:11091)

    at WebSocket.i.onmessage (https://localhost:44349/_framework/blazor.server.js:1:39007)

   at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args)

   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)

   at Syncfusion.Blazor.SfBaseComponent.InvokeMethod(String methodName, Object[] methodParams)

   at Syncfusion.Blazor.Grids.Internal.FocusHandler`1.Focus(String rowUid, String cellUid, String action)

   at Syncfusion.Blazor.Grids.Internal.FocusHandler`1.Refresh(Row`1 Row, Cell`1 Cell)

   at Syncfusion.Blazor.Grids.Internal.GridCell`1.<BuildRenderTree>b__0_0(MouseEventArgs e)

   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit 'oW203vxsxOd9IqDd4vPESlf42ctt9E_WJvQCf_WkvfA'.

Microsoft.JSInterop.JSException: Cannot read property 'querySelector' of null

TypeError: Cannot read property 'querySelector' of null

    at Object.focus (https://localhost:44349/_content/Syncfusion.Blazor/scripts/sf-grid-580d73.min.js:1:118297)

    at https://localhost:44349/_framework/blazor.server.js:8:31619

    at new Promise (<anonymous>)

    at e.beginInvokeJSFromDotNet (https://localhost:44349/_framework/blazor.server.js:8:31587)

    at https://localhost:44349/_framework/blazor.server.js:1:20052

    at Array.forEach (<anonymous>)

    at e.invokeClientMethod (https://localhost:44349/_framework/blazor.server.js:1:20022)

    at e.processIncomingData (https://localhost:44349/_framework/blazor.server.js:1:18006)

    at e.connection.onreceive (https://localhost:44349/_framework/blazor.server.js:1:11091)

    at WebSocket.i.onmessage (https://localhost:44349/_framework/blazor.server.js:1:39007)

   at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args)

   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)

   at Syncfusion.Blazor.SfBaseComponent.InvokeMethod(String methodName, Object[] methodParams)

   at Syncfusion.Blazor.Grids.Internal.FocusHandler`1.Focus(String rowUid, String cellUid, String action)

   at Syncfusion.Blazor.Grids.Internal.FocusHandler`1.Refresh(Row`1 Row, Cell`1 Cell)

   at Syncfusion.Blazor.Grids.Internal.GridCell`1.<BuildRenderTree>b__0_0(MouseEventArgs e)

   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

I've tested navigating to the page directly in the address bar, where I then don't get the error, which means that somehow the grid isn't being disposed of properly, or something weird.  Any thoughts on what might be the issue?

[HappyCamper]

It seems that it is the EnableHover=true property that's causing the errors.  Any idea how the hover needs to be handled so that it does not produce this error?

[Vignesh Natarajan]

Hi Rudi,  

 

Greetings from Syncfusion support  

 

Query: “When I click on the a ref to navigate to my details page, I get the following error when loading the new page.” 

 

We are able to reproduce the reproduce the reported issue at our end when trying to navigate to another page from Grid Column using template. We suggest you to overcome the reported issue by using stop propagation for templatecolumn onclick function. Refer the below code example. 

 

   

<SfGrid DataSource="@Employees" EnableHover="true" AllowSelection="false"> 

    <GridColumns> 

        <GridColumn Field=@nameof(EmployeeData.EmployeeID) TextAlign="TextAlign.Center" HeaderText="Employee ID" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="120"></GridColumn> 

        <GridColumn Field="Name" HeaderText="Name" Visible="true" IsPrimaryKey="false" Width="130"> 

            <Template> 

                @{ 

                    var sunit = (context as EmployeeData); 

                    <div @onclick:stopPropagation="true"> 

                        <a rel='nofollow' rel='nofollow' href=@GetRef(sunit)>@sunit.Name</a> 

                    </div> 

                } 

            </Template> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

 

 

Kindly download the sample which we have prepared from below  

Sample: https://www.syncfusion.com/downloads/support/forum/156223/ze/BlazorApp1-1299215810  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[HappyCamper]

Thanks very much, this worked.

[Vignesh Natarajan]

Hi Rudi,  

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution.  

Kindly get back to us if you have further queries.  

Regards,
Vignesh Natarajan 

[Caleb]

Thank you. This has helped me too.

[Vignesh Natarajan]

Hi Caleb,  

Thanks for the update.  

We are glad to hear that you have resolved your using above solution. 

Kindly get back to us if you have further queries. 

Regards,
Vignesh Natarajan