如何使用CSS

Question

這就是我對電網

@(Html.Kendo().Grid<OPAMvc.Models.Parts>() 
         .Name("grd") 
         .Columns(columns => 
         { 
          columns.Bound(o => o.Id).Title("Id No").Width(80).HeaderHtmlAttributes(new { style = "font-size: 8pt; font-weight: bold;" }).HtmlAttributes(new { style = "line-height: 1em;font-size: 7pt;" }); 
          columns.Bound(o => o.Desc).Title("Description").Width(200).HeaderHtmlAttributes(new { style = "font-size: 8pt; font-weight: bold;" }).HtmlAttributes(new { style = "line-height: 1em;font-size: 7pt;" }); 
          columns.Bound(o => o.Price).Title("Price").Width(50).Format("{0:c}").HeaderHtmlAttributes(new { style = "font-size: 8pt; font-weight: bold;" }).HtmlAttributes(new { style = "line-height: 1em;font-size: 7pt;" }); 
          columns.Bound(o => o.Name).Title("Name").Width(20).HeaderHtmlAttributes(new { style = "font-size: 8pt; font-weight: bold;" }).HtmlAttributes(new { style = "line-height: 1em;font-size: 7pt;" }); 
         }) 

我想知道是否有更好的方式使用CSS樣式表頭樣式劍道電網MVC。謝謝。

Answer 1

如下圖所示，我應用了一些樣式爲Kendo grid的方法，但我不確定它是否對您有幫助。

爲了定義劍道格樣式屬性：

@(Html.Kendo().Grid<Model>() 
    //define style properties at here 
    .HtmlAttributes(new { style = "border:none; height:600px;" }) 
    //... code omitted for brevity 
) 

對於造型電網的單個細胞的模板： 爲了格式化你可以使用有條件選擇的動作Kendo Grid列值下面的例子。欲瞭解更多信息：How Do I Have Conditional Logic in a Column Client Template?

<div id="grid"></div> 

<script> 
function Getvalue(value) { 
    // console.log(value); 
    if (value && value != null && value.indexOf("A") == 0) 
     return "<b style='color:red'>" + value + "</b>"; 
    else 
     return ""; 
} 

$(document).ready(function() {  
    $("#grid").kendoGrid({ 
     dataSource: localDataSource, 
     columns: [ 
      { 
       field: "FirstName", 
       title: "First Name", template: '#=Getvalue(FirstName)#' 
      } 
     ], 
    }); 
}); 
</script> 

希望這有助於...

Answer 2

最常見的方式單獨風格格頭是應用CSS規則。 嘗試以下

#grd .k-grid-header .k-header 
{ 
    font-size: 8pt; 
    font-weight: bold; 
} 

此規則將讓您的「GRD」頭類和應用樣式