how to style kendo grid mvc using CSS

Question

This is what I have for the grid

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

I would like to know if there is a better way to style the header using CSS. Thanks.

Answer 1

There are some kind of methods that I have applied for styling Kendo grid as shown below, but I am not sure if it is helpful for you.

For defining style properties of Kendo grid:

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

For styling individual cells of grid with a template: In order to format Kendo Grid Column value with conditionally chosen action you can use the example below. For more information: 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>

Hope this helps...

Answer 2

the most common way to style a grids header individually is to apply css rules. try the following

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

this rule will get your "grd" header class and apply the styles