Changing row color in Kendo MVC grid, using RowAction

Question

I'm hoping to use RowAction with a lambda to set the background color of a few rows of data in a Grid.

<%: Html.Kendo().Grid<HomeController.SuccessfulBuildsByDevice>()
                        .Name("Grid")
                        .Columns(columns =>
                        {                   
                            columns.Bound(p => p.A);
                            columns.Bound(p => p.B);
                        })
                        .Scrollable()
                        .Sortable()
                        .Filterable()
                        .RowAction(row =>
                            {
                                if(row.DataItem.A > row.DataItem.B)
                                    row.HtmlAttributes["style"] = "background:red";
                            })
                        .HtmlAttributes(new { style = "height:500" })  
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .Read(read => read.Action("_GetData", "Home"))
                            .ServerOperation(false)
                        )
                    %>

However, when I use the above the RowAction() doesnt seem to be called. I tried setting a breakpoint, etc. Am I missing something in the intended use of RowAction(), does anyone see an obvious problem?

Kalakalaazar

Answer 1

the problem is .Ajax() and .RowAction() are mutually exclusive

http://www.kendoui.com/forums/kendo-ui-web/grid/ajax-binding-and-rowaction-conflict-.aspx

Kalakalaazar

This answer works for me. I did not use the .Ajax(). – Emeldaemelen

Hours of research and digging to finally find an answer! – Pileup

Answer 2

Just because I came accorss this issue today and to save time here the short answer that worked for me based on the explanation from stuck

add this to the grid

.Events(e => e.DataBound("onDataBound"))

add this javascript above the grid

function onDataBound() {
    // get the grid
    var grid = this;
    // iterate through each row
    grid.tbody.find('>tr').each(function () {
        // get the row item
        var dataItem = grid.dataItem(this);
        // check for the condition
        if (dataItem.IsArchived) {
            // add the formatting if condition is met
            $(this).addClass('bgRed');
        }
    })
}

Christiano