MVC Kendo Grid with combobox column

[Tim]

I've already seen the post two days ago as well as several examples, but they all seem to point back to the Telerik page @ http://demos.telerik.com/kendo-ui/grid/editing-custom where the following grid is shown:

<%: Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductName);
columns.Bound(p => p.Category).ClientTemplate("#=Category.CategoryName#").Width(160);
columns.Bound(p => p.UnitPrice).Width(120);
columns.Command(command => command.Destroy()).Width(90);
})
.ToolBar(toolBar =>
{
toolBar.Create();
toolBar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.ProductID);
model.Field(p => p.ProductID).Editable(false);
model.Field(p => p.Category).DefaultValue(
ViewData["defaultCategory"] as Kendo.Mvc.Examples.Models.CategoryViewModel);
})
.PageSize(20)
.Read(read => read.Action("EditingCustom_Read", "Grid"))
.Create(create => create.Action("EditingCustom_Create", "Grid"))
.Update(update => update.Action("EditingCustom_Update", "Grid"))
.Destroy(destroy => destroy.Action("EditingCustom_Destroy", "Grid"))
)
%>
<script type="text/javascript">
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
</script>


Maybe if I knew what #=Category.CategoryName# meant my issue would be solved. I have an integer value in my model. I'd like to show a combo box to allow users to change its current value to an acceptable value defined by another list of values.






  

[Dimo]

Hello Tim,

For better understanding, I recommend you to open and run the offline ASP.NET MVC demo site, which we provide as part of the "UI for ASP.NET MVC" installation. There you will be able to inspect all relevant models, controller action methods and editor templates.

Basically, Category is an object, which has two properties - CategoryID and CategoryName. The Name is shown in display mode, while the ID value is set during editing with the ComboBox. The Category is serialized as a nested object inside the JSON response, that's why a client template with the observed syntax is needed.

A similar scenario is demonstrated in the "Foreign Key Column" demo, you can check that as well.

Let me know if you need more information afterwards.

If you have a predefined list of valid numeric values, which are not associated with any strings, your implementation will be simpler, as there is no need to work with objects and nested properties.


Regards,
Dimo
Telerik

 

 

[Jim]

Tim,

That demo is clearly missing the custom column code. We will have to figure it out from the other versions of that demo (javascript, php, jsp)  until they fix the MVC version.