How to change color of row depending on a row'

I have a Kendo UI Grid, which contains four columns:

Highlight  MAC   Time  Message

The Highlight column can contain the values "yes" or "no", and this column is hidden.

I need to create a row template that will highlight (change the color or something) the row if the value is yes.

回答1:

You can apply condition in Row Template, Try Something like below

 $("#grid").kendoGrid({
        dataSource: ds,
        rowTemplate: '<tr class="#:Highlight  ==\"Yes\"? \"red\" : \"white\"#" data-uid="#= uid #"><td>#: MAC  #</td><td>#:Time  #</td><td>#:Message#</td></tr>'
    });

DataSource

var ds = new kendo.data.DataSource({
    data: [{
        Highlight  : "Yes",
        MAC   :"...",
        Time  :"...",
        Message:"...."
    }, {
        Highlight  : "No",
        MAC   :"...",
        Time  :"...",
        Message:"...."
    }]
});

回答2:

Please try with the below code snippet.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
    <style>
        .change-background {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="grid"></div>
    <script type="text/javascript">
        var ds = new kendo.data.DataSource({
            data: [{
                Highlight: "Yes",
                MAC: "111",
                Time: "aaa",
                Message: "a1"
            }, {
                Highlight: "No",
                MAC: "222",
                Time: "bbb",
                Message: "b2"
            }]
        });
        $("#grid").kendoGrid({
            dataSource: ds,
            dataBound: onDataBound,
            columns: [
                    { hidden: true, field: "Highlight" },
                    { field: "MAC" },
                    { field: "Time" },
                    { field: "Message" }
            ],
        });

        function onDataBound(e) {
            var grid = $("#grid").data("kendoGrid");
            var data = grid.dataSource.data();
            $.each(data, function (i, row) {
                if (row.Highlight == "Yes") {
                    var element = $('tr[data-uid="' + row.uid + '"] ');
                    $(element).addClass("change-background");
                }
            });
        }
    </script>
</body>
</html>

Let me know if any concern.