2014-05-21 44 views
0

我网格是剑道网格行被渲染默认风格

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

与剑道格,当我们选择一个一行行由default.Am无法获取默认的颜色,当行强调了与棕色点击。在客户端它渲染为

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

它是如何设置为background-color:rgb(255,255,255); ?我怎么能覆盖这个棕色像背景颜色:#f0713a,border-color:#f0713a?

回答

1

有几种方法可以做到这一点。最简单的方法是通过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" 

这是一个demo单细胞。


另一种方法是覆盖kendo样式与他们的themebuilder。但这是非常庞大的。

如果您想以编程方式执行此操作,则可以通过在网格的change事件中获取所选元素,然后将代码中的元素背景设置为可能。如果你需要这个选项,我会尽力做到这一点,但我看到它的方式,把UI的东西留给CSS,并留下编码为JavaScript。