Dropdown in the editor popup template is not preselecting the dropdown value

[KR]

I developed a Grid which displays a pop-up for updates. Popup Edit screen is a Custom template with a dropdown list that calls the controller to populate the dropdown. In this case, i am populating the prefixes. The is populated fine, but when I click on a row on the grid to edit an item, I need to pre-select the value in the drop-down. let's say if a particular row has a value of "Mr." as a prefix, I need it to be pre-selected in the popup .

 

If the use of a  @Html.EditorFor(model => model.Prefix), it perfectly populates the editor fine. This doesn't work for Dropdown.

 

The editor template is called MemberEdit and the code in it is as below:

<p></p><p>@model <g class="gr_ gr_98 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="98" data-gr-id="98">Api</g>.<g class="gr_ gr_162 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation multiReplace" id="162" data-gr-id="162">Common..</g>Models.WebUser<br><br>    <div class="row" style="margin-left:5px;"><br>        <div class="col-lg-2"><br>            @Html.LabelFor(model => model.Prefix)<br>            @*@Html.EditorFor(model => model.Prefix)*@<br>            @(Html.Kendo().DropDownList()<br>                      .Name("ddlPrefix")<br>                      .DataTextField("Prefix")<br>                      .DataValueField("PrefixKey")<br>                      .DataSource(source =><br>                      {<br>                          source.Read(read =><br>                          {<br>                              read.Action("ListCustomerPrefix", "Home"); //.Data("additionalPrefixData");<br>                          })<br>                          .ServerFiltering(true);<br>                      })<br>                      //  .Text(Model.Prefix)<br>                      .Value(Model.PrefixKey)<br>                      .AutoBind(false)<br>                      .HtmlAttributes(new { style = "width: 100%" })<br>            )<br>            @Html.ValidationMessageFor(model => model.Prefix)<br>        </div><br>    </div></p>

The Grid code is as shown below: 

1.  @(Html.Kendo().Grid<.Api.Common..Models.WebUser>()<br>            .Name("membersGrid")<br>            .Columns(columns =><br>            {<br>                columns.Command(command => { command.Edit(); command.Destroy().Text("Del"); }).Width("15%");<br>                columns.Bound(p => p.CST_KEY).Visible(false);<br>                columns.Bound(p => p.FullName).Width("20%").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));<br>                columns.Bound(p => p.Role).Width("25%").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));<br>                columns.Bound(p => p.Title).Width("20%").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));<br>                columns.Bound(p => p.EmailAddress).Width("20%").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));<br>                columns.Bound(p => p.Prefix).Visible(false);<br>                columns.Bound(p => p.Suffix).Visible(false);<br>                columns.Bound(p => p.RoleKey).Visible(false);<br>                columns.Bound(p => p.OrganizationMemberKey).Visible(false);<br><br>            }).Filterable(filterable => filterable<br>              .Extra(false)<br>              .Operators(ops => ops<br>                  .ForString(str => str.Clear()<br>                       .Contains("Contains")<br>                       .StartsWith("Starts With")<br>                       .IsEqualTo("Is Equal To")<br>                       .IsNotEqualTo("Is Not Equal To")<br>                      )))<br>            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("MemberEdit").Window(w => w.Title("Edit Employee").Width(1100)))<br>            .Pageable(pager => pager.AlwaysVisible(false).PageSizes(new List<object> { 5, 10, 15, 20 }))<br>            .Sortable()<br>            .Filterable(ftb => ftb.Mode(GridFilterMode.Row))<br>            .HtmlAttributes(new { style = "width:100%;" })<br>            .DataSource(dataSource => dataSource<br>                .Ajax()<br>                .PageSize(10)<br>                .Events(events => events.Error("error_handler"))<br>                .Model(model => model.Id(p => p.CST_KEY))<br>                .Read(read => read.Action("ListMembers", "Home"))<br>                .Update(update => update.Action("EditingPopup_Update", "Home"))<br>                .Model(model =><br>                {<br>                    model.Field(m => m.Title);<br>                    model.Field(m => m.Prefix);<br>                    model.Field(m => m.PrefixKey);<br>                    model.Field(m => m.Suffix);<br>                    model.Field(m => m.FirstName);<br>                    model.Field(m => m.MiddleName);<br>                    model.Field(m => m.LastName);<br>                    model.Field(m => m.OrganizationKey);<br>                    model.Field(m => m.FullName);<br>                    model.Field(m => m.CustomerId);<br>                    model.Field(m => m.OrganizationMemberKey);<br>                    model.Field(m => m.EmailAddress);<br>                    model.Field(m => m.CST_KEY);<br>                    model.Field(m => m.Role);<br>                    model.Field(m => m.RoleKey);<br>                    model.Field(m => m.RoleList).DefaultValue(new List<Aamva.Api.Common.WebSite.Models.WebUserRole>());<br>                }<br>                )<br>             )<br>    )

 

The Model is as below:

   public class WebUser<br>    {<br>        public string CST_KEY { get; set; }<br>        public string EmailAddress { get; set; }<br>        public string Prefix { get; set; }<br>        public string PrefixKey { get; set; }<br>        public string Suffix { get; set; }<br>        public string Title { get; set; }<br>        public string FirstName { get; set; }<br>        public string MiddleName { get; set; }<br>        public string LastName { get; set; }<br>        public string OrganizationKey { get; set; }<br>        public string OrganizationMemberKey { get; set; }<br>        public string OrganizationName { get; set; }<br>        public string Role { get; set; }<br>        public string RoleKey { get; set; }<br>        public List<WebUserRole> RoleList { get; set; }<br>

}

 

The Model for Prefix is as below:

    public class WebUserPrefix<br>    {<br>        public string PrefixKey { get; set; }<br>        public string Prefix { get; set; }<br>    }

 

 

 

[Viktor Tachev]

Hello,

When using DropDownList as editor I would recommend using DropDownListFor. This way the widget will be bound to the respective field and show the value for it. Please check out the example below that illustrates how to use dropdown editor in a Grid with PopUp edit mode enabled. 

• https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/grid-popup-editing-dropdownlistfor-required

Give the approach a try and let me know how it works for you.

On a side note, when submitting code please use the Insert Code tool. This way the lines will be formatted automatically and will be easier to read. 

Regards,
Viktor Tachev
Progress Telerik

[Venu]

Hi Victor Tachev,

I am facing the same issue where in the modal popup i am not able to set selected value for the html.dropdownlistfor.

can you please suggest me what to do.

//.cshtml code
                @(Html.Kendo().DropDownListFor(m => m.DepartmentID)
                                        .Name("EmployeeDept")
                                        .DataTextField("Text")
                                        .DataValueField("Value")
                                        .OptionLabel("Select Department...")
                                        .BindTo(ViewBag.Departments)

 

 

//Controller Code

ViewBag.Departments = new List<SelectListItem>()
            {
                new SelectListItem(){ Value="1", Text="Dept 001" },
                new SelectListItem(){ Value="2", Text="Dept 002" },
                new SelectListItem(){ Value="3", Text="Dept 003" },
                new SelectListItem(){ Value="4", Text="Dept 004" }
            };

 

Appreciate your help,

Vamsi K

[Preslav]

Hi Vamsi,

The provided code looks okay. Based on it, I am afraid that I cannot determinate what the cause of the described faulty behavior is.

Having said that, could you please elaborate on the scenario? Also, it will help me a lot if you can provide a sample project that demonstrates the issue.

I look forward to hearing from you.


Regards,
Preslav
Progress Telerik

[Kyle]

Preslav (and Vamsi if you see this), 

I've also had this issue and the one thing that I've found that consistently causes the dropdownlist to NOT select the value is specifying the .Name() property. Any time I specify a Name (AKA ID) in my code, it will not select the value. Anytime I do NOT specify a Name, it selects the value just fine. 

Is this a bug? Is there some kind of fix for it?

Example:

@(Html.Kendo().DropDownListFor(m => m).BindTo(ViewBag.DocFormats as List<SelectListItem>).OptionLabel("< Select Format >")
    .AutoWidth(true).DataTextField("Text").DataValueField("Value").ValuePrimitive(true))

//This one selects the value as it should

 

 @Html.Kendo().DropDownListFor(m => m).BindTo(selectList).HtmlAttributes(attributes).ValuePrimitive(true).DataTextField("Text").DataValueField("Value").Name("editPopupStatusDDL")

//This one does not, and the main difference is the Name value being specified.
//The HtmlAttributes can be removed without it affecting anything, leaving Name as the only possible culprit.
//I removed the Name field and it did indeed select the value as it was supposed to. So I know this for a fact.

Thanks,

Kyle

[Viktor Tachev]

Hi Kyle,

When using DropDownListFor the component will get it's Name from the property it is bound to. In this scenario Name should not be specified. 

In case you are using DropDownList (without For) it will not be bound to a Model property and the Name should be defined in order for the component to be rendered correctly.