I have a Grid with a popup editor that contains combo boxes. Each of the boxes works fine when in Edit mode. However, when I click Add New, and then "Update" button on the template....the values from the Combo Boxes are not being returned from the form. The fields remain NULL. I throw an alert up to verify that the selection was made...which it is. But the record does not get sent to the controller with the value that is selected.
Here is the Popup Editor Template
Here is the grid.
Here is the Popup Editor Template
@model sgrc.vpd.home.Models.vwInventory
<
script
>
function onSelect(e) {
var combobox = $("#ItemType").data("kendoComboBox");
var dataItem = this.dataItem(e.item.index());
alert(dataItem.ItemType + " " + dataItem.TypeID);
};
</
script
>
@{
ViewBag.Title = "Edit Inventory Item";
}
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
@Html.HiddenFor(model => model.ItemID)
@Html.HiddenFor(model => model.VehicleID)
@Html.HiddenFor(model => model.memorycard)
@Html.HiddenFor(model => model.remarks)
@Html.HiddenFor(model => model.signon)
@Html.HiddenFor(model => model.signoff)
@Html.HiddenFor(model => model.AssignedName)
@Html.HiddenFor(model => model.caliber)
<
div
id
=
"tabstrip"
>
<
ul
>
<
li
class
=
"k-state-active"
>
Item Information
</
li
>
<
li
>
Assignment Information
</
li
>
<
li
>
Vehicle Information
</
li
>
</
ul
>
<
div
id
=
"Item Information"
>
<
div
class
=
"edit-field"
>
<
br
/>
<
label
for
=
"ItemType"
style
=
"color:#212a33"
>Select Type:</
label
>
@(Html.Kendo().ComboBox()
.Name("ItemType")
.Placeholder("Select Item Type...")
.DataTextField("ItemType")
.DataValueField("TypeID")
.Filter("contains")
.Events(e => e.Select("onSelect"))
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetItems", "Inventory");
})
.ServerFiltering(false);
})
)
<
label
for
=
"Status"
style
=
"color:#212a33"
>Select Status:</
label
>
@(Html.Kendo().ComboBox()
.Name("StatusID")
.Placeholder("Select Status...")
.DataTextField("Status")
.DataValueField("StatusID")
.Filter("contains")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetStatus", "Inventory");
})
.ServerFiltering(false);
})
)
</
div
>
<
div
class
=
"edit-field"
>
@Html.LabelFor(model => model.serialnumber, "Serial Number/VIN")
@Html.TextBoxFor(model => model.serialnumber, new { style = "width: 80%; float:right" })
@Html.ValidationMessageFor(model => model.serialnumber)
</
div
>
<
div
class
=
"edit-field"
>
@Html.LabelFor(model => model.Description, "Description")
@Html.TextAreaFor(model => model.Description, new { cols = 83, rows = 5 })
@Html.ValidationMessageFor(model => model.Description)
</
div
>
<
div
class
=
"edit-field"
>
@Html.LabelFor(model => model.PurchaseDate, "Date Purchased")
@Html.EditorFor(model => model.PurchaseDate, new { style = "width: 80%; font-size:18px; font-family:inherit" })
@Html.ValidationMessageFor(model => model.PurchaseDate)
@Html.LabelFor(model => model.InServiceDate, "In Service Date", new { style = "color:#212a33" })
@Html.EditorFor(model => model.InServiceDate, new { style = "width: 80%; font-size:18px; font-family:inherit" })
@Html.ValidationMessageFor(model => model.InServiceDate)
</
div
>
</
div
>
<
div
id
=
"Assignment Information"
>
<
div
class
=
"edit-field"
>
<
br
/>
<
label
for
=
"AssignedID"
style
=
"color:#212a33 "
width: 80%" >Assigned Officer:</
label
>
@(Html.Kendo().ComboBox()
.Name("AssignedID")
.DataTextField("FullName")
.DataValueField("PersonID")
.Placeholder("Select Officer")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetOfficers", "Inventory");
})
.ServerFiltering(false);
})
)
@Html.LabelFor(model => model.AssignedDate, "Date Assigned", new { style = "color:#212a33" })
@Html.EditorFor(model => model.AssignedDate, new { style = "width: 80%; font-size:18px; font-family:inherit" })
@Html.ValidationMessageFor(model => model.AssignedDate)
</
div
>
<
div
class
=
"edit-field"
style
=
"width:40%"
>
<
label
for
=
"AssignedBy"
style
=
"color:#212a33"
>Assigned By</
label
>
@(Html.Kendo().ComboBox()
.Name("AssignedBy")
.DataTextField("FullName")
.DataValueField("PersonID")
.Placeholder("Select Officer")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetOfficers", "Inventory");
})
.ServerFiltering(false);
})
)
</
div
>
<
div
class
=
"edit-field"
>
@Html.LabelFor(model => model.lastupdated, "Last Updated", new { style = "color:#212a33" })
@Html.EditorFor(model => model.lastupdated)
@Html.ValidationMessageFor(model => model.lastupdated)
@Html.LabelFor(model => model.lastupdatedby, "Last Updated By")
@Html.TextBoxFor(model => model.lastupdatedby, new { disabled = "disabled", style = "width: 30%; float:right" })
</
div
>
</
div
>
<
div
id
=
"Vehicle Information"
>
<
div
class
=
"edit-field"
>
<
br
/>
@Html.LabelFor(model => model.make, "Make", new { style = "color:#212a33" })
@Html.TextBoxFor(model => model.make, new { style = "width: 80%; font-size:18px; font-family:inherit; float:right" })
@Html.ValidationMessageFor(model => model.make)
</
div
>
<
div
class
=
"edit-field"
>
@Html.LabelFor(model => model.model, "Model", new { style = "color:#212a33" })
@Html.TextBoxFor(model => model.model, new { style = "width: 80%; font-size:18px; font-family:inherit; float:right" })
@Html.ValidationMessageFor(model => model.model)
</
div
>
<
div
class
=
"edit-field"
>
@Html.LabelFor(model => model.year, "Year", new { style = "color:#212a33" })
@Html.TextBoxFor(model => model.year, new { style = "width: 80%; font-size:18px; font-family:inherit; float:right" })
@Html.ValidationMessageFor(model => model.year)
</
div
>
<
div
class
=
"edit-field"
>
@Html.LabelFor(model => model.color, "Color", new { style = "color:#212a33" })
@Html.TextBoxFor(model => model.color, new { style = "width: 80%; font-size:18px; font-family:inherit; float:right" })
@Html.ValidationMessageFor(model => model.color)
</
div
>
<
div
class
=
"edit-field"
>
@Html.LabelFor(model => model.tag, "Tag", new { style = "color:#212a33" })
@Html.TextBoxFor(model => model.tag, new { style = "width: 80%; font-size:18px; font-family:inherit; float:right" })
@Html.ValidationMessageFor(model => model.tag)
</
div
>
</
div
>
</
div
>
}
<
script
>
$(document).ready(function () {
$("#tabstrip").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
}
});
});
</
script
>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
Here is the grid.
@(Html.Kendo().Grid<
sgrc.vpd.home.Models.vwInventory
>()
.Name("grid")
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
.Columns(columns =>
{
columns.Bound(dataInventory => dataInventory.serialnumber).Title("Serial#").Width(200);
columns.ForeignKey(dataInventory => dataInventory.ItemType, (System.Collections.IEnumerable)ViewData["itemtypes"], "TypeID", "ItemType")
.Title("Type").Width(250);
columns.ForeignKey(dataInventory => dataInventory.StatusID, (System.Collections.IEnumerable)ViewData["status"], "StatusID", "status")
.Title("Status").Width(250);
columns.ForeignKey(dataInventory => dataInventory.AssignedID, (System.Collections.IEnumerable)ViewData["officers"], "PersonID", "FullName")
.Title("Assigned To").Width(250);
columns.Bound(dataInventory => dataInventory.Description).Title("Description").Hidden(true);
//columns.Bound(dataInventory => dataInventory.StatusID).Title("status").Hidden(true);
columns.ForeignKey(dataInventory => dataInventory.AssignedBy, (System.Collections.IEnumerable)ViewData["officers"], "PersonID", "FullName")
.Title("Assigned By").Width(250);
columns.Bound(dataInventory => dataInventory.AssignedDate).Title("Date Assigned").Format("{0:g}");
columns.Bound(dataInventory => dataInventory.ItemID).Hidden(true);
columns.Bound(dataInventory => dataInventory.VehicleID).Title("VehicleID").Width(150).Hidden(true);
columns.Bound(dataInventory => dataInventory.memorycard).Title("memorycard").Hidden(true);
columns.Bound(dataInventory => dataInventory.year).Title("year").Hidden(true);
//columns.Bound(dataInventory => dataInventory.status).Title("status").Hidden(true);
columns.Bound(dataInventory => dataInventory.make).Title("Make").Hidden(true);
columns.Bound(dataInventory => dataInventory.model).Title("Model").Hidden(true);
columns.Bound(dataInventory => dataInventory.color).Title("Color").Hidden(true);
columns.Bound(dataInventory => dataInventory.tag).Title("Tag").Hidden(true);
columns.Bound(dataInventory => dataInventory.signon).Title("Signon").Hidden(true);
columns.Bound(dataInventory => dataInventory.signoff).Title("Signoff").Hidden(true);
columns.Bound(dataInventory => dataInventory.Ten84).Title("10-84").Format("{0:g}").Hidden(true);
columns.Bound(dataInventory => dataInventory.lastupdated).Hidden(true);
columns.Bound(dataInventory => dataInventory.lastupdatedby).Title("Updated By:").Hidden(true);
//columns.Bound(dataInventory => dataInventory.AssignedID).Title("OfficerID").Hidden(true);
columns.Bound(dataInventory => dataInventory.remarks).Title("Remarks").Hidden(true);
columns.Bound(dataInventory => dataInventory.PurchaseDate).Title("Purchase Date").Format("{0:MM/dd/yyyy}").Hidden(true);
columns.Bound(dataInventory => dataInventory.InServiceDate).Title("In Service Date").Format("{0:MM/dd/yyyy}").Hidden(true);
columns.Bound(dataInventory => dataInventory.caliber).Hidden(true);
columns.Command(commands =>
{
commands.Edit();
commands.Destroy();
}).Title("Commands").Width(180);
})
.ToolBar(toolbar =>
{
toolbar.Create();
// toolbar.Save();
})
.Events(e => e.SaveChanges("onSaveChanges"))
//.Events(events => events.Save("onSave"))
//.Events(events => events.Edit("onEdit"))
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditInventory"))
.DataSource(dataSource => dataSource
.Ajax()
.Events(e => e.Error("onError")) // Handle the "error" event (errors set in controller)
.Batch(false)
.ServerOperation(false) // Paging, sorting, filtering and grouping will be done client-side
.Model(model =>
{
model.Id(dataInventory => dataInventory.ItemID);
//model.Field(dataDestruction => dataDestruction.CaseID).Editable(false);
})
.Create(create => create.Action("Single_Create", "Inventory"))
.Read(read => read.Action("Item_Read", "Inventory"))
.Update(update => update.Action("Single_Update", "Inventory"))
.Destroy(destroy => destroy.Action("Item_Destroy", "Inventory"))
)
.AutoBind(true)
.Pageable(page => page.Enabled(true).PageSizes(new[] { 10, 20, 30, 40 }))
.Sortable()
.Navigatable()
//.Scrollable(scrolling => scrolling.Enabled(false))
.Events(e => e.Change("onChange"))
//.Filterable()
//.Scrollable(scrolling => scrolling.Enabled(true))
//.Scrollable(s => s.Height("auto"))
.HtmlAttributes(new {style = "width:960px;"})
.Filterable()
)