4

Using Magento 2.2, Admin Grid. I want to add style to Status column in sale order. How to do this?

enter image description here

4
  • <column name="status" class="Iota\EShopping\Ui\Component\Listing\Column\Status"> <settings> <filter>select</filter> <options class="Magento\Sales\Ui\Component\Listing\Column\Status\Options"/> <dataType>select</dataType> <label translate="true">Status</label> </settings> </column> Commented Aug 23, 2018 at 7:00
  • I using class. @LAW Commented Aug 23, 2018 at 7:03
  • Yes my bad, I was thinking you wanted to make every block different color based on status. Sorry, my bad!
    – Gagan
    Commented Aug 23, 2018 at 7:04
  • Check my answer. Commented Aug 23, 2018 at 8:35

2 Answers 2

6

Create a module named Vendor_Module. Create all the files and structure like below:

Step 1:

/app/code/Vendor/Module/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_Module',
    __DIR__
);

Step 2:

/app/code/Vendor/Module/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_Module" setup_version="0.0.1">
        <sequence>
            <module name="Magento_Sales"/>
        </sequence>
    </module>
</config>

Step 3:

/app/code/Vendor/Module/view/adminhtml/layout/sales_order_index.xml

<?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="Vendor_Module::css/grid.css"/>
    </head>
</page>

Step 4:

/app/code/Vendor/Module/view/adminhtml/ui_component/sales_order_grid.xml

<?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">Vendor_Module/js/grid/listing</item>
            </item>
        </argument>
    </columns>
</listing>

Step 5:

/app/code/Vendor/Module/view/adminhtml/web/css/grid.css

td.complete div {
    border: 1px solid #008000;
    padding: 5px 0px 6px 10px;
}

td.closed div{
    border: 1px solid #FF0000;
    padding: 5px 0px 6px 10px;
}

td.processing div{
    border: 1px solid #808080;
    padding: 5px 0px 6px 10px;
}

td.pending div{
    border: 1px solid #FFA500;
    padding: 5px 0px 6px 10px;
}

Step 6:

/app/code/Vendor/Module/view/adminhtml/web/js/grid/listing.js

define([
    'Magento_Ui/js/grid/listing'
], function (Collection) {
    'use strict';

    return Collection.extend({
        defaults: {
            template: 'Vendor_Module/ui/grid/listing'
        },
        getRowClass: function (col,row) {
            if(col.index == 'status'){
                if(row.status == 'complete') {
                    return 'complete';
                } else if(row.status == 'closed') {
                    return 'closed';
                } else if(row.status == 'processing') {
                    return 'processing';
                } else {
                    return 'pending';
                }
            }
        }
    });
});

Step 7:

/app/code/Vendor/Module/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($col,$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>

You can adjust the css from grid.css according to your requriement. You will get all classes according to your status.

1
  • your listing.html file replaces the $parent.getRowClass($col,$row()) css data binding,which removes the css classes data-grid-checkbox-cell and `data-grid-actions-cell from the grid. Can you update your template, to bring those classes back?
    – EpixRu
    Commented Feb 16, 2019 at 3:50
1

Please follow the step to apply style to your status field admin grid.

Vendor\Module Name\view\adminhtml\layout\default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head>
     <css src="<Vendor>_<Module Name>::css/style.css"/>
   </head>
</page>

After that create css file in your web folder like :

Vendor\Module Name\view\adminhtml\web\css\style.css add your style here for different statuses.

If you still query then let me know.

2
  • Do i need to have a renderer for use with style? Commented Aug 23, 2018 at 7:03
  • No need to renderer. and run command. Commented Aug 23, 2018 at 7:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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