CODEWITHSUNDEEP
javascripthtmlhtml-tablerivets.js
J - C Sharper
J - C Sharper

Reputation: 1697

How to set color condition for cell in <table> when binding using Rivets?

I have following HTML table binding using Rivets:

    <table class="table table-bordered table-condensed table-striped line-item POSummaryTable">
        <thead>
            <tr>
                <th style="text-align: left;">Item Number</th>
                <th style="text-align: left;">Item Description</th>
                <th style="text-align: right;">PO Ordered Quantity</th>
                <th style="text-align: right;">PO Received Quantity</th>
                <th style="text-align: right;">PO Item Cost</th>
                <th style="text-align: right;">PO Total Cost</th>
                <th style="text-align: left;">Invoice Number</th>
                <th style="text-align: right;">Invoice Quantity</th>
                <th style="text-align: right;">Invoice Item Cost</th>
                <th style="text-align: right;">Invoice Total Cost</th>
                <th style="text-align: center;">View Details</th>
            </tr>
        </thead>

        <tbody>
            <tr data-rv-each-poitem="model.POItems" class="POSummaryTable_POItems">
                <td style="text-align: left;" data-rv-text="poitem.Number"></td>
                <td style="text-align: left;" data-rv-text="poitem.Description"></td>
                <td style="text-align: right;" data-rv-text="poitem.QuantityOrdered"></td>
                <td style="text-align: right;" data-rv-text="poitem.QuantityReceived"></td>
                <td style="text-align: right;" data-rv-text="poitem.Cost | currency"></td>
                <td style="text-align: right;" data-rv-text="poitem.TotalCost | currency"></td>
                <td style="text-align: right;"></td>
                <td style="text-align: right;" data-rv-text="poitem.InvoiceTotalQuantityAfterAdjustment"></td>
                <td style="text-align: right;" data-rv-text="poitem.AverageInvoiceItemCost | currency"></td>
                <td style="text-align: right;" data-rv-text="poitem.InvoiceTotalCostAfterAdjustment | currency"></td>
                <td style="text-align: center;"><button type="button" id="btnShowInvoiceItems" class="btn btn-primary btnShowInvoiceItems" data-rv-data-poitemid="poitem.PurchaseOrderItemId" data-rv-show="model.POItems | hasItem"><i class="icon-chevron-down"></i><span>Show Invoice Item(s)</span></button></td>
            </tr>
        </tbody>
    </table>

I want to set color condition for cells in Invoice Total Cost column, like in a row, if Invoice Quantity is 0, then the Invoice Total Cost would be red.

Upvotes: 0

Views: 318

Answers (1)

Zina
Zina

Reputation: 26

Have you checked out rv-class-[yourclass]?

I have created a little jsfiddle: http://jsfiddle.net/0jjwgpqt/

In your case:

html:

<td rv-class-red="poitem.isInvoiceTotalCostZero" rv-text="poitem.InvoiceTotalCostAfterAdjustment | currency"></td>

model:

    ...
    isInvoiceTotalCostZero: false,
    InvoiceTotalCostAfterAdjustment: function() {
        var calc = 2 - 2; //your calc
        this.isInvoiceTotalCostZero = 0 == calc;
        return calc;
    }
    ...

greetings

EDIT:

there are also two parameters available, from where you could access your objects

InvoiceTotalCostAfterAdjustment: function(event, scope) { ... }

Upvotes: 0

Related Questions