Conditional Formating in Telerik Grid (MVC) - asp.net-mvc

Question

I want to change the cell background color based on a value.
My solution If ound and which worked was this:
#(Html.Kendo().Grid<Web.Models.Intern.CheckADGridModel>()
.Name("ADGrid")
.Filterable()
.Sortable(s => s.SortMode(GridSortMode.MultipleColumn))
.Pageable(page => page.Enabled(true))
.Columns(col =>
{
col.Bound(x => x.ProjectID).Filterable(true).Title("ID").Width(100);
col.Bound(x => x.ProjectName).Filterable(true).Title(ResourcesLocal.Resources_Intern_CheckAD.Name).ClientTemplate(
"<a href=\"" + #Url.Content("~/Home/Index/") +
"#= ProjectID #\"" +
"><span data-toggle=\"tooltip\" data-placement=\"bottom\" title=\"" + #ResourcesLocal.Resources_Intern_CheckAD.ChooseProject + "\">" +
"#= ProjectName #" +
"</span ></a>");
col.Bound(x => x.StartDate).Filterable(false).Title(ResourcesLocal.Resources_Intern_CheckAD.Start).Width(150).Format("{0:dd.MM.yyyy HH:mm:ss}");
col.Bound(x => x.EndDate).Filterable(false).Title(ResourcesLocal.Resources_Intern_CheckAD.Ende).Width(150).Format("{0:dd.MM.yyyy HH:mm:ss}");
col.Bound(x => x.ConnectionLength).Filterable(true).Title(ResourcesLocal.Resources_Intern_CheckAD.Length).Width(70)
.ClientTemplate("#= formatADGridDauer(ConnectionLength) #");
.DataSource(ds => ds
.Ajax()
.PageSize(20)
.Sort(x => x.Add("EndDate").Descending())
.Read(read => read.Action("DataSourceADGrid", "Intern").Data("GetADGridValues"))
)
)
function formatADGridDauer(value) {
var css = "";
if (parseFloat(value) >= 1800)
css = "background-color:red; color:white;";
else if (parseFloat(value) > 600)
css = "background-color:Orange; color:white;";
html = "<div style='" + css + "'>" + value + "</div>";
html = kendo.format(html);
return html;
}
The problem is, I can only change the behaviour of the data in the cell, which means the padding of the grid-cell will be shown and it looks really ugly.
So how to do it right an change the gridcell background color instead of the data inside?

Answer 1

Unfortunately, telerik is not the most user-friendly set of controls when it comes to customization. Javascript (jquery in this instance) has worked for me when I had to do something similar.
Try this something like this:
$(".k-grid tr td").filter(function () { //gets the generated table cells
if ($(this).text() > 0) {
$(this).css("background-color", "red");
}
});