DataGrid In Line Edit - Focus On EditTemplate Items

Radzen.Blazor Components
1

Hello, new to Radzen and front-end web in general, so please forgive any Blazor or JS ignorance in my question. Been enjoying the DataGrid so far, but finally pushing into territory where my lack of understanding is surely hampering me.

Take the DataGrid inline editing example. Bottom line is that when user clicks the pencil button to edit, I'd like to set the focus to my leftmost column's EditTemplate-activated control. My use case will be a RadzenTextBox in leftmost column unlike the demo example which has a dropdown, but for example purposes the ShipName demo column would suffice. How can I set the focus to ShipName RadzenTextBox when the edit button is clicked?

I tried setting @ref and private instance variable in CS code-behind file to try
FocusAsync(), but I assume that is erroring out on me because the RadzenTextBox in the EditTemplate doesn't actually exist when page is initialized?

I tried setting an id property on the RadzenTextBox in razor markup. I have found JS snippet that allows me to set focus to components by element id, and I tried to capture the RowEdit callback to invoke the JS, get the element by ID, then set focus, but the element is null. Maybe again because the RowEdit fires before the EditTemplate controls have been rendered and created for the page? \

Same problem of the EditTemplate controls not existing if I try the focus call right after the grid EditRow(order) call of course as well.

Any thoughts on how to achieve this by responding to the EditRow or RowEdit and setting focus on one of these EditTemplate controls would be appreciated.

Thanks

2

This is too early. When these events are fired the DataGrid will be re-rendered according to the new state (row is edited) and in OnAfterRenderAsync for example you will have instances of the components in EditTemplate.

3

Thank you, perfect! I was able to capture in OnAfterRenderAsync (I see I need to go do a more careful study of the Blazor component lifecycle).

In that method, I was able to revert back to the @ref approach, but have a couple small follow-up questions on focus and selection:

<EditTemplate Context="order">
    <RadzenTextBox @ref="shipNameTextBox" id="idForJSTest" 
    @bind-Value="order.ShipName" 
    Style="width:100%; display: block" Name="ShipName" />

then check the ref variable for null before focusing.

protected override Task OnAfterRenderAsync(bool firstRender)
      if (shipNameTextBox is not null)
      {
        shipNameTextBox.Element.FocusAsync();
      ...

  1. I assume grabbing the Element to do the FocusAsync() is still required since I didn't see a focus method on the RadzenTextBox itself?

  2. Also, is there a way to select the full text of the RadzenTextBox in C# when it is given focus programmatically?

Instead of the @ref.Element.FocusAsync() approach above, I've only been able to get it to both focus and highlight by using JSInterop that does both setSelectionRange(0,0) and Focus() using the ID attribute instead.

JS.InvokeVoidAsync("focusElement", "idForJSTest");
...


function focusElement(id) {
    if (document.getElementById(id) && document.getElementById(id).value) {
      element = document.getElementById(id);
      if (element.nodeName.toUpperCase() == "INPUT") {
        element.setSelectionRange(0, 0);
      }
      element.focus();
    }

Thanks