Styling cell in Kendo grid via ClientTemplate

Question

I'm attempting to style the 'containing' cell in a kendo (mvc) grid. The column is bound as follows:

@(Html.Kendo().Grid(Of RTFVM)().Name("RealTimeFinancials") _
 .Columns(Sub(c)
                  c.Bound(Function(x) x.Line.Months(0).Total).Title("Jan").ClientTemplate("#= processCell(Line.Months[0])#")
etc

And my JS conditional styling function is as follows:

 function processCell(CellData) {
    var monthNumber = CellData.MonthNumber;
    var output;

    switch(CellData.Message) {
        case null: output = fn(CellData.Total); break;
        case 'Total': output = '<div style="background-color: Red;"><strong>' + fn(CellData.Total) + '</strong></div>';
            break;
        default: output = '<small>' + CellData.Message + '</small>';
    }

    return output;
}

Using the above I can style the text that appears in the cell but apparently not the cell itself (I guess you could call it the text object's 'parent'/container).

Is there any way to access/style the cell from within the ClientTemplate or do I have to separately find the cell by using the databound event using the data-uid row/column-find method?

Answer 1

Try like:

Add a class/id to the output "div" that is returned from the "processCell" function and using that class get the parent element of the cell and add styling to that cell. Hope it works!

Answer 2

After much research and a helping nudge from Satya I found a broad generic solution based on Daniel's answer here - though it only seems to work partially:

I have created a function which attempts to style the row based on the value of a field on the datasource triggered on the grid.databound event:

function LineItems_Databound() {
    var grid = $("#RealTimeFinancials").data("kendoGrid");
    var data = grid.dataSource.data();
    $.each(data, function (i, row) {
        var LineItem = row.Message;

        switch(LineItem) {
            case 'Total': $('tr[data-uid="' + row.uid + '"]').addClass('customClass'); break;        
        }
    });
}

customClass is:

.customClass {
        border-top-style:double;
        border-style:double;
        border-top-width:thick;
        background-color:lightyellow;
    }`

The issue I have (and it occurs also when simply setting the .css on the grid ) is that whilst the background color of the row is changed, the grid borders are not. I cannot seem to style the cell/row borders at all.

I think it does answer the broad question I had, though in this scenario there are still issues.

I've opened a separate question to address the apparent css class issue here