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

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

1 Answer 782 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:50 PM

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 . 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:

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

 

 

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Viktor Tachev
Telerik team
answered on 28 May 2018, 11:48 AM
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.
Tags
Grid
Asked by
KR
Top achievements
Rank 1
Veteran
Answers by
Viktor Tachev
Telerik team
Share this question
or