How to set focus to RadzenDropDown

Radzen.Blazor Components
1

Hi.
I'm trying to setFocus to a RadzenDropDown, but whatever I try I'm not able to get the reference:
I'm using RadzenDD in many places in my pages, but in this case I have to ensure user has selected a value, and if not focus him to that particular component. By the way I already have other dropdowns in the same page, but they don't have a mandatory value for my db.

<RadzenDropDown AllowClear="true" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
    Data=@folderList @bind-Value=@Resource.IdResource Placeholder="Select Folder..." TValue="string"
    TextProperty="folderList.EntryDescri" ValueProperty="folderList.IdEntry" Name="rFolder" @ref="rFolder"
    Change=@(args => SelectDdl(args, "EntryFolder")) Class="w-100" />


...


@code {

    RadzenDropDown<string> rFolder;

...

            if (String.IsNullOrEmpty(Resource.FolderName))
            {
                await _js.ToastrError("Select Resource Folder");
                rFolder.Element.FocusAsync();
                return;
            }

I'm stuck on the declaration of the DropDown in the page.

2

What seems to be the problem? Can you elaborate?

3

Project does not compile:

image
image835×379 52.7 KB

it seems that I'm declaring the reference incorrectly.

4

This is the correct way to declare a reference. Does the project actually build? Visual Studio sometimes is slow to catch up.

5

Yes. If If remove all the Setfocus logic it works like a charm.
Do you have an example with a reference to the DropDown that is called in the code for something like this. The examples are very clear in many things, but not for this kind of things.

6

Here is a minimal working example:

<RadzenDropDown TValue="string" @ref=@dropDown Data=@(new [] {"Foo", "Bar" }) />

@code {
    RadzenDropDown<string> dropDown;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await dropDown.Element.FocusAsync();
        }
    }
}
1 Like
7

Thanks.
Got it. The problem was the double quotes:

@ref="rFolder" should have been @ref=rFolder