Gray out a row in kendo grid based on column value

Question

I have a Kendo Grid whose values get populated based on a post call. I need to gray out an entire row if one of the column has a value "REGISTERED".

Is there a way we can achieve this?

Answer 1

Add a handler function for the onDataBound event . In the onDataBound event handler, add jQuery that grey out column, something like this:

function onDataBound(event) {

    // ...
    // Assumes your Kendo grid DOM element, or other appropriate element enclosing your disabled rows, is in the "el" variable

    el.find( ":contains('REGISTERED')" ).addClass("disabled");
}

<style>
.disabled { color: #999; } /* Or however you want to grey it out */
</style>

Answer 2

Look this example, I'm checking every row to see if it matches a condition, then colouring it. You just need to add this event in the DataBound event of the grid like this

.DataBound("onRowBound")

Then, check the condition

static onRowBound(e) {
   var grid = $("#Funciones").data("kendoGrid");
    grid.tbody.find('>tr').each(
        function () {
            var dataItem = grid.dataItem(this);
            if (dataItem.ColumnName == "REGISTERED") {
                $(this).css('background', 'gray');
            }
        });
}