如何阻止 Telerik CSS 覆盖本地更改？答案

【问题标题】：How to stop Telerik CSS from overriding local changes?如何阻止 Telerik CSS 覆盖本地更改？
【发布时间】：2014-10-22 13:23:32
【问题描述】：

我有一个剑道网格，默认的 CSS 背景颜色或“文本”颜色是始终显示的颜色。

我能够用第 1 行和第 2 行覆盖背景颜色，但是，它只是替换了颜色。我需要能够根据“InTruck”布尔字段设置颜色。

我尝试了第 5 行和第 6 行，html 标记已正确更新，有时我看到它在重置为默认值之前闪烁正确的颜色。我也尝试在第 3 行和第 5 行添加 !important，但仍然没有运气。在使用 kendo/telerik css 完成所有操作之后，似乎有些东西正在设置样式。我该如何阻止它？

<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>

【问题讨论】：

标签： grid telerik asp.net-mvc-5

【解决方案1】：

我从来没有弄清楚如何做我想要的，但是，这个解决方案有相同的结果，我认为它看起来比要求的更好，更容易。它将设置复选框后面的颜色，因此有明显的色差，但并不花哨。

 .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);

【讨论】：