I'm wondering how I can two-way bind a TelerikDropDown selection to a complex model object rather than a primitive type such as an Id field. I'm trying to add a TelerikDropDownList to a page where the user can select a user-friendly name of an object and have that selection's value bound to the object itself rather than a primitive data type. For example:

Hello Joseph,

The following article explains the situation: https://docs.telerik.com/blazor-ui/knowledge-base/dropdowns-get-model and why only certain types can be bound to the Value parameter.

Regards,
Marin Bratanov
Progress Telerik

Hi Marin,

would adding a bindable "SelectedItem" (plus "OnSelectedItemChange(d)") interfere with the existing "Value" mechanism?
E.g. when using ObjectGraphDataAnnotationsValidator/ValidateComplexType, it would be convenient to bind directly to the complex type property. One cpuld still specify the ValueField to be used by the existing "Value" mechanism. Or would this somehow break something?

The edit model type:

Regards,

Kasimier Buchcik

Hi Kasimier,

I will try to cover each point in your question:

would adding a bindable "SelectedItem" (plus "OnSelectedItemChange(d)") interfere with the existing "Value" mechanism? - highly likely, binding two things to a similar field or a related field is likely to cause trouble.

@bind-SelectedItem="editModel.Item" AND   OnSelectedItemChanged="ev => SomeHandler(ev)" - this is not possible in Blazor - the <ParameterName>Changed event that provides two-way binding cannot be used together with two-way binding. This applies to all components, including the standard ones.

using a complex object type - If you use the current Value and point it to an identifier of the item, the OnChange or ValueChanged event we provide let you get the entire item from the data source (as per the article linked above), and so you can set it to the full custom object field in your view-model, which can, in turn, trigger any custom validation you have, or let you invoke any other business logic. At the same time the current value binding mechanism allows extremely flexible validation with various types (GUIDs are, by the way, very popular) and not just with strings, and also filtering of the data.

With all that said, binding to an entire model is actually possible and only requires just a few lines of code in an event handler, while the current mechanism has the benefit of flexible validation and allows filtering. Moreover, if you want to get entire complex models, you can use the grid single row selection feature. You could even put it in a window or other popup (such as an animation container) to show when needed only.

Regards,
Marin Bratanov
Progress Telerik

- highly likely, binding two things to a similar field or a related field is likely to cause trouble.

@bind-SelectedItem="editModel.Item" AND   OnSelectedItemChanged="ev => SomeHandler(ev)" - this is not possible in Blazor - the <ParameterName>Changed event that provides two-way binding cannot be used together with two-way binding. This applies to all components, including the standard ones.

binding to an entire model is actually possible and only requires just a few lines of code in an event handler

I wonder where the Blazor/Razor component world is headed to in the future. If the XAML/WPF/WinUI and e.g. the Angular world has a way of binding to complex objects but Blazor not... then something's wrong. Especially PWA's are not only about setting some GUIDs and sending those to the server. Working with object graphs should be common here.

I find it great that Telerik wrote the Blazor components from scratch and does not just wrap JS widgets. But I currently tend to think that Telerik's Blazor components inherited too much philosophy, restrictions and pecularities of its Kendo for jQuery implementation. 
Another thingy I just realized: one has to set TelerikDropDownList.DefaultText=" " (i.e. to at least a space) in order to have a way of clearing the selection. No "clear" button yet. This feels a lot like Kendo for jQuery.
I think such restrictions and peculiarities will become hard to work with because in Blazor one can't add missing functionality like in Kendo for jQuery.
May I ask which team is writing the components? Do Telerik's WPF/WinUI/Angular folks contribute to Blazor components?

My thoughts should be taken with a grain of salt, because I'm really new to Blazor + Telerik's Blazor components (3 weeks), so I may be missing the big picture and sound silly :-) 

Regards
Kasimier Buchcik

Hello Kasimier,

If entire model binding is provided, it will come with the suitable events. I would not speculate on their exact nature until a feature is implemented, as I can go really off the mark. Right now, the component does not carry a selected item reference in itself so it can pass it to a handler, it is up to the view model to fetch such a reference.

On the default text - an item with a default value is what "clears" the value in such a scenario, and DefaultText provides that. The DefaultText simply matches the default value of the Value field - for a string that's null. I am attaching a short video that shows how this works below, and also a project you can use to test this. So, you can think of the DefaultText as the TextField of a model you bind to, where the ValueField is the default value for its type. We hide this behind a simle string property so you don't have to stuff your data with padding.

On a clear button - a dropdown list does not have one by design, but a combo box or an autocomplete do as they can be text inputs. A dropdownlist is a <select> element equivalent, but with better design. So, clearing it is done through the DefaultText feature.

As for how Blazor should work - I would personally rather transmit an ID (number, string, guid, whatever my models and data use) than an entire model if I need a lookup. Of course, this is subject to personal preferences, existing APIs and coding approaches. Also, if you need an async operation, you need an async event anyway, plain MVVM binding can't achieve that (barring some fidgeting with nested components and using the ParametersSet event). So, there is no universally correct answer. The DropDownList is, first and foremost, a form component, and so it provides binding to primitive types and validation. Fetching an entire model from it is not in the immediate plans for out-of-the-box support, mainly because it is extremely easy through the OnChange event. As to whether comparing a web technology with desktop technologies is fair, or comparing to a framework that's a decade old, while blazor has been official for one month - that's also a question that does not have a definitive answer in my view.

Lastly, if entire model selection is so crucial to you that you can't wrap it in a component that steps on the dropdownlist for reuse - I'd suggest going with the grid single row selection.

Regards,
Marin Bratanov
Progress Telerik

If entire model binding is provided, it will come with the suitable events. I would not speculate on their exact nature until a feature is implemented, as I can go really off the mark

dropdown list does not have one by design

 if you need an async operation, you need an async event anyway, plain MVVM binding can't achieve that

Hello Kasimier,

To each question:

What will happen to Value and ValueField and the component type - That's one of the key problems - the component is generic based on the type of the Value field, so implementing an entire selected item will likely be either a breaking change, or will require specific configuration, or both. I can't answer this question more accurately because doing so would require that the research and implementation of such a feature are done.

The standard Blazor select not supporting entire models as values - we are following the same pattern as Microsoft right now - the standard form type controls bind to simple values. If other requests and usage patterns arise, things will be considered. I suppose that's one of the major differences between the Web and Desktop - with the Web we have standard approaches for forms and their values that date back many years, and those patterns shape things to this day.

Binding to complex objects and async events - my point in saying that is that at the moment, to get the model you need an event. TO fetch data from an endpoint, you need it too, for the majority of cases - so, the code you need to add to get models is not that much.

Designs in other technologies - It is their prerogative to choose to add one, each vendor, framework and style can choose their own design rules and guidelines.

Hacking a clear button in Blazor - your best bet would be using some CSS to position the desired button above the dropdown list. Then, a simple @onclick handler for it can set the value to whatever you want. Maybe you would also like to prevent the click, too, so that the dropdown does not open. At the moment - the Telerik ComboBox component offers a clear button so you may want to consider that instead of hacking a solution on the dropdownlist.

Regards,
Marin Bratanov
Progress Telerik

 If other requests and usage patterns arise, things will be considered. I suppose that's one of the major differences between the Web and Desktop - with the Web we have standard approaches for forms and their values that date back many years, and those patterns shape things to this day.