CODEWITHSUNDEEP
knockout.js
seadrag0n
seadrag0n

Reputation: 848

Column name condition when dynamically binding grid in knockout

I am having the following tbody with dynamic rows and columns:

 <tbody data-bind="foreach: ClientListingData">
        <tr>
            <!-- ko foreach: $parent.OrderedColumns -->
            <!-- if: $parent[OrderedColumns] == 'ClientID' -->
            <td class="greenbg">
                <span data-bind="text:  $parent[$data]"></span>
            </td>
            <!-- /ko -->
            <!-- if: $parent != 'ClientId' -->
            <td>
                <span data-bind="text:  $parent[$data]"></span>
            </td>
            <!-- /ko -->
            <!-- /ko -->
        </tr>
    </tbody>

ClientListingData contains the entire grid data in JSON format and OrderedColumns is an array object containing the column name like [ClientID,ClientName..etc] Which I am usng to dynamically bind my grid. My requirement is when the column name is ClientID I want td to have a different css class which I am trying to above. How can I read the name of the column using the if binding and do something using the OrderedColumns array? Also is it possible to nest conditions using if binding in my example?Like if the ClientID is greater than 10, I want the td to have orange background and if it is greater than 100, the td should have red background.

Upvotes: 0

Views: 465

Answers (1)

4imble
4imble

Reputation: 14416

There's a binding specifically for CSS

http://knockoutjs.com/documentation/css-binding.html

<div data-bind="css: { profitWarning: currentProfit() < 0 }">
   Profit Information
</div>

<script type="text/javascript">
    var viewModel = {
        currentProfit: ko.observable(150000) // Positive value, so initially we don't apply the "profitWarning" class
    };
    viewModel.currentProfit(-50); // Causes the "profitWarning" class to be applied
</script>

Upvotes: 1

Related Questions