popup editor with kendo dropdownlist for nullable field

7 posts, 0 answers
  1. William Dunn
    William Dunn avatar
    15 posts
    Member since:
    May 2010

    Posted 05 Sep 2012 Link to this post

    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;
    }
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 11 Sep 2012 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. William Dunn
    William Dunn avatar
    15 posts
    Member since:
    May 2010

    Posted 11 Sep 2012 Link to this post

    Thank You, that worked.
  5. M David
    M David avatar
    1 posts
    Member since:
    Mar 2013

    Posted 02 Apr 2013 Link to this post

    Has there been any fixes to this Kendo bug?
  6. Sally
    Sally avatar
    6 posts
    Member since:
    Apr 2012

    Posted 02 Apr 2013 Link to this post

    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


  7. Ruud
    Ruud avatar
    1 posts
    Member since:
    Feb 2013

    Posted 16 Aug 2013 Link to this post

    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...
  8. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 21 Aug 2013 Link to this post

    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!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready