Kendo Mvc Grid clienttemplate - kendo-ui

Question

I am using a Kendo MVC Grid and i want to have a dropdownlist in one of the cells.
here is my code:
#(Html.Kendo().Grid<RMS.Admin.ViewModel>()
.Name("ResourceGrid")
.Columns(columns =>
{
columns.Bound(c => c.ResourceName);
columns.Bound(c => c.Descritption);
columns.Bound(c => c.ResourceType).ClientTemplate("#=ResourceType#");
columns.Bound(c => c.Approved);
columns.Bound(c => c.IsEnabled);
columns.Bound(c => c.Data).Width(220);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(172).Title("Edit/Delete");
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Scrollable()
.Sortable()
.HtmlAttributes(new { style = "height:800px" })
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.ClientDetailTemplateId("template")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(s => s.ResourceId);
model.Field(p => p.ResourceType).DefaultValue(ViewData["defResourceType"] as RMS.Admin.ViewModel.ResourceTypeId);
})
.Create(update => update.Action("CreateResource", "Home", new { resourceTypeId = "#=ResourceType.Id#" }))
.Read(read => read.Action("ReadResource", "Home"))
.Update(update => update.Action("UpdateResource", "Home"))
.Destroy(destroy => destroy.Action("RemoveResource", "Home"))
)
.Events(events => events.DataBound("dataBound"))
)
The problem is that i don't know what clienttemplate is so i don't know what to do with it.
If bound resourcetype with a clienttemplate i can't add new records to the grid, i get the error: Uncaught ReferenceError: ResourceType is not defined
If i remove clienttemplate i can add a record but when i try to save it it says it can't find the id of ResourceType.

Answer 1

basically if you want to use a dropdownlist within a kendo ui grid you have to define an editor template which includes a kendo dropdownlist widget. this means you have to declare the respective cell with the attribute .EditorTemplateName() like this:
.Columns(columns =>
{
columns.Bound(c => c.ResourceName);
columns.Bound(c => c.Descritption);
columns.Bound(c => c.ResourceType).EditorTemplateName("TemplateName");
columns.Bound(c => c.Approved);
columns.Bound(c => c.IsEnabled);
columns.Bound(c => c.Data).Width(220);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(172).Title("Edit/Delete");
})
the editortemplate has to be stored within folder: Shared/EditorTemplates/TemplateName.cshtml
TemplateName.cshtml should look like this:
#model ModelName
#(Html.Kendo().DropDownList()
.OptionLabel("please select a value")
.Name("ResourceType") <-- the name needs to be equal to the grid cell name
.DataSource(source=>
{
source.Read( read =>
{
read.Action("ActionName", "ControllerName");
})
.ServerFiltering(true);
})
.DataTextField("Name") <-- displays the text of the object
.DataValueField("ID") <-- stores the id of the object
)
hope this will lead you into the right direction.
cheers,