Grouping breaks cell formatting

[Erik]

We are using code from this example Here in the databinding of our grid to conditionally set cell background color but when we turn on grouping, the code fails due to the addition of the grouping rows added.  we have tried getting the child rows of the group but just cannot get the syntax right.  Any help would be great.

Thanks, 

Erik

for (var x = 0; x < Months.length; x++) {
    // get the index of the column
    var columnIndex = this.wrapper.find(".k-grid-header [data-field=" + Months[x] + "]").index()-1;

    // iterate the data items and apply row styles where necessary
    var dataItems = e.sender.dataSource.view();
    for (var j = 0; j < dataItems.length; j++) {
        var group = e.sender.tbody.find(".k-grouping-row");
        var row = group.children().find("[data-uid='" + dataItems[j].uid + "']");
        var cell = row.children().eq(columnIndex);
        var monthNum = x + 1;
        if (x === 12) {
            monthNum = 12;
        }
        if (((selFY === curfyear) && (curfmon > monthNum)) || (selFY < curfyear)) {
            cell.addClass('disabledColor');
        }
    }

[Viktor Tachev]

Hi Erik,

Note that when grouping is applied the view() method for the DataSource would return the groups. In that case you can get the items with the data() method. The dataBound handler would look similar to the following.

dataBound: function(e) {
    // get the index of the UnitsInStock cell
    var columns = e.sender.columns;
    var columnIndex = this.wrapper.find(".k-grid-header [data-field=" + "UnitsInStock" + "]").index();

    // iterate the data items and apply row styles where necessary
    var dataItems = e.sender.dataSource.data();
    for (var j = 0; j < dataItems.length; j++) {
        var units = dataItems[j].get("UnitsInStock");
        var discontinued = dataItems[j].get("Discontinued");

        var row = e.sender.tbody.find("[data-uid='" + dataItems[j].uid + "']");
        if (discontinued) {
            row.addClass("discontinued");
        }

        var cell = row.children().eq(columnIndex);
        cell.addClass(getUnitsInStockClass(units));
    }
}

For your convenience I have applied the approach in the dojo example. Check it out below and let me know how it works for you.

• http://dojo.telerik.com/iqAMO

Regards,
Viktor Tachev
Telerik by Progress

[Erik]

This worked perfect, Thanks!

[Andrew]

Hi Erik,

 

I'm using the code above ok now, but when grouping, the column indices returned by this bit are off: 

var columnIndex = this.wrapper.find(".k-grid-header [data-field=" + "UnitsInStock" + "]").index();

 

So it's colouring the previous column when I have 1 group added. How do you recommend to account for the column index and colour the correct cell?  Thanks

[Viktor Tachev]

I tested the sample and it seems to apply the styles correctly with a single group:

http://dojo.telerik.com/oziHemAZ

Note that there are custom styles that are applied to the entire row based on the Discontinued value and also styles applied on the Units In Stock cell depending on its value.

 

In case I am missing something, would you describe the steps that should be follow to replicate the unexpected behavior?