строки сетки кендо отображаются со стилем по умолчанию

Моя сетка

                      @(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")))       
    )

с сеткой кендо, когда мы выбираем строку, эта строка по умолчанию выделяется коричневым цветом. Я не могу получить цвет по умолчанию при нажатии строки. На стороне клиента это отображается как

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

как устанавливается цвет фона: rgb(255, 255, 255); ? как я могу изменить это на коричневый, как цвет фона: # f0713a, цвет границы: # f0713a?


kendo-grid kendo-ui kendo-asp.net-mvc
person GANI    schedule 21.05.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Есть несколько способов сделать это. Самый простой способ через CSS

Изменение стиля для выбранной строки

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

Изменение стиля для выбранной ячейки

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

и в объявлении вашей сетки убедитесь, что это установлено:

selectable: "cell"

Вот демонстрация для одной ячейки.

Другой способ — переопределить стили кендо с помощью их конструктора тем. Но это очень громоздко.

Если вы хотите сделать это программно, это также возможно, получив выбранный элемент в событии change сетки, а затем установив фон элемента в коде. Я попытаюсь сделать это, если вам нужна эта опция, но, как я это вижу, оставьте пользовательский интерфейс для css и оставьте кодирование для javascript.

person gitsitgo    schedule 22.05.2014