Mrthfx

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

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

Is it possible to avoid unpacking when merging Association?

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

Why does Central Limit Theorem break down in my simulation?

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

Why does liquid water form when we exhale on a mirror?

How to draw dashed arc of a circle behind pyramid?

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

Conservation of Mass and Energy

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

How does Ehrenfest's theorem apply to the quantum harmonic oscillator?

Why do we say ‘pairwise disjoint’, rather than ‘disjoint’?

Should I take out a loan for a friend to invest on my behalf?

Did Amazon pay $0 in taxes last year?

I can't die. Who am I?

What ability score modifier does a javelin's damage use?

What stops an assembly program from crashing the operating system?

Why aren't there more Gauls like Obelix?

Is it a Cyclops number? "Nobody" knows!

Having the player face themselves after the mid-game

Power Strip for Europe

Specifying a starting column with colortbl package and xcolor

Signed and unsigned numbers

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

Gomathi

asked 43 mins ago

GomathiGomathi

857

• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

Gomathi

asked 43 mins ago

GomathiGomathi

857

• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

Gomathi

asked 43 mins ago

GomathiGomathi

857

share|improve this question

edited 33 mins ago

Gomathi

asked 43 mins ago

GomathiGomathi

857

share|improve this question

edited 33 mins ago

Gomathi

asked 43 mins ago

GomathiGomathi

857

asked 43 mins ago

GomathiGomathi

857

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

Sohel RanaSohel Rana

22.5k34460

• 
  
  
  

  
  

  
  
  
  
  
  

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

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

Sohel RanaSohel Rana

22.5k34460

• 
  
  
  

  
  

  
  
  
  
  
  

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

Sohel RanaSohel Rana

22.5k34460

• 
  
  
  

  
  

  
  
  
  
  
  

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

Sohel RanaSohel Rana

22.5k34460

answered 32 mins ago

Sohel RanaSohel Rana

22.5k34460

answered 32 mins ago

Sohel RanaSohel Rana

22.5k34460