Grid "Search" Toolbar default option lost focus when GridEvents/OnToolbarClick is present

[Ernesto Leyva]

Hi there,

Grid "Search" Toolbar default option lost focus on your first time click (it works on the second click) when GridEvents/OnToolbarClick is present as you can see below:

        <EjsGrid DataSource="@(new List<object>{ new {Inventor="Test", NumberofPatentFamilies=1 } })" Toolbar="@(new List<string>() { "Search" })" AllowPaging="true" TValue="object">

            <GridEvents OnToolbarClick="@ToolbarClickHandler" TValue="object"></GridEvents>

            <GridColumns>

                <GridColumn Field="Inventor" IsPrimaryKey="true" HeaderText="Inventor Name" Width="180"></GridColumn>

                <GridColumn Field="NumberofPatentFamilies" HeaderText="Number of Patent Families" TextAlign="TextAlign.Right" Width="195"></GridColumn>

            </GridColumns>

        </EjsGrid>

@code{

protected void ToolbarClickHandler(ClickEventArgs e)

{

                    //NO CODE NEEDED

               }

}

Could you please correct!!!

Thanks

[Vignesh Natarajan]

Hi Ernesto,  

 

Thanks for contacting Syncfusion forum.  

 

Query: “Grid "Search" Toolbar default option lost focus on your first time click (it works on the second click) when GridEvents/OnToolbarClick is present as you can see below:” 

 

We are not able to reproduce the reported behavior at our end while preparing a sample using your code example in version 17.4.0.55. Bu the reported behavior might occur when we directly define the values to Grid property. So we suggest you to define the value using property binding.  

 

Refer the below code example.  

 

@using Syncfusion.EJ2.Blazor.Navigations 

  

<EjsGrid DataSource="@Data" Toolbar="@Toolbar" AllowPaging="true" TValue="object"> 

    <GridEvents OnToolbarClick="@ToolbarClickHandler" TValue="object"></GridEvents> 

    <GridColumns> 

        <GridColumn Field="Inventor" IsPrimaryKey="true" HeaderText="Inventor Name" Width="180"></GridColumn> 

        <GridColumn Field="NumberofPatentFamilies" HeaderText="Number of Patent Families" TextAlign="TextAlign.Right" Width="195"></GridColumn> 

    </GridColumns> 

</EjsGrid> 

  

@code{ 

    public List<string> Toolbar = new List<string>() { "Search" }; 

    public List<Object> Data = new List<object> { new { Inventor = "Test", NumberofPatentFamilies = 1 } }; 

    protected void ToolbarClickHandler(ClickEventArgs e) 

    { 

        //NO CODE NEEDED 

    } 

} 

 

  

If you are still facing the issue, kindly share the issue reproducible sample along with your Syncfusion Nuget package and Script files version.  

 

Regards, 

Vignesh Natarajan. 

[Ernesto Leyva]

Hi,

I have in my code property binding and the issue occurs.

Could you please send me an example?

Thanks

[Ernesto Leyva]

Hi team,

Any updates on this?

Thanks

[Ernesto Leyva]

Hi team,

Any updates on this?
I'm still facing this issue, I would like to get a demo working on 17.4.0.55.

Thanks

[Vignesh Natarajan]

Hi Ernesto,  

 

Sorry for the delay in getting back to you.  

 

Query: “I have in my code property binding and the issue occurs” 

 

We are able to reproduce the reported issue at our end. We suggest you to overcome the reported issue by using the below solution to define the width for toolbar item.  

 

protected void ToolbarClickHandler(ClickEventArgs e)   {        if (e.Item.TooltipText == "Search")       {           e.Item.Width = "auto";       }   }

 

 

Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan. 

[Ernesto Leyva]

Awesome,

It worked :)

Thanks

[Vignesh Natarajan]

Hi Ernesto,  

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.