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

5 posts, 1 answers
  1. Damian
    Damian avatar
    1 posts
    Member since:
    Oct 2010

    Posted 05 Jul 2013 Link to this post

    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.
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2196 posts

    Posted 09 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Damian
    Damian avatar
    1 posts
    Member since:
    Oct 2010

    Posted 11 Jul 2013 Link to this post

    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)
  4. Damian
    Damian avatar
    1 posts
    Member since:
    Oct 2010

    Posted 11 Jul 2013 Link to this post

    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
  5. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2196 posts

    Posted 15 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top