在 asp.net MVC Telerik 网格中，如何更改所选行的背景颜色

Question

在 asp.net MVC Telerik 网格中，如何更改 selected 行的背景颜色，因为我在网格内使用 ActionLink，我的默认颜色 selection 是蓝色，Link 颜色也是蓝色，所以当我 select 任何行时，链接都不可见

下面是我的代码

 @(Html.Kendo().Grid<Aspectek.MBI.Entities.Products.Product>()
            .Name("Grid")
        .Columns(columns =>
        {            
            columns.Bound(e => e.SKU).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(120);
            columns.Bound(o => o.Barcode).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(120);
            columns.Bound(o => o.ProductName).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(120);
            columns.Bound(o => o.Category.CategoryName).Filterable(ftb => ftb.UI("CategoryFilter")).Width(120);
            columns.Bound(o => o.SubCategory.SubCategoryName).Filterable(ftb => ftb.UI("SubCategoryFilter")).Width(120);           

            columns.Bound(o => o.IsActive).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(120);
            columns.Template(@<text> @Html.ActionLink("Edit", "Product", new { id = item.Id, @style = "text-transform:capitalize;" }) </text>).ClientTemplate("<a href='/Products/Product/Edit/#= Id#'>View/Edit</a>").Width(100); 
            columns.Template(@<text> @Html.ActionLink("Duplicate", "Product", new { id = item.Id }) </text>).ClientTemplate("<a href='/Products/Product/CopyProduct/#= Id#'>CopyProduct</a>").Width(100);
            columns.Template(@<text> @Html.ActionLink("ExportHTML", "Product", new { id = item.Id }) </text>).ClientTemplate("<a href='/Products/Product/ExportHTML/#= Id#'>ExportHTML</a>").Width(100);
            columns.Template(@<text> @Html.ActionLink("SendEmail", "Product", new { id = item.Id }) </text>).ClientTemplate("<a href='/Products/Product/SendEmail/#= Id#'>SendEmail</a>").Width(100);
                        columns.Command(c =>
            {
                c.Custom("DeleteRecord").Text("Delete").Click("onClick");
            });
        })
.Events(ev => ev.DataBound("onDataBound"))
.ToolBar(toolBar => toolbar
.Custom()
.Text("Export To CSV")
.HtmlAttributes(new { id = "export" })
.Url(Url.Action("ProductExportToCSVFile", "Product", new { page = 1, pageSize = "20" )))
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.FileName("MBI Products Export.xlsx").Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Product"))).ToolBar(tools => tools.Pdf()).Pdf(pdf => pdf
.FileName("MBI Products Export.pdf")
.ProxyURL(Url.Action("Pdf_Export_Save", "Grid")))
.Sortable()
.Pageable()
.Scrollable()
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Reorderable(reorderable => reorderable.Columns(true))
.Resizable(resizable => resizable.Columns(true))
.ClientDetailTemplateId("template")
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators =>
.ForString(str => str.Clear()
.StartsWith("Starts with")
.Contains("Contains")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to"))))
.HtmlAttributes(new { style = "height:500px;" })
.DataSource(dataSource => dataSource.Ajax()
.PageSize(10)
.ServerOperation(false)
.Read(read => read.Action("Products_Read", "Product"))
.Model(model => model.Id(p => p.Id))
.Destroy(update => update.Action("DeleteProduct", "Product"))
))

Answer 1

我猜这是因为你选择了主题？但是你可以很容易地用普通的旧 css.

覆盖背景颜色

此示例将所选行的颜色设置为灰色，文本为白色

<style type="text/css">
    .k-state-selected  {
        color: #fff;
        background-color: #dcdcdc;
    }
</style>

在 asp.net MVC Telerik 网格中，如何更改所选行的背景颜色

In asp.net MVC Telerik grid, How to change background color of selected row

asp.net-mvc

telerik

kendo-ui

kendo-grid