ForeignKey column does not select value in Kendo-Grid - grid

Question

I have a grid with some columns where one of these columns is a foreignKey column.
I want to show all possible values for that column in a combobox. ViewData["States"] is an IList<State> where State has an Id field and a Name field.
To achieve that, I modified the template "GridForeignKey.cshtml" like the following:
#model object
#(
Html.Kendo().ComboBoxFor(m => m)
.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") +
"_Data"]).Filter(FilterType.Contains).Placeholder("Select...")
)
My View looks like this:
<div class="contentwrapper">
#{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#(
Html.Kendo().Grid<CustomerModel>()
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.Name);
columns.ForeignKey(p => p.StateId, (IEnumerable)ViewData["States"], "Id", "Name");
columns.Bound(p => p.StreetAddress).Width(140);
columns.Bound(p => p.Zip).EditorTemplateName("Integer");
columns.Command(command => { command.Edit(); command.Destroy(); });//edit and delete buttons
})
.ToolBar(toolbar => toolbar.Create())//add button
.Editable(editable => editable.Mode(GridEditMode.InLine))//inline edit
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Model(model => {
model.Id(c => c.CustomerId);
model.Field(c => c.CustomerId).Editable(false);
model.Field(c => c.Zip).DefaultValue(4444);
}
)//id of customer
.Create(update => update.Action("EditingInline_Create", "Customer"))
.Read(read => read.Action("EditingInline_Read", "Customer"))
.Update(update => update.Action("EditingInline_Update", "Customer"))
.Destroy(update => update.Action("EditingInline_Destroy", "Customer"))
)
)
</div>
<script type="text/javascript">
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.e`enter code here`ach(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);//show error
}
}
</script>
Now my problems:
My Table does not show the selected value for "State".
When I edit a row, the combobox shows up and has all the desired values in it, but the value is not chosen. Instead it always shows the placeholder-text.
Before I had a complex object bound to my grid which had a field which was a complex type itself (State which contained the Id and Name attributes) but somehow kendo wouldnt let me bind it like p => p.State.Id. That's why I have flattened my model, and I now use the field StateId instead. Is it even possible to use a cascaded complex type like this?

Answer 1

What you have will not work. You need to pass the EditorTemplate the list in the EditorViewData and tell it which EditorTemplateName to use.
columns.ForeignKey(p => p.StateId, (IEnumerable)ViewData["States"], "Id", "Name")
.EditorViewData(new { statesList = ViewData["States"] })
.EditorTemplateName("GridForeignKey");
And GridForeignKey.cshtml like
#model int // Assuming Id is an int
#(Html.Kendo().ComboBoxFor(m => m)
.Placeholder("Select...")
.DataValueField("Id")
.DataTextField("Name")
.BindTo(ViewData["statesList"])
)
This might not be exactly right since I just did it off the top of my head. But it should get you in the right direction at least.

Answer 2

to achieve what you want you need to implement some client side scripts after you define the edit event in the Grid
.Events(events => events.Edit("onEdit"))
if your grid called **myGrid** then your script will be in this way
<script>
$(document).ready(function (e) {
var innerContent = $(".k-grid-delete").html().replace("Delete", "");
$(".k-grid-delete").html(innerContent);
});
function onEdit(e) {
$("#**myGrid** tbody [data-role=dropdownlist]").each(function () {
var ddl = $(this).data("kendoDropDownList");
if (ddl) {
ddl.options.optionLabel = "Select";
ddl.refresh();
ddl.value("");
}
})
}