Kendo UI Grid Change Row Style
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<button id="btnMarkRed">Mark Checked Items Color Red</button>
<div id="grid" style="height: 365px"></div>
CSS
td.color-red
{
color: red !important;
font-weight: 700;
}
JavaScript
$(document).ready(function () {
var dataSource;
var kendoCheckedIds = {};
dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 10
});
$("#grid").kendoGrid({
dataSource: dataSource,
groupable: true,
sortable: true,
selectable: "row",
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{ template: "<input type='checkbox' class='checkbox' />", width: 30 },
{
field: "ContactName",
title: "Contact Name",
width: 200
}, {
field: "ContactTitle",
title: "Contact Title",
width: 250
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
})
.data("kendoGrid")
.table.on("click", ".checkbox", selectKendoGridRow);
function selectKendoGridRow() {
var checked = this.checked,
row = $(this).closest("tr"),
grid = $('#grid').data("kendoGrid"),
dataItem = grid.dataItem(row);
if (checked) {
//-select the row
kendoCheckedIds[dataItem.uid] = checked;
grid.select(row); // select the item
//row.addClass("k-state-selected");
} else {
...