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

MVC Kendo Grid with combobox column

2 Answers 187 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tim
Top achievements
Rank 1
Tim asked on 07 Nov 2014, 03:26 PM
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.






  















2 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 11 Nov 2014, 10:02 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jim
Top achievements
Rank 1
answered on 18 Nov 2014, 10:16 PM
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. 



Tags
Grid
Asked by
Tim
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Jim
Top achievements
Rank 1
Share this question
or