"Add form" with Lookup dropdown from database

Hi Team,

I have an "Add items page" ,e.g. say it contains two fields : Item_id , and item_name.
In the page load I retrieve the list with Items with a custom server method and bind this to a page property .
Field Item_id is a lookup and has this list as data , textproperty is name and valueproperty is id .
So far all good out of the box.

This part I cant get a grip on:
When an Item is selected in the lookup (dropdown) , I want the textproperty of the selected item to be patched to the item_name field on the form , ( it seems redundant but , it is an example).

List is build like '[{"id":1,"name":"item 1"}, {"id":2 ,"name":"item 2"}]

Using the change event of the form I can get the event.property and event.value .
In this case the event seems to be the "Id" value property .

question is how to get the selected dropdown item and the "name" part , the event gives only the value .
hope you can point me in the right direction for this on how to do this in Radzen.

The ValueProperty of the DropDown determines what property of the data item is used as the "value". You can set it to "name" and you will get the value of "name" in the change event.

Hi ,
If I change the value property to "name" than I have no way to retrieve the "id".
Please read the description, maybe not clear but, I have a dropdown and a text field on my add form :
in the database I have a field with : "item_id, item_name" , if I had only the item_id , than the dropdown would store the id in the database and show the name for the user interface , I also want to store the name of the item .

The DropDown component has only one Value property. If you want to get the "whole" data item you can 'unset' the ValueProperty option. Then the Value will be the whole data item.

I ended up using a "dummy" field on the form as the dropdown and updated the values for the fields "item_id" and "item_name" as hidden fields in the change event with patch form.
this.form0.form.patchValue({ item_id: ${event.value}.id } );
this.form0.form.patchValue({ item_name: ${event.value}.name } );

thank you for your support.

Facing issue on this topic in a "Edit" form to initialize the dropdown lookup component.
the "form0.form." is not available in the "page load" event. so I can not set or patch the value of the lookup dropdown component witch is not bound to any database field .
how to solve this?
the lookup component has a "name and id" listvalues l.
because I want to store the name and id of the selected value I have not databind it to a database field . The value property contains the valuepair object for Id and name of the listitems.


You can either use a TemplateForm or handle the Change event of the form. If you do the latter you can use patchValue whenever the user selects a different value from the dropdown.

I want the lookup to initialize and set to the database stored value before any user interaction,
So On a edit form before any user interaction

Then you need to use the TemplateForm component where you have full control.

Can you please elaborate how you created dummy fields & use them in the form...
I shall be very thankfull....

I was trying some scenarios how to do things with Radzen.
In basic i meant by dummy_fields,is a non database field or page property that you can use to store or display data with , In my case it was a dropdown with artikels that when I selected one it would display the artikel name and the artikel Id and also store both values to the database.
Did not end up in my final project code so , unfortunately I do not have the actual used code anymore, hope this helps you with your question.

1 Like

Thanks I can understand,
But Can you tell me that how you displayed Artikle ID & Artikle Name in dummy fields,
I know how to display both of the Artikle ID & Artikle Name to Dropdown from Database, But I don't how to get them individually from Dropdown menu to display them or use them in the form...??
Thanks in Advance...