Tjyylli

Did Amazon pay $0 in taxes last year?

Does an unused member variable take up memory?

Doesn't allowing a user mode program to access kernel space memory and execute the IN and OUT instructions defeat the purpose of having CPU modes?

Is it a Cyclops number? "Nobody" knows!

Why is a very small peak with larger m/z not considered to be the molecular ion?

Doubts in understanding some concepts of potential energy

Which situations would cause a company to ground or recall a aircraft series?

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

Which classes are needed to have access to every spell in the PHB?

Why does Central Limit Theorem break down in my simulation?

When a wind turbine does not produce enough electricity how does the power company compensate for the loss?

How exactly does an Ethernet collision happen in the cable, since nodes use different circuits for Tx and Rx?

Is it possible to avoid unpacking when merging Association?

How to check whether module is loaded with custom configurations?

Shifting between bemols (flats) and diesis (sharps)in the key signature

Is divide-by-zero a security vulnerability?

Confusion about Complex Continued Fraction

Can we track matter through time by looking at different depths in space?

How can I get players to focus on the story aspect of D&D?

What is Tony Stark injecting into himself in Iron Man 3?

Whose blood did Carol Danver's receive, Mar-vell's or Yon-Rogg's in the movie?

What is better: yes / no radio, or simple checkbox?

Getting the || sign while using Kurier

What are some noteworthy "mic-drop" moments in math?

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 optionNot able to display text Total in CSV for custom gridMagento 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 RowHow to make admin grid text to skip to next line?Magento2 : How to change custom status text color in admin UI Component grid

1

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 23 mins ago

Gomathi

asked 33 mins ago

GomathiGomathi

857

• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Check my answer
  
  – Sohel Rana
  12 mins ago
  

  
  
  
  

add a comment | 

1

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 23 mins ago

Gomathi

asked 33 mins ago

GomathiGomathi

857

• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Check my answer
  
  – Sohel Rana
  12 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 23 mins ago

Gomathi

asked 33 mins ago

GomathiGomathi

857

share|improve this question

edited 23 mins ago

Gomathi

asked 33 mins ago

GomathiGomathi

857

share|improve this question

edited 23 mins ago

Gomathi

asked 33 mins ago

GomathiGomathi

857

asked 33 mins ago

GomathiGomathi

857

asked 33 mins ago

GomathiGomathi

857

1 Answer
1

active

oldest

votes

3

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 21 mins ago

Sohel RanaSohel Rana

22.5k34460

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you perfectly got it what exactly i need...
  
  – Gomathi
  46 secs ago
  

  
  
  
  

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

3

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 21 mins ago

Sohel RanaSohel Rana

22.5k34460

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you perfectly got it what exactly i need...
  
  – Gomathi
  46 secs ago
  

  
  
  
  

add a comment | 

3

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 21 mins ago

Sohel RanaSohel Rana

22.5k34460

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you perfectly got it what exactly i need...
  
  – Gomathi
  46 secs ago
  

  
  
  
  

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 21 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 21 mins ago

Sohel RanaSohel Rana

22.5k34460

answered 21 mins ago

Sohel RanaSohel Rana

22.5k34460

answered 21 mins ago

Sohel RanaSohel Rana

22.5k34460