Single field with DropDownListFor in multiple places

[Sean Bintley]

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.

 

[Neli]

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";
$(ddlToChange).data("kendoDropDownList").text(selected);

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

Regards,
Neli
Progress Telerik