popup editor with kendo dropdownlist for nullable field in UI for ASP.NET MVC

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

Grid

This is a migrated thread and some comments may be shown as answers.

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

answered on 11 Sep 2012, 07:47 AM

nullable-int.zip

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!

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