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

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

3 Answers 959 Views
Grid
This is a migrated thread and some comments may be shown as answers.
KR
Top achievements
Rank 1
Veteran
KR asked on 24 May 2018, 10:24 PM

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>    }

 

 

 

3 Answers, 1 is accepted

Sort by
0
Accepted
Viktor Tachev
Telerik team
answered on 28 May 2018, 11:40 AM
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. 


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
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.
0
Venu
Top achievements
Rank 1
answered on 29 Apr 2019, 03:34 PM

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

0
Preslav
Telerik team
answered on 01 May 2019, 06:50 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Kyle
Top achievements
Rank 1
commented on 18 May 2022, 05:37 PM | edited

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
Telerik team
commented on 19 May 2022, 11:10 AM

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.

Tags
Grid
Asked by
KR
Top achievements
Rank 1
Veteran
Answers by
Viktor Tachev
Telerik team
Venu
Top achievements
Rank 1
Preslav
Telerik team
Share this question
or