This is a migrated thread and some comments may be shown as answers.
popup editor with kendo dropdownlist for nullable field
6 Answers 499 Views
This is a migrated thread and some comments may be shown as answers.
William Dunn
Top achievements
Rank 1
William Dunn asked on 05 Sep 2012, 12:11 PM
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;
}

6 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 11 Sep 2012, 07:47 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
William Dunn
Top achievements
Rank 1
answered on 11 Sep 2012, 07:44 PM
Thank You, that worked.
0
M David
Top achievements
Rank 1
answered on 02 Apr 2013, 09:10 PM
Has there been any fixes to this Kendo bug?
0
Sally
Top achievements
Rank 1
answered on 02 Apr 2013, 09:32 PM
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


0
Sander
Top achievements
Rank 1
answered on 16 Aug 2013, 01:53 PM
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...
0
Petur Subev
Telerik team
answered on 21 Aug 2013, 11:06 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
William Dunn
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
William Dunn
Top achievements
Rank 1
M David
Top achievements
Rank 1
Sally
Top achievements
Rank 1
Sander
Top achievements
Rank 1
Share this question
or