Gdtyjr

Crossing a border with an infant of a different citizenship

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

Why aren't there more Gauls like Obelix?

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

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 ability score modifier does a javelin's damage use?

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

Having the player face themselves after the mid-game

Do items de-spawn?

What is Earthy controling in the ISS cupola?

Is there a difference between equilibrium and steady state?

What will happen if my luggage gets delayed?

Windows Server Datacenter Edition - Unlimited Virtual Machines

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

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

Confusion about Complex Continued Fraction

Is divide-by-zero a security vulnerability?

Expressing logarithmic equations without logs

What do *foreign films* mean for an American?

What stops an assembly program from crashing the operating system?

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

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?

Haman going to the second feast dirty

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

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

Gomathi

asked 1 hour ago

GomathiGomathi

857

• 
  
  
  

  
  1
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

Gomathi

asked 1 hour ago

GomathiGomathi

857

• 
  
  
  

  
  1
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

Gomathi

asked 1 hour ago

GomathiGomathi

857

share|improve this question

edited 54 mins ago

Gomathi

asked 1 hour ago

GomathiGomathi

857

share|improve this question

edited 54 mins ago

Gomathi

asked 1 hour ago

GomathiGomathi

857

asked 1 hour ago

GomathiGomathi

857

asked 1 hour ago

GomathiGomathi

857

1 Answer
1

active

oldest

votes

5

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

Sohel RanaSohel Rana

22.5k34460

• 
  
  
  

  
  

  
  
  
  
  
  

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

5

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

Sohel RanaSohel Rana

22.5k34460

• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  

add a comment | 

5

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

Sohel RanaSohel Rana

22.5k34460

• 
  
  
  

  
  

  
  
  
  
  
  

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

Sohel RanaSohel Rana

22.5k34460

answered 52 mins ago

Sohel RanaSohel Rana

22.5k34460

answered 52 mins ago

Sohel RanaSohel Rana

22.5k34460