Search function on an SFGrid embedded as a component in SfDialog throws error

[geoff brooks]

I have created a component (called CelebritySelect) that displays an SfGrid within an SfDialog component.

My Package version is 18.3.0.42

When I add Search functionality by using the string provided in the demo (Toolbar="@(new List<string>() { "Search" })") an error occurs

The error occurs when I press 'Enter' after entering some search criteria

Another SfGrid component implemented with the same search functionality WITHOUT the RowSelected GridEvent and NOT within a dialog works as expected

CelebritySelect code:

    <div class="col-lg-12 control-section">

        <div class="content-wrapper">

            <div class="row">

                <SfGrid DataSource="@displayCelebrityList" AllowPaging="true" AllowSelection="true" Toolbar="@(new List<string>() { "Search" })">

                    <GridSelectionSettings Type="SelectionType.Single"></GridSelectionSettings>

                    <GridPageSettings PageCount="10"></GridPageSettings>

                   @* <GridEvents RowSelected="RowSelected" TValue="DisplayCelebrity"></GridEvents>*@

                    <GridColumns>

                        <GridColumn Field=@nameof(DisplayCelebrity.Id) Type="ColumnType.Number" Visible="false"></GridColumn>

                        <GridColumn Field=@nameof(DisplayCelebrity.Name) HeaderText="Name" TextAlign="TextAlign.Left" Width="150"></GridColumn>

                        <GridColumn Field=@nameof(DisplayCelebrity.Cost) HeaderText=" Cost" Type="ColumnType.Number" Width="100"></GridColumn>

                        <GridColumn Field=@nameof(DisplayCelebrity.LevelName) HeaderText=" Level" TextAlign="TextAlign.Left" Width="100"></GridColumn>

                        <GridColumn Field=@nameof(DisplayCelebrity.CategoryString) HeaderText="Categories" TextAlign="TextAlign.Left" Width="150"></GridColumn>

                        <GridColumn Field=@nameof(DisplayCelebrity.LastEvent) HeaderText="Last Event" Type="ColumnType.Date" TextAlign="TextAlign.Left" Width="120"></GridColumn>

                    </GridColumns>

                </SfGrid>

            </div>

        </div>

    </div>

The SFDialog instance:

<SfDialog Target="#target" Width="700px" Height="500px" ShowCloseIcon="true" @bind-Visible="Visibility">

    <DialogTemplates>

        <Header> some header </Header>

        <Content>

            <CelebritySelect OnRowSelectedCallback="@SetValue" ShowAvailableOnly="true" userModel="userModel" />

        </Content>

    </DialogTemplates>

    <DialogButtons>

        <DialogButton IsPrimary="true" Content="Save" OnClick="@AddCelebrityToRoster" />

    </DialogButtons>

</SfDialog>

