Combo Box component

Radzen.Blazor Components
1

Hi,

Do you have a Combo Box component?

(User can type their own text, or select from a list / data grid)

If not, is one being planned?

Also - it could be an auto-suggest field, but with a data grid that drops down, instead of a simple list.

Thanks,
Mike

2

Hi @sys_mike

Try RadzenDropDown

Theres also the RadzenDropDownDatagrid. This offers greater possibilites.

Regards

Paul

3

Hi Paul,

Thanks for your quick response.

I see the DropDown component has an "Editable" option. That will work nicely for lists with a single column.

But for DropDownDataGrid, there does not seem to be a similar option to type your own value. Let me know if there's a way to do that.

Thanks,
Mike

4

Hi Mike

I think that would be difficult.

With the DropDown, you are dealing with one column. Whereas the DataGridDropDown could be any number of columns. It is usually linked to actual data records as opposed to just a list of values.

Hope this makes sense.

Paul

5

ValueTemplate can be used in DropDownDataGrid in the same way as in DropDown:

image
image1920×1080 166 KB

image
image1920×1080 132 KB

6

Closer...

But you don't get the suggestions appearing in the drop down grid when you type in the text box (in the value template).

Mike

7

Such functionality is not available in the DropDown as well - both components have separate search input. Looks like you are looking for AutoComplete component.

8

Yes, autocomplete, but with a grid to drop down, not just a list of 1 column.

Is this possible? I wasn't sure which component might be best to start from.

Thanks,
Mike

9

There isn’t such component however you can create a custom one using TextBox and Popup component:

10

I really need a component that does this as well -- i.e. autocomplete with a drop-down grid. It needs to allow any text to be entered (even if not in the drop-down list) and allow items in the drop down to be selected using the down arrow.

I don't quite see how to do that with the Popup component but maybe there's a way.

I'm currently using SyncFusion, which has a component that does this, but I'd really like to get rid of SF because their licensing is ridiculous. This is the one component that's keeping me from switching to Radzen completely.

11

In the same way as our demo however instead DataList you can define DataGrid. I'll push an example later today.

12

Here is the demo:

popup-dg

1 Like
13

Thanks. That's pretty close to what I need, but my users will complain if they can't select items by using the down-arrow. Switching to the mouse to select an item is awkward.

Ideally it should work just like the Autocomplete component works now, but show the data in a grid.

14

I've extended the example with keyboard navigation - you can modify it in the way you need.

15

Thanks again. That looks like it will work, but the demo is currently throwing an error intermittently when you use the arrow keys, especially when there are a lot of results.

Try scrolling down a bit with the arrow keys and then back up a few times. It throws this error:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] - Unhandled exception rendering component: Cannot read properties of undefined (reading 'classList')

Scrolling up or down with the arrow keys also randomly skips over rows.

16

I was able to reproduce both problems - we will provide fix in our next update before the end of the week.

17

Beautiful! Really nice work.

This is a game changer for some of my forms.

Thanks!
Mike

18

Do you have a preferred way to "debounce" the input?

For example, I don't want to hit my database if they type 3 characters quickly. That would be 3 hits to the database when only 1 is needed.

Also, when backspacing to delete characters, I may want to wait 1 second before refreshing the list.

I can probably handle a minimum character requirement, so it only starts searching if they enter 2 or more characters.

Thanks,
Mike