Hello Michael,
With a ForeignKey column it will be difficult to achieve the desired result by using a ClientTemplate, because you will have to manually match the values. For your convenience, following is an example (
based on our online demo for the ForeignKey column), where there is a conditional template for the foreign key column:
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductName);
columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName")
.Title("Category").Width(200).ClientTemplate("#=getForeignKeyTemplate(data)#");
columns.Bound(p => p.UnitPrice).Width(200);
columns.Command(command => command.Destroy()).Width(150);
})
.ToolBar(toolBar =>
{
toolBar.Create();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Filterable()
.Groupable()
.Pageable()
.Scrollable()
.HtmlAttributes(new { style = "height:540px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("errorHandler"))
.Model(model =>
{
model.Id(p => p.ProductID);
model.Field(p => p.ProductID).Editable(false);
model.Field(p => p.CategoryID).DefaultValue(1);
})
.Read(read => read.Action("ForeignKeyColumn_Read", "Grid"))
.Update(update => update.Action("ForeignKeyColumn_Update", "Grid"))
.Create(create => create.Action("ForeignKeyColumn_Create", "Grid"))
.Destroy(destroy => destroy.Action("ForeignKeyColumn_Destroy", "Grid"))
)
)
<script type="text/javascript">
var categories;
function getCategory(id) {
categories ? categories : categories = $("#grid").data("kendoGrid").columns[1].values;
for (var i = 0; i < categories.length; i++) {
if (categories[i].value == id) {
return categories[i].text;
}
}
}
function getForeignKeyTemplate(data) {
if (data.ProductName[0] == "C") {
return "<span style='color: red'>" + getCategory(data.CategoryID) + "</span>"
}
else {
return "<span>" + getCategory(data.CategoryID) + "</span>"
}
}
function errorHandler(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>
Another option would be to handle the DataBound event and traverse all items in order to apply the custom style.
If further questions arise, please feel free to contact us again.
Regards,
Konstantin Dikov
Telerik by Progress
Telerik UI for ASP.NET MVC is ready for
Visual Studio 2017 RC! Learn more.