Kendo Grid Style and Formatting

Kendo Grid Style

Adjusting the style of the kendo grid text you need to override the kendo styles. The following will adjust the text and line size.

    .k-grid {
        font-size: 10px;
    }
    .k-grid td { 
        line-height: 2em;
    }

References
http://www.telerik.com/forums/grid-styling-part-2
http://jsfiddle.net/dimodi/MjKmJ/
http://www.telerik.com/forums/grid-100-height


Kendo Grid Column Templates

For a bool field want to show a TICK image instead of the true/false and without using a checkbox.
For this example the image comes from the Kendo sprites
http://demos.telerik.com/kendo-ui/styling/icons

@(Html.Kendo().Grid<RegisterViewModel>()
  .Name("GridReg")
  .Columns(columns => {
     columns.Bound(p => p.Id).Hidden(true);
     columns.Bound(p => p.Checked).Width(95).ClientTemplate(
                "# if (Checked == true) { #" +
                    "<span class=\"k-icon k-i-tick\"></span>" +
                "# } #"
            );
  })

Kendo Grid Cell colours

http://stackoverflow.com/questions/11270288/how-do-i-change-the-background-color-of-a-kendo-ui-for-mvc-grid-cell
http://www.telerik.com/forums/conditional-read-only-formatting-of-grid-cells

Can use templates:

columns.Bound(p => p.DrawingRef).Width(235).ClientTemplate(  
    "# if (Highlight === 0 ) { #" +
        "<span class='CBdrawingstatusOriginal'>#:DrawingRef#</span>" +
    "# } else if (Highlight === 1 ) { #" +
        "<span class='CBdrawingstatusYellow'>#:DrawingRef#</span>" +
    "# } else { #" +
        "<span class='CBdrawingstatusGreen'>#:DrawingRef#</span>" +
    "# } #"
);

OR

Make use of the HtmlAttribute and have it dependant on the data. If the model has a field called StatusColour that is a valid colour for a style or class then

columns.Bound(p => p.Status).HtmlAttributes(new { style = "background-color:#:StatusColour#;" });

columns.Bound(p => p.Status).HtmlAttributes(new { @class = "#:StatusColour#" });  

NOTE: The HtmlAttribtues ie the #:StatusColour# only works if the datasource is defined. I had a readonly grid that wasn’t working until I added the

.DataSource(dataSource => dataSource.Custom().Schema(schema => schema
.Model(model => {model.Id(p => p.Id);})))

Kendo Grid Date Formatting

See kendo culture notes

    columns.Bound(p => p.CreateDate).Format("{0:g}");

Above referring to version
Telerik Kendo UI Professional Q1 2015
Telerik UI for ASP.NET MVC Q1 2015


comments powered by Disqus