I have a custom logger for magento2. Now i want for in the admin grid to change the table row color based on the status of the row. For example a row got status: warning, the table row has to be orange. What is the correct way to get this done.
Thanks.
Try following simple way, as an example I use sales order grid:
Step 1: Create SR/ModifiedSalesOrderGrid/view/adminhtml/layout/sales_order_index.xml where you can define css file.
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="SR_ModifiedSalesOrderGrid::css/grid.css"/>
</head>
</page>
Step 2: Create SR/ModifiedSalesOrderGrid/view/adminhtml/ui_component/sales_order_grid.xml for overwriting listing component
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<columns name="sales_order_columns">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">SR_ModifiedSalesOrderGrid/js/grid/listing</item>
</item>
</argument>
</columns>
</listing>
Step 3: Create js component SR/ModifiedSalesOrderGrid/view/adminhtml/web/js/grid/listing.js
define([
'Magento_Ui/js/grid/listing'
], function (Collection) {
'use strict';
return Collection.extend({
defaults: {
template: 'SR_ModifiedSalesOrderGrid/ui/grid/listing'
},
getRowClass: function (row) {
if(row.status == 'complete') {
return 'complete';
} else if(row.status == 'closed') {
return 'closed';
} else if(row.status == 'processing') {
return 'processing';
} else {
return 'pending';
}
}
});
});
Step 4: Create template SR/ModifiedSalesOrderGrid/view/adminhtml/web/template/ui/grid/listing.html
<div class="admin__data-grid-wrap" data-role="grid-wrapper">
<table class="data-grid" data-role="grid">
<thead>
<tr each="data: getVisible(), as: '$col'" render="getHeader()"/>
</thead>
<tbody>
<tr class="data-row" repeat="foreach: rows, item: '$row'">
<td outerfasteach="data: getVisible(), as: '$col'"
css="$parent.getRowClass($row())" click="getFieldHandler($row())" template="getBody()"/>
</tr>
<tr ifnot="hasData()" class="data-grid-tr-no-data">
<td attr="colspan: countVisible()" translate="'We couldn\'t find any records.'"/>
</tr>
</tbody>
</table>
</div>
Step 5: Create css file SR/ModifiedSalesOrderGrid/view/adminhtml/web/css/grid.css
td.complete {
background-color: #008000;
border: 1px solid #000000;
}
td.closed {
background-color: #FF0000;
border: 1px solid #000000;
}
td.processing {
background-color: #808080;
border: 1px solid #000000;
}
td.pending {
background-color: #FFA500;
border: 1px solid #000000;
}
You can download the free extension "Grid Colouring" to get it done)
