Single field with DropDownListFor in multiple places

2 posts, 0 answers
  1. Sean Bintley
    Sean Bintley avatar
    11 posts
    Member since:
    Jun 2017

    Posted 21 Jan 2018 Link to this post

    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.


  2. Neli
    Neli avatar
    221 posts

    Posted 23 Jan 2018 Link to this post

    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.
Back to Top