2

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.

  • It would be colorful. – Khoa TruongDinh Jan 25 '18 at 16:23
  • I like it to be colorful. But how to get it done – Johan Jan 26 '18 at 9:44
5

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;
}

Download full module from here

1

You can download the free extension "Grid Colouring" to get it done)

https://extait.com/grid-colouring.html

  • This extension is suitable for colorizing the orders grid only and need to be modified. :( – Siarhey Uchukhlebau Jan 26 '18 at 14:12
  • Yeah, but if you need coloring other grids just check how it is working in this module ;) – Dmitriy Chizhov Jan 26 '18 at 14:23
  • Sure, good idea. In a few words, this extension replaces component & template of a grid to its own, where colors adding using CSS. – Siarhey Uchukhlebau Jan 26 '18 at 14:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.