how to style kendo grid mvc using CSS - kendo-asp.net-mvc

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?](http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#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

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