Search code examples
oracle-jet

Changing the colour of row in table Oracle Jet


I am using Oracle Jet with PHP to design a website. Here divided by type I want to change the color of each row. Can anyone help with how to change the color of each row using the custom row template dynamically

<div id="pagingControlfsa">
    <table id="table" summary="Activity List" aria-label="Activity"
           data-bind="ojComponent: {component: 'ojTable', data: pagingDatasource, columns:
            [{headerText: 'Remove', id: 'column1', sortable: 'disabled'},
             {headerText: 'ID', field: 'activityid'},
             {headerText: 'Activity Type', field: 'activityname'},
             {headerText: 'Status', field: 'status'},
            {headerText: 'Action', id: 'column2', sortable: 'disabled'}],
             rowTemplate: 'row_tmpl',
             rootAttributes: {'style':'width: 100%;'}}">
    </table>
    <div id="paging" data-bind="ojComponent: {component: 'ojPagingControl', data: pagingDatasource, pageSize: 15}">
    </div>
</div>
<br/>
<br/>
<script type="text/html" id="row_tmpl">    
    <tr>
        <td><input type="checkbox" data-bind="attr: {id: activityid}"/></td>
        <td><div id='actId' data-bind="text: activityid"></div></td>
        <td><div id="Resource" data-bind="text: name"></div></td>
        <td><div id="statusact" data-bind="text: status"></div></td> 
         <td><div id="modify_div" data-bind="click:function(data,event){ $parent.editRecord(activityid,data,event)}">Modify</div></td>
    </tr>
</script>

Solution

  • You could use the knockout style binding to do this. You'd probably need to add this to each td element in your row template in order to color each cell in the row:

            <td><div data-bind="text: activityid, style: {'background-color': activityname = 'Foo' ? 'green' : 'red'}"></div></td>
    

    The knockout documentation has good info on the style binding. They also have a css binding as well if you'd rather go that route.