How to stop Telerik CSS from overriding local changes? - grid

Question

I have a Kendo Grid and it the default CSS background-color or 'text' Color are what always display.
I was able to override the background colors with lines 1 & 2, however, it just replaced the colors. What I need to to be able to set the color based on the "InTruck" Boolean field.
I tried lines 5 and 6, and the html mark up is correctly updated and sometimes I see it flash the correct color before it is reset to the defaults. I have also tried adding in !important in rows 3 and 5, still no luck. Something seems to be setting the style AFTER everything is done using the kendo/telerik css. How do I stop that?
<style>
1 /*.k-grid-content>table>tbody>tr{background-color:lightgreen;}*/
2 /*.k-grid-content>table>tbody>.k-alt{background-color:red;}*/
3 .IN{color:lightgreen;}
</style>
<div id="divSearchResults">
#(Html.Kendo().Grid((IEnumerable<Models.SearchResult>)Model.SearchResults)
4 // .Events(ev => ev.DataBound("Grid_onRowDataBound"))
5 // .RowAction(row => { if (row.DataItem.InTruck) row.HtmlAttributes["style"] = "background-color:lightgreen"; else row.HtmlAttributes["style"] = "background-color:red !important"; })
.Name("grid")
6 .RowAction(row =>
{
if (row.DataItem.InTruck)
{
row.HtmlAttributes["class"] = "IN";
}
})
.DataSource(ds => ds.Ajax()
.PageSize(Constants.MaxSearchReults)
.Model(mod =>
{
mod.Id(m => m.ID);
mod.Field(p => p.Name).Editable(false);
mod.Field(p => p.CarrierCode).Editable(false);
mod.Field(p => p.CityState).Editable(false);
mod.Field(p => p.Phone).Editable(false);
}))
.Columns(columns =>
{
columns.Template(#<text></text>).ClientTemplate("<input type='checkbox' #= IsSelected ? checked='checked':'' # class='chkbx' value='#= CarrierID#' name='SelectedArea' />")
.HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>").Width(20);
columns.Bound(p => p.Name).Filterable(false).Width(100);
columns.Bound(p => p.CarrierCode).Filterable(false).Width(75);
columns.Bound(p => p.CityState).Filterable(false).Width(100);
columns.Bound(p => p.Phone).Filterable(false).Width(75);
})
.Editable(ed => ed.Mode(GridEditMode.InCell))
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
)
</div>

Answer 1

I never did figure out how to do exactly what I wanted, however, this solution has the same results and I think it looks better and easier on the eyes than what was asked for. It will set the color behind the checkbox so there is an obvious color difference but it isn't gaudy.
.Columns(columns =>
{
columns.Template(#<text></text>)
.ClientTemplate("<span style='float:left; width:100%; background:#= InTruckMate ? \"lightgreen\" : \"palevioletred\"#'><input type='checkbox' #= IsSelected ? checked='checked':'' # class='chkbx' value='#= CarrierID#' name='SelectedArea' /></span>")
.HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>")
.Width(25);
columns.Bound(p => p.Name).Filterable(false).Width(100);