Hello, Mohammed,
Thank you for this question.
In general the ClientTemplate functionality of the Kendo UI Grid is especially for rendering HTML elements. Usually it is not used as an editor.
Below is a code snippet with needed logic:
In columns bound:
columns.Bound(c => c.Category).HtmlAttributes(new { @class="templateCell"}).ClientTemplate(
Html.Kendo().DropDownList().Name("ddl#=OrderID#")
.DataValueField("CategoryId")
.DataTextField("CategoryName")
.HtmlAttributes(new { data_bind="value: Category"})
.BindTo(new List<Category>() { new Category() { CategoryId=1, CategoryName="Name1"},
new Category() { CategoryId=2, CategoryName="Name2"}
})
.ToClientTemplate().ToHtmlString()
).Width(100);
columns.Command(c => c.Edit());After DataSource functionality add in .Events this code:
.Events(ev => ev.DataBound("bindRowToDataItem"))For the javascript part use this:
<script>
function bindRowToDataItem(e) {
var grid = e.sender;
$(".templateCell").each(function () {
eval($(this).children("script").last().html());
var row = $(this).closest("tr");
var dataItem = grid.dataItem(row);
kendo.bind($(row), dataItem);
});
}
</script>Another way to achieve desired behavior can be found in this demo:
https://dojo.telerik.com/UGeroder
Let me know if any further assistance is needed.
Regards,
Anton Mironov
Progress Telerik
Progress is here for your business, like always.
Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.