Editing a foreign key Grid Column shows a correct dropdown but does not select the correct value

[Damian]

Hi,

I'm having an issue with the Kendo Grid, using the MVC extensions.

I have a foreign key column defined which displays perfectly when the grid is shown.  However, on edit, the dropdown (provided by a copy of the GridForeignKey.cshtml editor template) does not select the correct value for the record.  This is the case whether we're using InCell, InLine or Popup editing.

To clarify, the dropdown shows all the correct available values, but the default is selected instead of the value in the record.

ViewModels:

public class BranchesViewModel
{
    public IQueryable<BranchViewModel> Branches { get; set; }
    public IEnumerable<RegionViewModel> Regions { get; set; }
}

public class BranchViewModel
{
    [Editable(false, AllowInitialValue = true)]
    [Required]
    [Display(Name="Id")]
    [HiddenInput(DisplayValue = false)]
    public int BranchId { get; set; }

    [Display(Name="GL Code", Order=2)]
    [Required]
    public string GLCode { get; set; }

    [Display(Name="Region", Order=3)]
    [Required]
    [UIHint("RegionForeignKey")]
    public int RegionId { get; set; }

    [Display(Name="Branch Name", Order=1)]
    [Required]
    public string BranchName { get; set; }
}

public class RegionViewModel
{
    public int RegionId { get; set; }
    public string RegionName { get; set; }
}

Index View:

<h2>Branches</h2>

@(Html.Kendo().Grid<BranchViewModel>()
      .Name("Branch")
      .Columns(col =>
                   {
                       col.Bound(m => m.BranchName);
                       col.Bound(m => m.GLCode).Width(200);
                       col.ForeignKey(m => m.RegionId, Model.Regions, "RegionId", "RegionName").Width(180);
                       col.Command(cmd => { cmd.Edit(); cmd.Destroy(); }).Width(180);
                   })
      .ToolBar(toolBar => toolBar.Create().Text("New Branch"))
      .Editable(edit =>
                    {
                        edit.Mode(GridEditMode.InLine);
                        edit.DisplayDeleteConfirmation(true);
                    })
      .Sortable()
      .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("errorHandler"))
        .Model(model => model.Id(b => b.BranchId))
        .Read(read => read.Action("Branch_Read", "Branch"))
        .Create(create => create.Action("Branch_Create", "Branch"))
        .Update(update => update.Action("Branch_Update", "Branch"))
        .Destroy(destroy => destroy.Action("Branch_Delete", "Branch"))
    )
)

RegionForeignKey Partial (in Views/Branch/EditorTemplates/):
Note: this is what I'm using now, however if I revert to the GridForeignKey editor template the behaviour is the same.

@model int

@(Html.Kendo().DropDownListFor(m => m)
    .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)

Controller Actions:

public ActionResult Index()
{
    var model = new BranchesViewModel
                    {
                        Branches = _branchRepository.Get().Select(
                            b => new BranchViewModel
                                     {
                                         BranchId = b.Id,
                                         GLCode = b.GLCode,
                                         BranchName = b.BranchName,
                                         RegionId = b.RegionId
                                     }
                        ),
                        Regions = _regionRepository.Get().Select(
                            r => new RegionViewModel
                                     {
                                         RegionId = r.Id,
                                         RegionName = r.RegionName
                                     }
                        ).ToList()
                    };

    return View(model);
}


// Ajax for branches
public ActionResult Branch_Read([DataSourceRequest] DataSourceRequest request)
{
    var branches = _branchRepository.Get().Select(
        b => new BranchViewModel
                 {
                     BranchId = b.Id,
                     GLCode = b.GLCode,
                     BranchName = b.BranchName,
                     RegionId = b.RegionId
                 }
        );
    return Json(branches.ToDataSourceResult(request));
}

I've scoured a number of other forum posts and haven't been able to find an answer.  Any help you could give would be very welcome.

[Vladimir Iliev]

Hi Damian,

 
From the provided information it's not clear for us what is the exact reason for this behavior as the current setup looks valid. Could you please provide runable project where the issue is reproduced? This would help us identify the exact reason for this behavior. 

Kind Regards,
Vladimir Iliev
Telerik

[Damian]

Hi Vladimir,

I was in the process of extracting my grid into a new project when I identified what was causing the issue.

It looks like adding the Kendo Dataviz javascript to my _Layout.cshtml caused the grid to break.  We had a related issue where paging wasn't working and removing dataviz seemed to fix that as well.

So you can (hopefully) reproduce, can you try this?

Scripts in the _Layout.cshtml - grid dropdown and paging works:

<script src="@Url.Content("~/Scripts/kendo/2013.1.514/jquery.min.js")"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.1.514/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.1.514/kendo.aspnetmvc.min.js")"></script>
<script type="text/javascript">
    kendo.culture("en-AU");
</script>
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

Scripts in the _Layout.cshtml - grid dropdown and paging no longer works:

<script src="@Url.Content("~/Scripts/kendo/2013.1.514/jquery.min.js")"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.1.514/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.1.514/kendo.aspnetmvc.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.1.514/kendo.dataviz.min.js")"></script>
<script type="text/javascript">
    kendo.culture("en-AU");
</script>
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

As you can see, the only difference is the line:

<script src="@Url.Content("~/Scripts/kendo/2013.1.514/kendo.dataviz.min.js")"></script>

Can you confirm this behaviour and suggest a workaround (apart from the obvious - don't use dataviz)

[Damian]

Hi Vladimir,

After speaking to John Bristowe (Australian Evangelist), I realised I shouldn't be including both kendo.all.min.js as well as kendo.dataviz.min.js.  The Dataviz functionality is included in Kendo.All.

I know this is something I shouldn't do, but should there be protection against doing it accidentally?  It's an unexpected side-effect that was very difficult to track down.

Thanks,
Damian

[Vladimir Iliev]

Hi Damian,

 
I would suggest to share your idea at KendoUI UserVoice to allow other users vote for it. Most voted ideas are included in next KendoUI releases.

Kind Regards,
Vladimir Iliev
Telerik