Sfdwhf

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

In the late 1940’s to early 1950’s what technology was available that could melt a LOT of ice?

Conservation of Mass and Energy

Giving a career talk in my old university, how prominently should I tell students my salary?

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

Rationale to prefer local variables over instance variables?

Do items de-spawn?

Crossing a border with an infant of a different citizenship

Can't make sense of a paragraph from Lovecraft

Power Strip for Europe

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

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

What materials can be used to make a humanoid skin warm?

What stops an assembly program from crashing the operating system?

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

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

How to draw dashed arc of a circle behind pyramid?

Does the US political system, in principle, allow for a no-party system?

Can I use a violin G string for D?

Doubts in understanding some concepts of potential energy

Why does Central Limit Theorem break down in my simulation?

Do I really need to have a scientific explanation for my premise?

Is it a Cyclops number? "Nobody" knows!

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

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

1

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

Gomathi

asked 52 mins ago

GomathiGomathi

857

• 
  
  
  

  
  1
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Check my answer
  
  – Sohel Rana
  32 mins ago
  

  
  
  
  

add a comment | 

1

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

Gomathi

asked 52 mins ago

GomathiGomathi

857

• 
  
  
  

  
  1
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

Gomathi

asked 52 mins ago

GomathiGomathi

857

share|improve this question

edited 43 mins ago

Gomathi

asked 52 mins ago

GomathiGomathi

857

share|improve this question

edited 43 mins ago

Gomathi

asked 52 mins ago

GomathiGomathi

857

asked 52 mins ago

GomathiGomathi

857

asked 52 mins ago

GomathiGomathi

857

1 Answer
1

active

oldest

votes

4

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

Sohel RanaSohel Rana

22.5k34460

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you perfectly got it what exactly i need...
  
  – Gomathi
  20 mins 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

4

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

Sohel RanaSohel Rana

22.5k34460

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you perfectly got it what exactly i need...
  
  – Gomathi
  20 mins ago
  

  
  
  
  

add a comment | 

4

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

Sohel RanaSohel Rana

22.5k34460

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you perfectly got it what exactly i need...
  
  – Gomathi
  20 mins 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 41 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 41 mins ago

Sohel RanaSohel Rana

22.5k34460

answered 41 mins ago

Sohel RanaSohel Rana

22.5k34460

answered 41 mins ago

Sohel RanaSohel Rana

22.5k34460