Conditional formatting of KO grid cells

Question

I'm using kogrid to display data as shown below:

My knockout vm makes an ajax call to an MVC controller to retrieve a DTO shaped as follows:

I would like to colour in RED the cell background that have values that failed validation. For example, the 1st element of the data array contains a "CostCentreIsValid" member with a value of "False", so I would like the "Cost Centre (Dim1)" column of the 1st row to be RED. For the same array element, the "AccountIsValid" member contains the value "True", so I would like the "GL Account (Account)" cell of the first row to be GREEN.

Knockout view model:

"use strict";
function ViewModel(interchangeId) {

    var edited = function (interchangeId, accountIsValid, costCentreIsValid, supplierIsValid, supplierNo, invoiceNo, costCentre, glAccount, amount, invoiceDesc, originalRec) {
        var self = this;
        // Properties
        self.interchangeId = interchangeId;
        self.supplierNo = ko.observable(supplierNo);
        self.invoiceNo = ko.observable(invoiceNo);
        self.costCentre = ko.observable(costCentre);
        self.glAccount = ko.observable(glAccount);
        self.amount = ko.observable(amount);
        self.invoiceDesc = ko.observable(invoiceDesc);
        self.originalRec = originalRec;
    }

    var editBatchVm = function () {
        var self = this;
        var $loadingIndicator = $('#loading-indicator');

        // Properties
        self.recs = ko.observableArray([]);
        self.selected = ko.observableArray();

        var textEditTemplate = '<div><input type=\"text\" data-bind=\"visible: $parent.selected(), value: $parent.entity[$data.field]" /><span data-bind=\"visible: !$parent.selected(), text: $parent.entity[$data.field]\"></span></div>';
        self.columnDefs = [
            { width: 100, field: 'supplierNo', displayName: 'Supplier No', cellTemplate: textEditTemplate },
            { width: 150, field: 'invoiceNo', displayName: 'Invoice No' },
            { width: 150, field: 'costCentre', displayName: 'Cost Centre (Dim1)', cellTemplate: textEditTemplate },
            { width: 200, field: 'glAccount', displayName: 'GL Account (Account)', cellTemplate: textEditTemplate },
            { width: 100, field: 'amount', displayName: 'Amount' },
            { width: 300, field: 'invoiceDesc', displayName: 'Invoice Description' },
        ];

        self.filterOptions = {
            filterText: ko.observable(""),
            useExternalFilter: false
        };

        self.pagingOptions = {
            currentPage: ko.observable(1),
            pageSizes: ko.observableArray([10, 20, 50]),
            pageSize: ko.observable(10),
            totalServerItems: ko.observable(0)
        };

        self.sortInfo = ko.observable({ column: { 'field': 'TimeReceived' }, direction: 'desc' });

        self.gridOptions = {
            data: self.recs,
            columnDefs: self.columnDefs,
            autogenerateColumns: false,
            showGroupPanel: true,
            showFilter: true,
            filterOptions: self.filterOptions,
            enablePaging: true,
            pagingOptions: self.pagingOptions,
            sortInfo: self.sortInfo,
            rowHeight: 35,
            selectWithCheckboxOnly: true,
            selectedItems: self.selected,
            canSelectRows: true,
            displaySelectionCheckbox: true,
        };

        self.batchId = ko.observable();

        // Methods

        self.get = function () {
            $loadingIndicator.show();

            $.ajax({
                url: BASE_URL + 'EditBatch/GetRecords',
                type: 'get',
                data: {
                    'interchangeId': interchangeId
                },
                contentType: 'application/json; charset=utf-8',
                success: function (data) {

                    var recsArray = [];
                    $.each(data, function (key, value) {
                        recsArray.push(
                            new edited(
                                interchangeId,
                                value.AccountIsValid,
                                value.CostCentreIsValid,
                                value.SupplierIsValid,
                                value.Transaction.Voucher[0].Transaction[0].ApArInfo.ApArNo,
                                value.Transaction.Voucher[0].Transaction[0].ApArInfo.InvoiceNo,
                                value.Transaction.Voucher[0].Transaction[0].GLAnalysis.Dim1,
                                value.Transaction.Voucher[0].Transaction[0].GLAnalysis.Account,
                                value.Transaction.Voucher[0].Transaction[0].Amounts.Amount,
                                value.Transaction.Voucher[0].Transaction[0].Description,
                                value.Transaction
                            )
                        );
                    });
                    self.recs(recsArray);
                    //batch level info
                    self.pagingOptions.totalServerItems(data.length);
                    self.batchId(data[0].BatchId);
                }
            });
            $loadingIndicator.hide();
        };

        self.resubmit = function () {
            var data = { Recs: ko.toJS(this.recs) };

            $.ajax({
                type: "POST",
                url: BASE_URL + 'EditBatch/Resubmit',
                data: ko.toJSON(data),
                contentType: 'application/json',
                async: true,
                success: function (data) {
                    window.location = BASE_URL + 'APInvoicesSummary/Index';
                },
                error: function (data) {
                    toastrs(false);
                }
            });
        }

        // Subscriptions

        self.pagingOptions.pageSize.subscribe(function (data) {
            self.pagingOptions.currentPage(1);
            self.get();
        });

        self.pagingOptions.currentPage.subscribe(function (data) {
            self.get();
        });

        self.sortInfo.subscribe(function (data) {
            self.pagingOptions.currentPage(1);
            self.get();
        });

        //self.gridOptions.selectedItems.subscribe(function (data) {
        //    if (data.length > 0) {
        //        self.date(data[0].date);
        //        self.voucherNo(data[0].voucherNo);
        //        self.description(data[0].description);
        //        self.amount(data[0].amount);
        //    }
        //});
    }

    /////////////////////////////////////////////////////////////////
    // Let's kick it all off
    var vm = new editBatchVm();
    ko.applyBindings(vm, $("#KoSection")[0]);
    vm.get();
};

Has anyone come across examples of how to do this please?

Answer 1

Here's how I fixed it:

In the site.css

.failed-validation { color: red; }

.passed-validation { color: green; }

and in the knockout js:

var supplierEditTemplate =
    `<div><input type=\"text\" data-bind=\"visible: $parent.selected(), value: 
       $parent.entity[$data.field]" />
      <span data-bind=\"visible: !$parent.selected(), text: $parent.entity[$data.field],
    css: $parent.entity.supplierIsValid() === 'True' ? \'passed-validation\' : \'failed-validation\'">
     </span>
    </div>`;
self.columnDefs = [
    { width: 100, field: 'supplierNo', displayName: 'Supplier No', cellTemplate: supplierEditTemplate }];