Microsoft.JSInterop.JSException: Failed to execute 'querySelector' on 'Element': '#' is not a valid selector.

[Aleksandrs]

Hello!

I'm started to recieve error after updating to new version (18.2.0.44)

when trying to add or edit record in the grid.

[2020-07-10T06:36:00.000Z] Error: Microsoft.JSInterop.JSException: Failed to execute 'querySelector' on 'Element': '#' is not a valid selector.

Error: Failed to execute 'querySelector' on 'Element': '#' is not a valid selector.

    at Object.focusCell (https://localhost:44353/_content/Syncfusion.Blazor/scripts/sf-grid-b58c64.min.js:1:119460)

    at https://localhost:44353/_framework/blazor.server.js:8:31421

    at new Promise (<anonymous>)

    at e.beginInvokeJSFromDotNet (https://localhost:44353/_framework/blazor.server.js:8:31390)

    at https://localhost:44353/_framework/blazor.server.js:1:19202

    at Array.forEach (<anonymous>)

    at e.invokeClientMethod (https://localhost:44353/_framework/blazor.server.js:1:19173)

    at e.processIncomingData (https://localhost:44353/_framework/blazor.server.js:1:17165)

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

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

   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.Edit`1.FocusEditableCell()

   at Syncfusion.Blazor.Grids.Internal.NormalEdit`1.OnAfterRenderAsync(Boolean firstRender)

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

Attachment: code_5a9935ef.zip

[Vignesh Natarajan]

Hi Aleksandrs, 

 

Greetings from Syncfusion support.  

 

Query: “I'm started to recieve error after updating to new version (18.2.0.44) when trying to add or edit record in the grid.” 

 

From your query we understand that you are facing issue while perform CRUD operation in Grid after upgrading to our latest version. We have analyzed your code example and found that you defined the EditTemplate to Template column without the Field property. Hence the reported issue has occurred. So kindly define the Field property of GridColumn to resolve the reported issue.  

 

In our latest release (2020 Volume 2) we have some breaking changes in the our Grid control. So kindly modify the Value as @bind-Value for the components inside the EditTemplate to save the changes properly in Grid. 

 

Refer the below code example.  

 

<SfGrid ID="WorkoutTasksGrid" @ref="WorkoutTasksGrid" DataSource="@Orders" AllowSorting="true" AllowTextWrap="true" AllowPaging="false" EnableHover="true" AllowResizing="true" Toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Cancel", "Update"})"> 

    <GridEditSettings AllowAdding="true" AllowDeleting="true" ShowDeleteConfirmDialog="true" AllowEditing="true" AllowEditOnDblClick="true" Mode="EditMode.Normal"> 

    </GridEditSettings> 

    <GridSortSettings> 

        <GridSortColumns> 

            <GridSortColumn Field="@nameof(WorkoutTaskModel.Order)" Direction="SortDirection.Ascending"></GridSortColumn> 

        </GridSortColumns> 

    </GridSortSettings> 

    <GridEvents OnActionBegin="OnBegin" TValue="WorkoutTaskModel"></GridEvents> 

    <GridColumns> 

        @*<GridColumn Field="Exercise.Name" AllowEditing="false" HeaderText="Name"></GridColumn>*@ 

        <GridColumn Field="@nameof(WorkoutTaskModel.ExerciseId)" HeaderText="Exercise"> 

            <Template> 

                @{ 

                    var val = ""; 

                    var exId = (context as WorkoutTaskModel).ExerciseId;  // display its corresponding  text with column template 

                    if (exId != null) 

                    { 

                        val = ExercisesList.FirstOrDefault(x => x.Code == exId)?.Name; 

                    } 

  

                } 

                <div>@val</div> 

            </Template> 

            <EditTemplate>                

                <SfDropDownList ID="ExerciseId" @ref="Ddl" @bind-Value="@((context as WorkoutTaskModel).ExerciseId)" DataSource="@ExercisesList" Placeholder="Exercise" 

                                FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains" AllowFiltering="true"> 

                    <DropDownListFieldSettings Value="Code" Text="Name"></DropDownListFieldSettings> 

                </SfDropDownList> 

            </EditTemplate> 

        </GridColumn> 

        <GridColumn Field="@nameof(WorkoutTaskModel.Id)" Visible="false"></GridColumn> 

        <GridColumn Field="@nameof(WorkoutTaskModel.tempId)" IsPrimaryKey="true" Visible="false"></GridColumn> 

    </GridColumns> 

</SfGrid> 

 

 

Please find the details regarding the breaking changes from below  

 

https://blazor.syncfusion.com/documentation/release-notes/18.2.44/?type=breaking-changes 

 

https://blazor.syncfusion.com/documentation/release-notes/18.2.44/?type=all#grid  

 

Kindly get back to us if you have further queries.       

 

Regards, 

Vignesh Natarajan