Kendo ui MVC Grid Popup Editor Template DropDownListFor not working

Question

I am using Kendo UI for ASP.MVC with Razor view and in Grid editing popup mode, EditorTemplate does not display value from Grid in DropDownListFor. What am I missing?

View:

@(Html.Kendo().Grid<CustomerLeadViewModel>()
    .Name("grid")        
    .Columns(columns =>
    {
        columns.Bound(c => c.CustomerName).Width(200);
        columns.Bound(c => c.CustomerGroup);           
        columns.Bound(c => c.CustomerActivityField);            
        columns.Bound(c => c.AgentName);           

        columns.Command(command =>
        {
            command.Edit().Text("Edit");
            command.Destroy().Text("Delete");                
        }).Width(250);
    })
    .HtmlAttributes(new { style = "height: 480px;" })
          .Editable(editable => editable.Mode(GridEditMode.PopUp)).TemplateName("_CustomerEdit"))                              
          .DataSource(dataSource => dataSource
          .Ajax()                  
          .Model(model => 
           {
                  model.Id(c => c.Id);                                                                                       
           })                 
           .Read(read => read.Action("Customers_Read", "CustomerLead", new { model = Model }))
           .Update(update => update.Action("Customers_Update", "CustomerLead"))
           .Destroy(delete => delete.Action("Customers_Destroy", "CustomerLead"))
     )
)

and EditorTemplate/_CustomerEdit:

@model CustomerLeadViewModel
@Html.HiddenFor(model => model.Id)
@Html.Kendo().TextBoxFor(model => model.CustomerName)
@(
 Html.Kendo().DropDownListFor(model=>model.CustomerGroupId)
    .Name("CustomerGroup")  //This name has to be the same as the Title on the main grid page
    .DataTextField("GroupName")
    .DataValueField("Id")
        .DataSource(source =>
        {
            source.Read(read => { read.Action("GetCustomerGroups", "CustomerLead"); });
        })

    .OptionLabel("Select a group ...")
    )

Controller:

public ActionResult Customers_Read([DataSourceRequest]DataSourceRequest request, CustomerLeadSearchViewModel model)
    {
        var customers = customerLeadRepository.Get(includeProperties: "CustomerSubGroup.CustomerGroup, CustomerActivityField");

        if (model.CustomerName != null)
        {
            customers = customers.Where(c => c.CustomerName.Contains(model.CustomerName));
        }

        var customersViewModel = customers.Select(customer => new CustomerLeadViewModel
        {
            Id = customer.Id,
            CustomerGroupId = customer.CustomerGroupId,
            CustomerGroup = customer.CustomerSubGroup.CustomerGroup.GroupName,                
            CustomerName = customer.CustomerName,
            CustomerActivityField = customer.CustomerActivityField.ActivityName,
            AgentName = customer.AgentName,
            Phone1 = customer.Phone1,
            Mobile = customer.Mobile
        });
        return Json(customersViewModel.ToDataSourceResult(request));
    }
    public JsonResult GetCustomerGroups()
    {           
        var customerGroups = customerGroupRepository.GetAll();
        return Json(customerGroups.Select(c => new { Id = c.Id, GroupName =      c.GroupName }), JsonRequestBehavior.AllowGet);
    }

Model:

public class CustomerLeadViewModel
{
    [ScaffoldColumn(false)]
    public int Id { get; set; }   
    public string CustomerName { get; set; }
    public string AgentName { get; set; }
    public string Post { get; set; }
    public string CustomerActivityField { get; set; }
    public int CustomerGroupId { get; set; }
    public string CustomerGroup { get; set; }    
}

Always Learning Always Learning · Accepted Answer · 2015-10-20T17:03:12

Change your _CustomerEditor template model field from

@(Html.Kendo().DropDownListFor(model=>model.CustomerGroupId)

to

@(Html.Kendo().DropDownListFor(model=>model.CustomerGroup)

Just as the comment says, "This name has to be the same as the Title on the main grid page"

The field that the DropDownListFor is binding to needs to be the same. Or, depending on your model, change them all to CustomerGroupId. Either way, they need to match.

Kendo ui MVC Grid Popup Editor Template DropDownListFor not working

1 Answers