Row styling based on data state

by RichardAD

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css "></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css">
<button id='btn' class='k-button' data-nodeid='111'>XYZ</button> 

<div id='grid1'></div>
<div id='grid2'></div>

CSS

td {width:50px}
tr.special{background:yellow}

JavaScript

/* basis: kendoUI 1.515, jQuery1.7.1 */ 

var rows = [
    { "one": "1", "two": "21", "three": "31", "nodeid":' ' }
,   { "one": "2", "two": "22", "three": "32", "nodeid":' ' }
,   { "one": "3", "two": "23", "three": "33", "nodeid":'123' }
,   { "one": "4", "two": "24", "three": "34", "nodeid":' ' }    
    ];

var btnNodeid = $('#btn').data('nodeid');

$('#grid1').kendoGrid({
    dataSource: rows,
    rowTemplate: '<tr><td>${one}</td><td>${two}</td><td>${three}</td></tr>'
});