kendo grid rows are rendered with default style

Question

My grid is

                      @(Html.Kendo().Grid<student.Models.SearchViewModel>()
    .Name("Grid").HtmlAttributes(new { @class = "studentGrid" })
    .Columns(
                x =>
                {
                    x.Bound(y => y.Id).Hidden(true);
                    x.Bound(y => y.Id).ClientTemplate(@"<input type='checkbox' name='checkedRecords' value='#= Id #' class='mainCheckbox' onclick='checkboxClicked(this, ""checkAllMain"")'/>")
                        .Title("")
                        .HeaderTemplate(@"<input type='checkbox' name='checkAllMain' onclick='selectAll(this, ""mainCheckbox"");' />")
                        .HeaderHtmlAttributes(new { style = "text-align:center" })
                        .Filterable(false)
                        .Sortable(false)
                        .HtmlAttributes(new { @class = "checboxClass", style = "text-align:center" });
                    x.Bound(y => y.abc1).Hidden(false);
                    x.Bound(y => y.abc2).Hidden(false);
                    x.Bound(y => y.abc3).Hidden(false);
                }
    )
        .ToolBar(tb =>
        {
            tb.Custom()
                .Text("Export To Excel")
                .HtmlAttributes(new { id = "export" })
                .Url(Url.Action("Export", Html.CurrentControllerName()));
            tb.Custom()
                .Text("Expand Selected Rows")
                .HtmlAttributes(new { id = "expandSelectedRows" });
        })
        .Groupable()
        .Reorderable(x => x.Columns(true))
        .Pageable(x => x.PageSizes(new int[] { 20, 50, 100 }).Input(true).Numeric(true))
        .Scrollable(x => x.Enabled(true).Height(Model.Height))
        .Resizable(resize => resize.Columns(true))
        .Reorderable(reorder => reorder.Columns(true))
        .Sortable()
        .Selectable()
        .Navigatable()
        .Filterable()
        .ClientDetailTemplateId("subTemplate")
        .AutoBind(!Model.NoAutoload)
                .Events(ev => { ev.DataBound("DataBoundSearch"); })
        .DataSource(dataSource => dataSource
        .Ajax().PageSize(100)
        .ServerOperation(false) // Paging, sorting, filtering and grouping will be done client-side
        .Model(model => model.Id(c => c.Id))
                .Events(events => events.Error("error").RequestStart("RequestStart").RequestEnd("RequestEnd").Change("Changed"))
                .Read(x => x.Action("GetData", Html.CurrentControllerName()).Data("ABCPostData")))       
    )

with kendo grid when we select a row that row is highlighted with brown color by default.Am not able to get the default color when row is clicked. On the client side it rendered as

       <tr class="k-master-row k-state-selected" data-uid="122bb914-87c2-4f0c-9351-52c1d9b84ae5" style="background-color: rgb(255, 255, 255);">

how it is set to background-color: rgb(255, 255, 255); ? how can i override this to brown like background-color: #f0713a, border-color: #f0713a?

gitsitgo gitsitgo · Accepted Answer · 2014-05-22T18:26:56

There are a couple of ways to do this. The easiest way is through CSS

Modifying style for selected row

#grid tr.k-state-selected td {
   background-color: #f0713a;
   border-color: #f0713a
}

Modifying style for selected cell

#grid td.k-state-selected {
   background-color: #f0713a;
   border-color: #f0713a
}

and in your grid declaration ensure this is set:

selectable: "cell"

Here is a demo for single cell.

Another way is to override kendo styles with their themebuilder. But this is extremely bulky.

If you want to do it programatically, this is possible too by getting the selected element in the change event of the grid, and then setting the element's background in code. I will try to do this if you need this option, but the way I see it, leave UI stuff to css, and leave coding to javascript.

kendo grid rows are rendered with default style

1 Answers