Applying style to particular cell in knockout JS dynamic table depending upon it value

Question

I don't have any experience in Knockout js but since I have to implement the functionality and struggling to get my hands on this scenario.

JSP files are fetching JSON data and it is passed to HTML template to create dynamic table.But i have to match particular values and give different styling to cells(Need to change color).

I explored and found out if Foreach is used and using if condition to apply css class can work but since table is getting created dynamically so finding it difficult to achieve it.

Providing the code below,i know angular way to do it but since its in knockout JS am struggling.

The above JSON data fetching dynamically from DB, if App Server is responding then map to “Yes” otherwise map to “No”, in additionally I have to set Yes mean green color, No means Red color. I mapped responding values, it is working fine. But I am not able to set colors for responding values (Yes means green and No means red color) in Knockout js. Can you please suggest me on this

 <table  id="monitorTable" summary="Table Data Test" aria-label="Table Data Test"
                        contextmenu="empty"
                        data-bind="ojComponent: {component: 'ojTable',
                        data: testdatasource,
                        columnsDefault: {sortable: 'disabled'},
                        columns: tableColumns,
                        scrollPolicy: scrollPolicy,
                        scrollPolicyOptions: scrollPolicyOptions}"></table>

Below here is the JSOn data fetched from server and passed to table

 {
    "label": "App Server",
    "collection": [{
        "responding": "Yes",
        "appserver": "DEFAULT",
        "className": "success",
        "id": 1
    }, {
        "responding": "No",
        "appserver": "ORACLEQUEUE",
        "className": "failed",
        "id": 2
    }, {
        "responding": "No",
        "appserver": "SECONDARY",
        "className": "failed",
        "id": 3
    }, {
        "responding": "No",
        "appserver": "TERTIARY",
        "className": "failed",
        "id": 4
    }],
    "serverTimestamp": "2017-07-07T03:51:21.949+0000",
    "dataTimestamp": "2017-07-07T03:51:21.949+0000",
    "tableColumns": [{
        "headerText": "App Server",
        "field": "appserver",
        "sortable": "disabled"
    }, {
        "headerText": "Responding",
        "field": "responding",
        "sortable": "disabled",
        "className": ""
    }],
    "scrollPolicy": "auto",
    "scrollPolicyOptions": {
        "fetchSize": "15",
        "maxCount": "1000"
    }
}

Here is the code which fetches data from server by JSP files

function addScalabilityMonitors() {
            console.log("moved to scalability");
            //App Scalability
            monitors.addMonitorPoint(sts.apiBaseUrl() + 'ScalabilityAppServer1.jsp', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability');
            //Web Scalability
            monitors.addMonitorPoint(sts.apiBaseUrl() + 'ScalabilityWebServer1.jsp', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability');
            //Response Time
            monitors.addMonitorPoint(sts.apiBaseUrl() + 'Scalability.json', 'oj-masonrylayout-tile-3x2', true, 15000, 'gauge', 'scalability');
            //Log files
            monitors.addMonitorPoint(sts.apiBaseUrl() + 'logfile.json', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability');
            monitors.addMonitorPoint(sts.apiBaseUrl() + 'ProcessSchedules.json', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability');
            monitors.addMonitorPoint(sts.apiBaseUrl() + 'BusinessSequence.json', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability');
            monitors.addMonitorPoint(sts.apiBaseUrl() + 'DatabaseJobs.json', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability');
            //myPostProcessingLogic();    
        }

I tried to read the documentation for this, also tried various things but failed to implement.

score 2 · Answer 1 · answered Jul 07 '17 at 13:16

Assuming you have access to the css this is pretty simple. If not, it's only slightly simple. Knockout has a databinding specifically for css. Here's an example.

function Server(data) {
  var self = this;

  self.Name = ko.observable(data.Name);
  self.Status = ko.observable(data.Status);
}

function viewModel() {
  var self = this;

  self.Servers = ko.observableArray();

  self.Load = function() {
    self.Servers.push(new Server({
      Name: "Email",
      Status: "Online"
    }));
    self.Servers.push(new Server({
      Name: "TPS Reports",
      Status: "Offline"
    }));
  };

  self.Load();

}

ko.applyBindings(new viewModel());

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<h3> CSS Control</h3>
<table border=1>
  <thead>
    <tr>
      <th> Server Name</th>
      <th> Server Status</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: Servers">
    <tr>
      <td> <span data-bind="text: Name"> </span> </td>
      <td data-bind="css: { red: Status() == 'Offline', blue: Status() == 'Online' } "> <span data-bind="text: Status"> </span> </td>
    </tr>
  </tbody>
</table>
<br><br><br><br>
<h3> No CSS Control</h3>
<table border=1>
  <thead>
    <tr>
      <th> Server Name</th>
      <th> Server Status</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: Servers">
    <tr>
      <td> <span data-bind="text: Name"> </span> </td>
      <!-- Note: anything with a hyphen must be surrounded in single quotes -->
      <td data-bind="style: { 'background-color': Status() == 'Online' ? 'green' : 'black' } "> <span data-bind="text: Status"> </span> </td>
    </tr>
  </tbody>
</table>

With your code, you would just make some additions to the data-binding in question.

Applying style to particular cell in knockout JS dynamic table depending upon it value

1 Answers1