This is a migrated thread and some comments may be shown as answers.

Single field with DropDownListFor in multiple places

1 Answer 89 Views
This is a migrated thread and some comments may be shown as answers.
Sean Bintley
Top achievements
Rank 2
Sean Bintley asked on 21 Jan 2018, 09:33 AM

My client has a requirement for a drop down to appear in two different places on the same form. This hasn't been an issue until I went to convert all my dropdowns to Telerik dropdowns. To maintain integrity I attached a handler that meant that changing one dropdown also affected the other.

It doesn't seem, however, that Telerik likes this. It seems to only affect the first instance of the element it encounters on the page.

01.@(Html.Kendo().DropDownListFor(model => model.GrantType)
02.                      .OptionLabel("Please Select...")
03.                      .BindTo((IEnumerable<SelectListItem>)ViewBag.GrantTypes)
04.                      .Filter(FilterType.Contains)
05.                      .Events(events =>
06.                      {
07.                          events.Select("caseBuildingGrantTypeSelectHandler");
08.                          events.DataBound("caseBuildingGrantTypeOnDataBoundHandler");
09.                      })
10.                      )


The second element for this model property is left as a text element.

See the attached file for example of what is happening.


1 Answer, 1 is accepted

Sort by
Telerik team
answered on 23 Jan 2018, 02:56 PM
Hi Sean,

The Name of the DropDownList should be unique. Two DropDownList could not be created without Name or with the same names. You can read more on the following article.

To achieve the desired behavior a suggestion is to subscribe to the change event of the widget.
.Events(e => e.Change("onChange"))

In the change event handler you can check the text of the current selection by using the text method
var selected = e.sender.text();

The id of the DropDownList from which the event was triggered could be retrieved as follows:
var id = this.element.attr("id");

The you can set the text to the other DropDownList, using the text() method again
var ddlToChange = id == "ddl1" ? "#ddl2" : "#ddl1";

The approach described above is used in the attached sample project. I hope you will find it helpful.

Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Asked by
Sean Bintley
Top achievements
Rank 2
Answers by
Telerik team
Share this question