What is the best way to "access" grid components such as the Search text box, and page-size control?

[DrGriff]

What is the recommended way to "access" components in the grid? For my purposes, I am thinking about the "Search" textbox, and the "Page Size" text box? I am also specifically interested in Blazor Server architecture.

Why?

• To put keyboard focus in the element. Many of our users prefer keyboard-entry over using their mouse, so for us it is important that when a page first loads, the cursor is placed in the most appropriate control for any given scenario: we may choose to focus the page-size control, or the search control on a specific grid, or some other control on the page.

• To access text in the element. We may choose to use any data that the user has entered in the search box elsewhere on the page.

My first thought would be to generate a Grid and assign it an 'ElementReference', see Capture references to elements. We may pass that to JS-interop and get JS to crawl through the DOM to find the appropriate item. An alternative approach may be for the Grid to expose an 'ElementReference' for each of these sub-components, but I think this would require this functionality to be written.

What is likely to be the best approach?

[gustavnavar]

GridBlazor 1.3.6 allows to set focus on the change page and search input element from c# code.

You can reference the grid component:

    <GridComponent @ref="_gridComponent" T="Order" Grid="@_grid" />

Then you can set focus to the change page input element as follows:

    await _gridComponent.SetFocus(_gridComponent.PageSizeInput);

The same is valid for the search element:

    await _gridComponent.SetFocus(_gridComponent.SearchComponent.SearchInput);