Dropdown in the editor popup template is not pre-selecting the dropdown value

2 posts, 1 answers
  1. KR
    KR avatar
    30 posts
    Member since:
    Apr 2011

    Posted 24 May 2018 Link to this post

    I developed a Kendo MVC 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 dropdown 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 dropdown.

    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:

    01.@model Aamva.Api.Common.WebSite.Models.WebUser
    02.        <div class="col-lg-2">
    03.            @Html.LabelFor(model => model.Prefix)
    04.            @*@Html.EditorFor(model => model.Prefix)*@
    05.            @(Html.Kendo().DropDownList()
    06.                      .Name("ddlPrefix")
    07.                      .DataTextField("Prefix")
    08.                      .DataValueField("PrefixKey")
    09.                      .DataSource(source =>
    10.                      {
    11.                          source.Read(read =>
    12.                          {
    13.                              read.Action("ListCustomerPrefix", "Home"); //.Data("additionalPrefixData");
    14.                          })
    15.                          .ServerFiltering(true);
    16.                      })
    17.                      //  .Text(Model.Prefix)
    18.                      .Value(Model.PrefixKey)
    19.                      .AutoBind(false)
    20.                      .HtmlAttributes(new { style = "width: 100%" })
    21.            )
    22.        </div>
    23.        <div class="col-lg-2">
    24.            @Html.LabelFor(model => model.FirstName)
    25.            @Html.EditorFor(model => model.FirstName)
    26.            @Html.ValidationMessageFor(model => model.FirstName)
    27.        </div>

     

    The Grid code is as shown below: 

    01.@(Html.Kendo().Grid<Aamva.Api.Common.WebSite.Models.WebUser>()
    02.        .Name("membersGrid")
    03.        .Columns(columns =>
    04.        {
    05.            columns.Command(command => { command.Edit(); command.Destroy().Text("EZ Del"); }).Width("15%");
    06.            columns.Bound(p => p.CST_KEY).Visible(false);
    07.            columns.Bound(p => p.FullName).Width("20%").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
    08.            columns.Bound(p => p.Role).Width("25%").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
    09.            columns.Bound(p => p.Title).Width("20%").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
    10.            columns.Bound(p => p.EmailAddress).Width("20%").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
    11.            columns.Bound(p => p.Prefix).Visible(false);
    12.            columns.Bound(p => p.Suffix).Visible(false);
    13.            columns.Bound(p => p.RoleKey).Visible(false);
    14.            columns.Bound(p => p.OrganizationMemberKey).Visible(false);
    15.
            }).Filterable(filterable => filterable
    17.          .Extra(false)
    18.          .Operators(ops => ops
    19.              .ForString(str => str.Clear()
    20.                   .Contains("Contains")
    21.                   .StartsWith("Starts With")
    22.                   .IsEqualTo("Is Equal To")
    23.                   .IsNotEqualTo("Is Not Equal To")
    24.                  )))
    25.        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("MemberEdit").Window(w => w.Title("Edit Employee").Width(1100)))
    26.        .Pageable(pager => pager.AlwaysVisible(false).PageSizes(new List<object> { 5, 10, 15, 20 }))
    27.        .Sortable()
    28.        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
    29.        .HtmlAttributes(new { style = "width:100%;" })
    30.        .DataSource(dataSource => dataSource
    31.            .Ajax()
    32.            .PageSize(10)
    33.            .Events(events => events.Error("error_handler"))
    34.            .Model(model => model.Id(p => p.CST_KEY))
    35.            .Read(read => read.Action("ListMembers", "Home"))
    36.            .Update(update => update.Action("EditingPopup_Update", "Home"))
    37.            .Model(model =>
    38.            {
    39.
    40.                model.Field(m => m.Title);
    41.                model.Field(m => m.Prefix);
    42.                model.Field(m => m.PrefixKey);
    43.                model.Field(m => m.Suffix);
    44.                model.Field(m => m.FirstName);
    45.                model.Field(m => m.MiddleName);
    46.                model.Field(m => m.LastName);
    47.                model.Field(m => m.OrganizationKey);
    48.                model.Field(m => m.FullName);
    49.                model.Field(m => m.CustomerId);
    50.                model.Field(m => m.OrganizationMemberKey);
    51.                model.Field(m => m.EmailAddress);
    52.                model.Field(m => m.CST_KEY);
    53.                model.Field(m => m.Role);
    54.                model.Field(m => m.RoleKey);
    55.                model.Field(m => m.RoleList).DefaultValue(new List<Aamva.Api.Common.WebSite.Models.WebUserRole>());
    56.            }
    57.            )
    58.         )
    59.)

    The Model is as below:

    01.public class WebUser
    02.{
    03.    public string CST_KEY { get; set; }
    04.    public string EmailAddress { get; set; }
    05.    public string Prefix { get; set; }
    06.    public string PrefixKey { get; set; }
    07.    public string Suffix { get; set; }
    08.    public string Title { get; set; }
    09.    public string FirstName { get; set; }
    10.    public string MiddleName { get; set; }
    11.    public string LastName { get; set; }
    12.    public string OrganizationKey { get; set; }
    13.    public string Role { get; set; }
    14.    public string RoleKey { get; set; }
    15.    public List<WebUserRole> RoleList { get; set; }
    16.}
    17.
    public class WebUserPrefix
    20.{
    21.    public string PrefixKey { get; set; }
    22.    public string Prefix { get; set; }
    23.}

     

     

     

  2. Answer
    Viktor Tachev
    Admin
    Viktor Tachev avatar
    2491 posts

    Posted 28 May 2018 Link to this post

    Hello,

    I have replied to your query in the other thread. Please give the suggested approach a try and let me know how it works on your end. 

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