如何使用 CSS 设置剑道网格 mvc 的样式

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 设置标题样式。谢谢。

Answer 1

我已经申请了一些样式方法，Kendo grid如下所示，但我不确定它是否对您有帮助。

用于定义 Kendo 网格的样式属性：

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

使用模板为网格的单个单元格设置样式： 为了Kendo Grid使用有条件选择的操作格式化列值，您可以使用下面的示例。有关更多信息：如何在列客户端模板中使用条件逻辑？

<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”标头类并应用样式