Gsyfuy

How to draw dashed arc of a circle behind pyramid?

Has a sovereign Communist government ever run, and conceded loss, on a fair election?

Source permutation

Why do phishing e-mails use faked e-mail addresses instead of the real one?

What would be the most expensive material to an intergalactic society?

Can't make sense of a paragraph from Lovecraft

Can one live in the U.S. and not use a credit card?

Plausibility of Mushroom Buildings

Help find my computational error for logarithms

What will happen if my luggage gets delayed?

Doubts in understanding some concepts of potential energy

Does a difference of tense count as a difference of meaning in a minimal pair?

Why restrict private health insurance?

How to write a chaotic neutral protagonist and prevent my readers from thinking they are evil?

Are all players supposed to be able to see each others' character sheets?

Was it really inappropriate to write a pull request for the company I interviewed with?

Signed and unsigned numbers

Why couldn't the separatists legally leave the Republic?

What stops an assembly program from crashing the operating system?

How to check whether module is loaded with custom configurations?

Are small insurances worth it?

Is a piano played in the same way as a harmonium?

How many characters using PHB rules does it take to be able to have access to any PHB spell at the start of an adventuring day?

Having the player face themselves after the mid-game

how to modify custom status text color in UI component grid magento 2?

Magento2 : How to change custom status text color in admin UI Component gridHow to make color coding view in magento grid for different optionMagento 2 custom grid column sort orderOverride ComponentFiltersTypeRange for custom grid columnMagento 2 - How to apply custom function on admin grid columnMagento 2 : Change Admin grid column widthMagento 2: How to add a Color Picker in Grid?Magento2 Ui Component Color Grid RowMagento2 how to modify admin grid collection using ui componentHow to make admin grid text to skip to next line?Magento2 : How to change custom status text color in admin UI Component grid

0

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 GREEN

magento2 admin grid

share|improve this question

edited 17 mins ago

Gomathi

asked 27 mins ago

GomathiGomathi

787

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Possible duplicate of Magento2 : How to change custom status text color in admin UI Component grid
  
  – Rakesh Donga
  25 mins ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  try this extension: marketplace.magento.com/igorludgero-colorstatus.html
  
  – Shoaib Munir
  25 mins ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Check my answer
  
  – Sohel Rana
  6 mins ago
  

  
  
  
  

add a comment | 

0

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 GREEN

magento2 admin grid

share|improve this question

edited 17 mins ago

Gomathi

asked 27 mins ago

GomathiGomathi

787

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Possible duplicate of Magento2 : How to change custom status text color in admin UI Component grid
  
  – Rakesh Donga
  25 mins ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  try this extension: marketplace.magento.com/igorludgero-colorstatus.html
  
  – Shoaib Munir
  25 mins ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Check my answer
  
  – Sohel Rana
  6 mins ago
  

  
  
  
  

add a comment | 

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 GREEN

magento2 admin grid

share|improve this question

edited 17 mins ago

Gomathi

asked 27 mins ago

GomathiGomathi

787

share|improve this question

edited 17 mins ago

Gomathi

asked 27 mins ago

GomathiGomathi

787

share|improve this question

edited 17 mins ago

Gomathi

asked 27 mins ago

GomathiGomathi

787

asked 27 mins ago

GomathiGomathi

787

asked 27 mins ago

GomathiGomathi

787

1 Answer
1

active

oldest

votes

1

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="MagentoSalesUiComponentListingColumnStatusOptions"/>

        <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())"/>

share|improve this answer

answered 15 mins ago

Sohel RanaSohel Rana

22.5k34460

add a comment | 

Your Answer

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f265199%2fhow-to-modify-custom-status-text-color-in-ui-component-grid-magento-2%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

1

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="MagentoSalesUiComponentListingColumnStatusOptions"/>

        <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())"/>

share|improve this answer

answered 15 mins ago

Sohel RanaSohel Rana

22.5k34460

add a comment | 

1

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="MagentoSalesUiComponentListingColumnStatusOptions"/>

        <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())"/>

share|improve this answer

answered 15 mins ago

Sohel RanaSohel Rana

22.5k34460

add a comment | 

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="MagentoSalesUiComponentListingColumnStatusOptions"/>

        <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())"/>

share|improve this answer

answered 15 mins ago

Sohel RanaSohel Rana

22.5k34460

<column name="status" component="SR_MagentoCommunity/js/grid/columns/select">

    <settings>

        <filter>select</filter>

        <options class="MagentoSalesUiComponentListingColumnStatusOptions"/>

        <dataType>select</dataType>

        <label translate="true">Status</label>

    </settings>

</column>

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

        }

    });

});

<div class="data-grid-cell-content" data-bind="style: { 'color': $col.getStatusColor($row())}" text="$col.getLabel($row())"/>

share|improve this answer

answered 15 mins ago

Sohel RanaSohel Rana

22.5k34460

answered 15 mins ago

Sohel RanaSohel Rana

22.5k34460

answered 15 mins ago

Sohel RanaSohel Rana

22.5k34460