Dropdownlist in grid cell editor template shows undefined

[Benoy]

Hi,

I have a kendo grid with the Ward column having a dropdownlist editor template. We are using MVC architecture. When I tab through the grid cells so fast so that we are out of the Ward cell before the dropdownlist refreshes, the value is set to undefined and it doesn't change after that even if we select it. When I debugged the issue in IE, it breaks in one of the kendo js saying i.input.val() is undefined. 

It works fine as long as I let the dropdownlist refresh before I move to the next cell. Please advise!

I am having the same issue with all the dropdownlist editor templates.

 

//Inside the partial view

@(Html.Kendo().Grid(programContactData)
      .Name(gridName)

      .Columns(cols =>
      {

   cols.Bound(t => t.Ward).Width(70).EditorTemplateName("WardDropDown").ClientTemplate("#:Ward.WardNumber#").HtmlAttributes(new { style = "text-align:right" });

})

  .DataSource(dataSource => dataSource
                                .Ajax().ServerOperation(false)
                                .Batch(true)

                                .Model(model =>
                                {

                                        model.Field(m => m.Ward).DefaultValue(defaultWardNumber as TRE.Models.WardViewModel).Editable(true);

                               })

)

//Ward dropdown Editor Template

@(Html.Kendo().DropDownListFor(m => m)
            .AutoBind(false)       
                
            .DataValueField("WardId")
            .DataTextField("WardNumber")
            .DataSource(source =>
             {
                 source.Read(read =>
                 {
                     read.Action("PopulateWardList", "SaveForm");
                 }).ServerFiltering(true);
             })
        //.Events(e =>
        // {
        //     e.Select("onSelect");
        // })
)

//Save Form controller PopulateWardList method

   public ActionResult PopulateWardList()
        {
            try
            {
                List<WardViewModel> wardList = new List<WardViewModel>();
                wardList.Add(new WardViewModel() { WardId = 0, WardNumber = " " });
                wardList.Add(new WardViewModel() { WardId = 1, WardNumber = "1" });
                wardList.Add(new WardViewModel() { WardId = 2, WardNumber = "2" });
                wardList.Add(new WardViewModel() { WardId = 3, WardNumber = "3" });
                wardList.Add(new WardViewModel() { WardId = 4, WardNumber = "4" });
                wardList.Add(new WardViewModel() { WardId = 5, WardNumber = "5" });
                wardList.Add(new WardViewModel() { WardId = 6, WardNumber = "6" });
                wardList.Add(new WardViewModel() { WardId = 7, WardNumber = "7" });
                wardList.Add(new WardViewModel() { WardId = 8, WardNumber = "8" });

                ViewBag.DefaultWard = wardList.First();
                return Json(wardList, JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex)
            {
                LogManager.GetLogger("DHW").Error(ex);
                throw;
            }
        }

[Konstantin Dikov]

Hello Raj,

You could try provide the data to the DropDownListFor as shown in the following online demo (ClientCategory.cshtml):

• http://demos.telerik.com/aspnet-mvc/grid/editing-custom

@model Kendo.Mvc.Examples.Models.CategoryViewModel

@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("CategoryID")
        .DataTextField("CategoryName")
        .BindTo((System.Collections.IEnumerable)ViewData["categories"])
)

Please give this a try and let me know if you can replicate the same problem with this approach.


Regards,
Konstantin Dikov
Telerik by Progress

[Benoy]

Changed the list data to use Viewdata instead of datasource controller-action method. That worked!

 

Thank you for your help!