Conditional TD background formatting based on data

Setup:

I'm dynamically creating multiple grids on a single page based on some table definition criteria passed into the page via an MVC template.

There are common columns that are easily defined, and then there are additional column values that vary by grid. (Each grid has a unique ID value)

I add the additional columns after each main grid has been defined, then use an ajax call to get the data to populate each grid. 

Here's the code that is invoked on the main page:

@using ForecastMvc.Models;
@model BuildMatricesModel

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

    
@ViewBag.Title



@Html.DisplayFor(x => x.Layouts)

Layouts is a list of type MatrixLayout.

MatrixLayout.cshtml is below:

@model ForecastMvc.DataLayer.MatrixLayout



    @Model.Description

As you can see, the common column definitions are setup in the Page.OnLoad event, and the event handler is setup for each grid with the unique grid index and a list of the additional column values.

Following the grid definition, I then add the additional length columns in the AddLengthColumns function and then call the GetData function to invoke the Ajax call to get the data for that particular grid. 

The matrix definition is passed back to the controller with each grid that is requesting the data. That way each ajax call is self-contained. 

Here is the JavaScript for the main page:

The problem I'm having is in the FormatGrid function for the dynamic columns. I've stepped through the JavaScript, and I'm finding the Oversold + dynamicColumn value and I'm finding each of the other columns where I need to change the background color, but the background color never changes.

What am I doing wrong?  It's got to be something simple that I'm missing. Am I correct?

Hello,

 

I believe the issue is that the rows are being re-rendered after the formatting of the cells.

Note there are a lot of reasons for rendering the rows again, for example changing a page, or each interaction that causes data binding.

 

You should apply the formatting of the cells into the rowsRendered event. In this way the cells will receive their formatting every time rows are being rendered/re-rendered.

Hello Deyan,

Thanks for replying. I am using the rowsRendered event to apply formatting. 

        rowsRendered: function() {
                FormatGrid('@Model.GridIndex', @Html.Raw(Json.Encode(Model.LengthValues)));
            }

Ken

Hello Kenneth,

I've missed that one, but it seems correct. Can you confirm that the classes are applied to the cells?

Could those styles be overridden by something else?

I'm not sure. This is what I see in the debugger when I set a breakpoint after the length column is selected using this jQuery:

                                var lengthCell = $(gridSelector).igGrid("cellById", rowIndex, dynamicColumn);
                                $(lengthCell).addClass("overSoldHighlight");

it selects something, and I add the class to it, but I can't tell if the selector is getting a TD element. I think the prevObject appears to point to the grid if that's of any help.  

That is an empty object. It seems that the grid cannot find a cell with the specified parameters.

Note that cellById is using rowId(not rowIndex) and columnKey. Rows of an igGrid will have ids if you define primaryKey. To get the cell you can alternatively use cellAt and getVisibleIndexByKey:

var cellIndex = $(gridSelector).igGrid("getVisibleIndexByKey", dynamicColumn);
var lengthCell = $(gridSelector).igGrid("cellAt", rowIndex, cellIndex);

That helped a great deal, thank you. It's finding the cells now and applying the styling. 

That's great. I'm glad to hear you got it working.