Sfrgttk

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

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

Can I negotiate a patent idea for a raise, under French law?

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

How do spaceships determine each other's mass in space?

Power Strip for Europe

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

Why couldn't the separatists legally leave the Republic?

Expressing logarithmic equations without logs

I reported the illegal activity of my boss to his boss. My boss found out. Now I am being punished. What should I do?

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

Create chunks from an array

What is Earthy controling in the ISS cupola?

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

Am I understanding this Storm King's Thunder map wrong?

Specifying a starting column with colortbl package and xcolor

I can't die. Who am I?

Why does Central Limit Theorem break down in my simulation?

Getting the || sign while using Kurier

From an axiomatic set theoric approach why can we take uncountable unions?

Is divide-by-zero a security vulnerability?

Minimizing with differential evolution

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

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

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

Sohel RanaSohel Rana

22.5k34460

answered 31 mins ago

Sohel RanaSohel Rana

22.5k34460

answered 31 mins ago

Sohel RanaSohel Rana

22.5k34460