The error text (from Edge):

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]

      Unhandled exception rendering component: Event 1085 is already tracked

      Error: Event 1085 is already tracked

          at e.update (https://localhost:5001/_framework/blazor.webassembly.js:1:42587)

          at e.setListener (https://localhost:5001/_framework/blazor.webassembly.js:1:40180)

          at e.applyAttribute (https://localhost:5001/_framework/blazor.webassembly.js:1:36469)

          at e.applyEdits (https://localhost:5001/_framework/blazor.webassembly.js:1:32895)

          at e.updateComponent (https://localhost:5001/_framework/blazor.webassembly.js:1:31876)

          at Object.t.renderBatch (https://localhost:5001/_framework/blazor.webassembly.js:1:11924)

          at Object.window.Blazor._internal.renderBatch (https://localhost:5001/_framework/blazor.webassembly.js:1:61510)

          at Object.w [as invokeJSFromDotNet] (https://localhost:5001/_framework/blazor.webassembly.js:1:64032)

          at _mono_wasm_invoke_js_blazor (https://localhost:5001/_framework/dotnet.5.0.0-rc.2.20475.5.js:1:190396)

          at wasm_invoke_iiiiii (<anonymous>:wasm-function[5611]:0xdda74)

Microsoft.JSInterop.JSException: Event 1085 is already tracked

Error: Event 1085 is already tracked

    at e.update (https://localhost:5001/_framework/blazor.webassembly.js:1:42587)

    at e.setListener (https://localhost:5001/_framework/blazor.webassembly.js:1:40180)

    at e.applyAttribute (https://localhost:5001/_framework/blazor.webassembly.js:1:36469)

    at e.applyEdits (https://localhost:5001/_framework/blazor.webassembly.js:1:32895)

    at e.updateComponent (https://localhost:5001/_framework/blazor.webassembly.js:1:31876)

    at Object.t.renderBatch (https://localhost:5001/_framework/blazor.webassembly.js:1:11924)

    at Object.window.Blazor._internal.renderBatch (https://localhost:5001/_framework/blazor.webassembly.js:1:61510)

    at Object.w [as invokeJSFromDotNet] (https://localhost:5001/_framework/blazor.webassembly.js:1:64032)

    at _mono_wasm_invoke_js_blazor (https://localhost:5001/_framework/dotnet.5.0.0-rc.2.20475.5.js:1:190396)

    at wasm_invoke_iiiiii (<anonymous>:wasm-function[5611]:0xdda74)

   at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[Int32,RenderBatch,Object,Object](String identifier, Int32 arg0, RenderBatch arg1, Object arg2, Int64 targetInstanceId)

   at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[Int32,RenderBatch,Object](String identifier, Int32 arg0, RenderBatch arg1)

   at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.UpdateDisplayAsync(RenderBatch& batch)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

[Gunasekar Kuppusamy]

Hi Geoff , 

 

Greetings from Syncfusion support.  

 

We have validated your query and can reproduce from our end. When pressing the Enter key in the search box, the dialog also focused. So the issue was reproduced. We suggest that you set `PreventFocus` to true in the 'Opened' event of dialog. 

 

We have also prepared a sample with your shared code snippets 

Sample: https://www.syncfusion.com/downloads/support/directtrac/159332/ze/DialogWithGrid1701418188 

 

Please let us know if the solution helps,  

 

Regards, 

Gunasekar K 

[Sabitha Rajamani]

From: geoff brooks
Sent: Tuesday, November 3, 2020 2:25 PM
To: Syncfusion Support
 

  

Thanks, I'll try that. 

 

I get this problem when trying to access the example after logging in: 

\ 

 

Access Denied 

You don’t have permission to access this file. The reason may be: 

• The incident associated with this file is not tied to the account you used to log in. To Logout use this  link.
• Your enterprise portal admin has not allowed you to access other portal users’ incidents. Ask admin to change the support visibility in their Syncfusion profile.

If you feel this information is wrong and you need to download this file, please contact us. 

[Indrajith Srinivasan]

Hi Geoff, 

 

Good day to you, 

 

We have also shared the changes to be done, to resolve the reported issue. Below is the code block changes in the shared sample. 

 

 

@using Syncfusion.Blazor.Grids; 

@using Syncfusion.Blazor.Popups; 

 

<div class="col-lg-12 control-section"> 

    <div class="content-wrapper"> 

        <div class="row"> 

            

        </div> 

    </div> 

</div> 

 

The SFDialog instance: 

 

<SfDialog Target="#target" Width="700px" Height="500px" ShowCloseIcon="true" @bind-Visible="Visibility"> 

    <DialogEvents Opened="OnOpen"></DialogEvents> 

    <DialogTemplates> 

        <Header> some header </Header> 

        <Content> 

            @*<CelebritySelect OnRowSelectedCallback="@SetValue" ShowAvailableOnly="true" userModel="userModel" />*@ 

            <SfGrid DataSource="@displayCelebrityList" AllowPaging="true" AllowSelection="true" Toolbar="@(new List<string>() { "Search" })"> 

                <GridSelectionSettings Type="SelectionType.Single"></GridSelectionSettings> 

                <GridPageSettings PageCount="10"></GridPageSettings> 

                @* <GridEvents RowSelected="RowSelected" TValue="DisplayCelebrity"></GridEvents>*@ 

                <GridColumns> 

                    <GridColumn Field=@nameof(DisplayCelebrity.Id) Type="ColumnType.Number" Visible="false"></GridColumn> 

                    <GridColumn Field=@nameof(DisplayCelebrity.Name) HeaderText="Name" TextAlign="TextAlign.Left" Width="150"></GridColumn> 

                    <GridColumn Field=@nameof(DisplayCelebrity.Cost) HeaderText=" Cost" Type="ColumnType.Number" Width="100"></GridColumn> 

                    <GridColumn Field=@nameof(DisplayCelebrity.LevelName) HeaderText=" Level" TextAlign="TextAlign.Left" Width="100"></GridColumn> 

                    <GridColumn Field=@nameof(DisplayCelebrity.CategoryString) HeaderText="Categories" TextAlign="TextAlign.Left" Width="150"></GridColumn> 

                    <GridColumn Field=@nameof(DisplayCelebrity.LastEvent) HeaderText="Last Event" Type="ColumnType.Date" TextAlign="TextAlign.Left" Width="120"></GridColumn> 

                </GridColumns> 

            </SfGrid>s 

        </Content> 

    </DialogTemplates> 

    <DialogButtons> 

        @*<DialogButton IsPrimary="true" Content="Save" OnClick="@AddCelebrityToRoster" />*@ 

    </DialogButtons> 

</SfDialog> 

 

 

 

@code { 

 

    public List<DisplayCelebrity> displayCelebrityList { get; set; } 

 

 

    private bool Visibility { get; set; } = true; 

 

    protected override void OnInitialized() 

    { 

        displayCelebrityList = Enumerable.Range(1, 75).Select(x => new DisplayCelebrity() 

        { 

            Id = 1000, 

            Name = "name", 

            Cost = 100, 

            LevelName = "low", 

            CategoryString = "category1", 

            LastEvent = "event1" 

 

 

        }).ToList(); 

    } 

 

    private void OnOpen(OpenEventArgs args) 

    { 

        args.PreventFocus = true; 

    } 

 

 

    public class DisplayCelebrity 

    { 

        public int? Id { get; set; } 

        public string Name { get; set; } 

        public int? Cost { get; set; } 

        public string LevelName { get; set; } 

        public string CategoryString { get; set; } 

        public string LastEvent { get; set; } 

    } 

} 

 

Please get back to us if you face any difficulties, 

 

Regards, 

Indrajith