ComboBoxFor value is not selected from Grid in Edit mode

[Shawn]

Hello,

I have a Grid with the editable mode set to "PopUp" and I've provided a template file for it.  In my template file I'm using a  Kendo ComboBox to allow the user to select from a list of US States, and in edit mode I would expect it to set the value to the selected record's StateId.  Unfortunately, when the edit popup appears the State is not selected in the ComboBox that matches the value in the grid's selected record.  However, as soon as I click on the ComboBox's down arrow the value gets populated.  I'm not sure what I'm doing wrong.  Am I missing a step somewhere?  Any help is appreciated.  Thanks.

Here's the code for my grid:

@(Html.Kendo().Grid<PARRE.Models.Project>
            ()
            .Name("Projects")
            .Columns(columns =>
            {
                columns.Bound(c => c.ProjectName).Width(200);
                columns.Bound(c => c.ProjectDescription);
                columns.Bound(c => c.Address).Width(200);
                columns.Bound(c => c.City).Width(160);
                columns.ForeignKey(f => f.StateId, (System.Collections.IEnumerable)ViewData["StatesList"], "StateId", "StateAbbr").Width(100);
                columns.Bound(c => c.ZipCode).Width(120);
                columns.Bound(c => c.ContactName).Width(160);
                columns.Bound(c => c.PhoneNumber).Width(135);
                columns.Bound(c => c.Email).Width(160);
                columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); }).Width(170);
            })
            .HtmlAttributes(new { style = "height: 100%; width: 100%;" })
            .Scrollable()
            .Groupable()
            .Sortable()
            .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
            .Filterable()
            .ToolBar(toolbar => toolbar.Create())
            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_ProjectCreate").Window(x => x.Title("Add/Edit Project").Width(700)))
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Events(events => {
                    events.Error("error_handler");
                })
                .Model(model =>{
                    model.Id(p => p.ProjectID);
                    model.Field(p => p.ProjectID).Editable(false);
                })
                .ServerOperation(false)
                .Read(read => read.Action("List", "Projects"))
                .Update(update => update.Action("Update", "Projects"))
                .Create(create =>  create.Action("Create", "Projects"))
                .Destroy(destroy => destroy.Action("Delete", "Projects"))
        )

 

Here's the code for the ComboBox

@(Html.Kendo().ComboBoxFor(model => model.StateId)
    .AutoBind(false)
    .BindTo((System.Collections.IEnumerable)ViewData["StatesList"])
    .DataTextField("StateAbbr")
    .DataValueField("StateId")
    .Filter(FilterType.Contains)
    .HtmlAttributes(new { style = "width: 70px; background-color: white;" })
    .Placeholder("...")
    .ClearButton(false))

 

Here's the code in the Controller to get the list of states:

  public IActionResult Index()
  {
      PopulateStates();
      return View();
  }

private void PopulateStates()
  {
      IQueryable<USStates> usStates = _context.USStates.Select(s => new USStates
      {
          StateId = s.StateId,
          StateAbbr = s.StateAbbr
      }).OrderBy(o => o.StateId);

      ViewData["StatesList"] = usStates.ToList();
  }

 

Regards,

Shawn A.

[Dimitar]

Hello Shawn,

I am attaching an ASP.NET MVC solution, where a similar scenario to the one described is demonstrated - configuring a foreignKey column for the Grid. With it, the related ComboBox in the edit popup is being correctly bound to the corresponding row data.

After inspecting the code sample provided, I noticed that the AutoBind option is set to false. This causes the ComboBox to be bound to its data after it is opened. Therefore, to force the widget to be bound upon opening the popup, the AutoBind option has to be set to true(its default value).

Regards,
Dimitar
Progress Telerik

[Shawn]

Thanks Dimitar!  The "AutoBind" option fixed the problem for me.