Hi Randy,
Greetings from Syncfusion.
Query: How to set focus to Grid Toolbar Seach box on Grid Load
We have validated your query and you want to focus the Grid search box at initial rendering. Here, we have prepared a sample based your requirement. We have called an interop function in the DataBound event of the Grid to achieve this requirement. Find the below code snippets and sample for your reference.
|
[Index.razor]
@using Syncfusion.Blazor.Grids
@inject IJSRuntime JSRuntime
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" Toolbar=@(new List<string>() { "Search" })>
<GridEvents DataBound="DataBoundHandler" TValue="Order"></GridEvents>
<GridColumns>
. . .
</GridColumns>
</SfGrid>
@code{
SfGrid<Order> Grid;
. . .
public async Task DataBoundHandler()
{
await JSRuntime.InvokeVoidAsync("focus"); // called interop function for focus the searchbox at initial load
}
}
|
|
[Interop.js]
function focus() {
document.getElementsByClassName("e-control e-textbox e-lib e-input")[0].focus();
}
|
|
[_Host.cshtml]
<head>
. . .
<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" />
<script src="~/Interop.js"></script>
</head> |
Please let us know if you have any concerns.
Regards,
Rahul
