2

I have created custom module and it has Ui component grid in admin side.. In that grid has status column based on different status color should be change. Eg; if the status is 'approved' text color should be GREENenter image description here

6

Suppose following column as a sample order status column:

<column name="status" component="SR_MagentoCommunity/js/grid/columns/select">
    <settings>
        <filter>select</filter>
        <options class="Magento\Sales\Ui\Component\Listing\Column\Status\Options"/>
        <dataType>select</dataType>
        <label translate="true">Status</label>
    </settings>
</column>

Actually, you need to change component here.

Now create a component class and return color getStatusColor according to your status:

app/code/SR/MagentoCommunity/view/adminhtml/web/js/grid/columns/select.js

define([
    'underscore',
    'Magento_Ui/js/grid/columns/select'
], function (_, Column) {
    'use strict';

    return Column.extend({
        defaults: {
            bodyTmpl: 'SR_MagentoCommunity/ui/grid/cells/text'
        },
        getStatusColor: function (row) {
            if (row.status == 'processing') {
                return '#FFA07A';
            }
            return '#90EE90';
        }
    });
});

Corresponding template:

app/code/SR/MagentoCommunity/view/adminhtml/web/template/ui/grid/cells/text.html

<div class="data-grid-cell-content" data-bind="style: { 'color': $col.getStatusColor($row())}" text="$col.getLabel($row())"/>
  • thank you perfectly got it what exactly i need... – Gomathi Mar 11 at 6:01

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.