popup editor with kendo dropdownlist for nullable field

[William Dunn]

I have an ajax grid using popup edit mode and kendo dropdownlists in the popup.  On the post to the controller the dropdownlist value is not bound to the model property if the model property is a nullable int.  If I use the regular mvc dropdownlist the value posts fine.  I also have a kendo dropdownlist of states (text and value are both string) and that posts fine to the model property of string.

I am using the internal build from 8/31.

The Grid: 

@(Html.Kendo().Grid<Contact>()

    .Name("ContactGrid")

    .Columns(columns =>

    {

        columns.Bound(x => x.LastName).Title("Last Name");

        columns.Bound(x => x.FirstName).Title("First Name");

        columns.Command(command => { command.Edit(); command.Destroy(); }).Title("Actions").Width(200);

    })

    .DataSource(dataSource => dataSource

        .Ajax()

        .PageSize(100)

        .Model(model => model.Id(p => p.Id))

        .Read("_Read", "Clients")

        .Update("_Update", "Clients")

        .Create("_Create", "Clients")

        .Destroy("_Destroy", "Clients")

    )

    .ToolBar(toolbar => toolbar.Create().Text("Add New Client"))

    .Editable(editable => editable.Mode(GridEditMode.PopUp).DisplayDeleteConfirmation(true))

    .Sortable()

    .Scrollable(scrollable => scrollable.Virtual(true).Height(280))

    .Events(events => events.Edit("edit"))

)

Model's editor template

<div class="mvceditor-label">

     @Html.LabelFor(x => x.State)       

 </div>

 <div class="mvceditor-field">

     @Html.Kendo().DropDownListFor(x => x.State).BindTo(new SelectList(@ViewBag.States, "Abbreviation", "Name"))

</div>

  

 <div class="mvceditor-label">

     @Html.LabelFor(x => x.LabId)       

 </div>

 <div class="mvceditor-field">

     @Html.DropDownListFor(x => x.LabId, new SelectList(@ViewBag.Labs, "Id", "Description"))

 </div>

 

 <div class="mvceditor-label">

     @Html.LabelFor(x => x.TierId)       

 </div>

 <div class="mvceditor-field">

     @Html.Kendo().DropDownListFor(x => x.TierId).BindTo(new SelectList(@ViewBag.Tiers, "Id", "Description"))

     @Html.ValidationMessageFor(x => x.TierId)

 </div>

The Model:

public class Contact

{

    public int? Id { get; set; }

 

    [Required(ErrorMessage="Required")]

    [DisplayName("First Name *")]

    public string FirstName { get; set; }

 

    [Required(ErrorMessage = "Required")]

    [DisplayName("Last Name *")]

    public string LastName { get; set; }

     

    [Required(ErrorMessage = "Required")]

    [DisplayName("User Tier *")]

    public int? TierId { get; set; }

     

    public string State { get; set; }

     

    [DisplayName("Default Lab")]

    public int? LabId { get; set; }

     

    public string LastUpdateBy { get; set; }

 

}

Controller:

public ActionResult Index()

{

    SetupLists();

    return View();

}

 

public ActionResult _Read([DataSourceRequest] DataSourceRequest request)

{

    return Json(contactsService.Get().ToDataSourceResult(request));

}

 

[HttpPost]

public ActionResult _Create([DataSourceRequest] DataSourceRequest request, Contact contact)

{

    if (ModelState.IsValid)

    {

        contact.LastUpdateBy = User.Identity.Name;

        contactsService.Create(contact);

    }

 

    return Json(new[] { contact }.ToDataSourceResult(request, ModelState));

}

 

[HttpPost]

public ActionResult _Update([DataSourceRequest] DataSourceRequest request, Contact contact)

{

    if (ModelState.IsValid)

    {

        contact.LastUpdateBy = User.Identity.Name;

        contactsService.Update(contact);

    }

 

    return Json(new[] { contact }.ToDataSourceResult(request, ModelState));

}

 

private void SetupLists()

{

    IList<Lab> labs = labsService.Get();

    labs.Insert(0, new Lab { Description = "" });

 

    IList<Tier> tiers = tiersService.Get();

    tiers.Insert(0, new Tier { Description = "" });

 

    IList<Institution> institutions = institutionsService.Get();

    institutions.Insert(0, new Institution { Description = "" });

 

    IList<Contact> contacts = contactsService.Get();

    contacts.Insert(0, new Contact { FullName = "" });

 

    IList<Grant> grants = grantsService.Get();

    grants.Insert(0, new Grant { Description = "" });

 

    IList<State> states = statesService.Get();

    states.Insert(0, new State { Name = "" });

 

    ViewBag.Labs = labs;

    ViewBag.Tiers = tiers;

    ViewBag.Institutions = institutions;

    ViewBag.Contacts = contacts;

    ViewBag.Grants = grants;

    ViewBag.States = states;

}

[Petur Subev]

Hi William,

I tried your scenario in a small project and the issue is that when the DropDownList is bound to a nullable int the MVVM is not able to update the property successfully.
As a work-around I would suggest you to update the model property with the value of the DropDownList in the save event of the Grid. Check the attached project for a sample implementation.
i.e.

<script type="text/javascript">
    function OnGridSavesave(e) {
        var val = $("#PropName").data().kendoDropDownList.value();
        e.model.set("PropName", val);
    }

</script>

Kind Regards,
Petur Subev
the Telerik team

[William Dunn]

Thank You, that worked.

[M David]

Has there been any fixes to this Kendo bug?

[Sally]

Hi,

I also found an issue with KendoDropdown list bind to a nullable INT field.  

We also using KendoGrid with Popup edit mode and several dropdownlists in the popup bind to a nullable int field. If the initial value in those  dropdown fields are null,  the new selected value  won't get posted back and saved. I can only have the value posted back using the trick Petur Subev suggested. But there is a bigger problem:
 If I only make changes on those dropdown fields,  after I hit the Update button, the Popup just closed without even trigger a post back.  So the trick Petur Subev suggested only works if I changed value of some other fields in the form, so a Post back is triggered. Otherwise, it doesn't do any good.

Any suggestions on this case?  We are using Kendo.MVC version 2013.1.319.340

[Sander]

A year later and this is still not fixed?

I am running into the same problem with DropDownlists that bind to nullable ints.
The fix posted would only work on a new entity, but not on an existing row where only the dropdownlist value is changed...

[Petur Subev]

Hello All,

To bind the DropDownList to a primitive type when its initial value is null you can set the data-value-primite as an HTML attribute. Same case also covered here and here.

http://docs.kendoui.com/getting-started/framework/mvvm/bindings/value#use-the-value-binding-with-a-select-widget-to-update-the-view-model-field-with-the-value-field-when-the-initial-value-is-null.

Kind Regards,
Petur Subev
Telerik