Magento 2, add color style in Status column in sale order
1
Using Magento 2.2, Admin Grid. I want to add style to Status column in sale order. How to do this?
magento2.2 adminhtml order-grid
asked Aug 23 '18 at 4:56
Bong ChannarithBong Channarith
405111
add a comment |
1
Using Magento 2.2, Admin Grid. I want to add style to Status column in sale order. How to do this?
magento2.2 adminhtml order-grid
asked Aug 23 '18 at 4:56
Bong ChannarithBong Channarith
405111
<column name="status" class="IotaEShoppingUiComponentListingColumnStatus"> <settings> <filter>select</filter> <options class="MagentoSalesUiComponentListingColumnStatusOptions"/> <dataType>select</dataType> <label translate="true">Status</label> </settings> </column>
– Bong Channarith
Aug 23 '18 at 7:00
I using class. @LAW
– Bong Channarith
Aug 23 '18 at 7:03
Yes my bad, I was thinking you wanted to make every block different color based on status. Sorry, my bad!
– LAW
Aug 23 '18 at 7:04
Check my answer.
– Sukumar Gorai
Aug 23 '18 at 8:35
add a comment |
1
1
1
Using Magento 2.2, Admin Grid. I want to add style to Status column in sale order. How to do this?
magento2.2 adminhtml order-grid
asked Aug 23 '18 at 4:56
Bong ChannarithBong Channarith
405111
Using Magento 2.2, Admin Grid. I want to add style to Status column in sale order. How to do this?
magento2.2 adminhtml order-grid
magento2.2 adminhtml order-grid
asked Aug 23 '18 at 4:56
Bong ChannarithBong Channarith
405111
asked Aug 23 '18 at 4:56
Bong ChannarithBong Channarith
405111
asked Aug 23 '18 at 4:56
Bong ChannarithBong Channarith
405111
asked Aug 23 '18 at 4:56
Bong ChannarithBong Channarith
405111
asked Aug 23 '18 at 4:56
Bong ChannarithBong Channarith
405111
405111
<column name="status" class="IotaEShoppingUiComponentListingColumnStatus"> <settings> <filter>select</filter> <options class="MagentoSalesUiComponentListingColumnStatusOptions"/> <dataType>select</dataType> <label translate="true">Status</label> </settings> </column>
– Bong Channarith
Aug 23 '18 at 7:00
I using class. @LAW
– Bong Channarith
Aug 23 '18 at 7:03
Yes my bad, I was thinking you wanted to make every block different color based on status. Sorry, my bad!
– LAW
Aug 23 '18 at 7:04
Check my answer.
– Sukumar Gorai
Aug 23 '18 at 8:35
add a comment |
<column name="status" class="IotaEShoppingUiComponentListingColumnStatus"> <settings> <filter>select</filter> <options class="MagentoSalesUiComponentListingColumnStatusOptions"/> <dataType>select</dataType> <label translate="true">Status</label> </settings> </column>
– Bong Channarith
Aug 23 '18 at 7:00
I using class. @LAW
– Bong Channarith
Aug 23 '18 at 7:03
Yes my bad, I was thinking you wanted to make every block different color based on status. Sorry, my bad!
– LAW
Aug 23 '18 at 7:04
Check my answer.
– Sukumar Gorai
Aug 23 '18 at 8:35
<column name="status" class="IotaEShoppingUiComponentListingColumnStatus"> <settings> <filter>select</filter> <options class="MagentoSalesUiComponentListingColumnStatusOptions"/> <dataType>select</dataType> <label translate="true">Status</label> </settings> </column>
– Bong Channarith
Aug 23 '18 at 7:00
<column name="status" class="IotaEShoppingUiComponentListingColumnStatus"> <settings> <filter>select</filter> <options class="MagentoSalesUiComponentListingColumnStatusOptions"/> <dataType>select</dataType> <label translate="true">Status</label> </settings> </column>
– Bong Channarith
Aug 23 '18 at 7:00
I using class. @LAW
– Bong Channarith
Aug 23 '18 at 7:03
I using class. @LAW
– Bong Channarith
Aug 23 '18 at 7:03
Yes my bad, I was thinking you wanted to make every block different color based on status. Sorry, my bad!
– LAW
Aug 23 '18 at 7:04
Yes my bad, I was thinking you wanted to make every block different color based on status. Sorry, my bad!
– LAW
Aug 23 '18 at 7:04
Check my answer.
– Sukumar Gorai
Aug 23 '18 at 8:35
Check my answer.
– Sukumar Gorai
Aug 23 '18 at 8:35
add a comment |
2 Answers
2
active
oldest
votes
2
Create a module named Vendor_Module. Create all the files and structure like below:
Step 1:
/app/code/Vendor/Module/registration.php
<?php
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
'Vendor_Module',
__DIR__
);
Step 2:
/app/code/Vendor/Module/etc/module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Vendor_Module" setup_version="0.0.1">
<sequence>
<module name="Magento_Sales"/>
</sequence>
</module>
</config>
Step 3:
/app/code/Vendor/Module/view/adminhtml/layout/sales_order_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Vendor_Module::css/grid.css"/>
</head>
</page>
Step 4:
/app/code/Vendor/Module/view/adminhtml/ui_component/sales_order_grid.xml
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<columns name="sales_order_columns">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/grid/listing</item>
</item>
</argument>
</columns>
</listing>
Step 5:
/app/code/Vendor/Module/view/adminhtml/web/css/grid.css
td.complete div {
border: 1px solid #008000;
padding: 5px 0px 6px 10px;
}
td.closed div{
border: 1px solid #FF0000;
padding: 5px 0px 6px 10px;
}
td.processing div{
border: 1px solid #808080;
padding: 5px 0px 6px 10px;
}
td.pending div{
border: 1px solid #FFA500;
padding: 5px 0px 6px 10px;
}
Step 6:
/app/code/Vendor/Module/view/adminhtml/web/js/grid/listing.js
define([
'Magento_Ui/js/grid/listing'
], function (Collection) {
'use strict';
return Collection.extend({
defaults: {
template: 'Vendor_Module/ui/grid/listing'
},
getRowClass: function (col,row) {
if(col.index == 'status'){
if(row.status == 'complete') {
return 'complete';
} else if(row.status == 'closed') {
return 'closed';
} else if(row.status == 'processing') {
return 'processing';
} else {
return 'pending';
}
}
}
});
});
Step 7:
/app/code/Vendor/Module/view/adminhtml/web/template/ui/grid/listing.html
<div class="admin__data-grid-wrap" data-role="grid-wrapper">
<table class="data-grid" data-role="grid">
<thead>
<tr each="data: getVisible(), as: '$col'" render="getHeader()"/>
</thead>
<tbody>
<tr class="data-row" repeat="foreach: rows, item: '$row'">
<td outerfasteach="data: getVisible(), as: '$col'"
css="$parent.getRowClass($col,$row());" click="getFieldHandler($row())" template="getBody()"/>
</tr>
<tr ifnot="hasData()" class="data-grid-tr-no-data">
<td attr="colspan: countVisible()" translate="'We couldn't find any records.'"/>
</tr>
</tbody>
</table>
</div>
You can adjust the css from grid.css according to your requriement. You will get all classes according to your status.
answered Aug 23 '18 at 8:34
Sukumar GoraiSukumar Gorai
6,5803528
yourlisting.htmlfile replaces the$parent.getRowClass($col,$row())css data binding,which removes the css classesdata-grid-checkbox-celland `data-grid-actions-cell from the grid. Can you update your template, to bring those classes back?
– EpixRu
7 mins ago
add a comment |
1
Please follow the step to apply style to your status field admin grid.
VendorModule Nameviewadminhtmllayoutdefault.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="<Vendor>_<Module Name>::css/style.css"/>
</head>
</page>
After that create css file in your web folder like :
VendorModule Nameviewadminhtmlwebcssstyle.css
add your style here for different statuses.
If you still query then let me know.
answered Aug 23 '18 at 6:56
aravind Palaravind Pal
91
Do i need to have a renderer for use with style?
– Bong Channarith
Aug 23 '18 at 7:03
No need to renderer. and run command.
– aravind Pal
Aug 23 '18 at 7:31
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f239275%2fmagento-2-add-color-style-in-status-column-in-sale-order%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Create a module named Vendor_Module. Create all the files and structure like below:
Step 1:
/app/code/Vendor/Module/registration.php
<?php
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
'Vendor_Module',
__DIR__
);
Step 2:
/app/code/Vendor/Module/etc/module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Vendor_Module" setup_version="0.0.1">
<sequence>
<module name="Magento_Sales"/>
</sequence>
</module>
</config>
Step 3:
/app/code/Vendor/Module/view/adminhtml/layout/sales_order_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Vendor_Module::css/grid.css"/>
</head>
</page>
Step 4:
/app/code/Vendor/Module/view/adminhtml/ui_component/sales_order_grid.xml
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<columns name="sales_order_columns">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/grid/listing</item>
</item>
</argument>
</columns>
</listing>
Step 5:
/app/code/Vendor/Module/view/adminhtml/web/css/grid.css
td.complete div {
border: 1px solid #008000;
padding: 5px 0px 6px 10px;
}
td.closed div{
border: 1px solid #FF0000;
padding: 5px 0px 6px 10px;
}
td.processing div{
border: 1px solid #808080;
padding: 5px 0px 6px 10px;
}
td.pending div{
border: 1px solid #FFA500;
padding: 5px 0px 6px 10px;
}
Step 6:
/app/code/Vendor/Module/view/adminhtml/web/js/grid/listing.js
define([
'Magento_Ui/js/grid/listing'
], function (Collection) {
'use strict';
return Collection.extend({
defaults: {
template: 'Vendor_Module/ui/grid/listing'
},
getRowClass: function (col,row) {
if(col.index == 'status'){
if(row.status == 'complete') {
return 'complete';
} else if(row.status == 'closed') {
return 'closed';
} else if(row.status == 'processing') {
return 'processing';
} else {
return 'pending';
}
}
}
});
});
Step 7:
/app/code/Vendor/Module/view/adminhtml/web/template/ui/grid/listing.html
<div class="admin__data-grid-wrap" data-role="grid-wrapper">
<table class="data-grid" data-role="grid">
<thead>
<tr each="data: getVisible(), as: '$col'" render="getHeader()"/>
</thead>
<tbody>
<tr class="data-row" repeat="foreach: rows, item: '$row'">
<td outerfasteach="data: getVisible(), as: '$col'"
css="$parent.getRowClass($col,$row());" click="getFieldHandler($row())" template="getBody()"/>
</tr>
<tr ifnot="hasData()" class="data-grid-tr-no-data">
<td attr="colspan: countVisible()" translate="'We couldn't find any records.'"/>
</tr>
</tbody>
</table>
</div>
You can adjust the css from grid.css according to your requriement. You will get all classes according to your status.
answered Aug 23 '18 at 8:34
Sukumar GoraiSukumar Gorai
6,5803528
yourlisting.htmlfile replaces the$parent.getRowClass($col,$row())css data binding,which removes the css classesdata-grid-checkbox-celland `data-grid-actions-cell from the grid. Can you update your template, to bring those classes back?
– EpixRu
7 mins ago
add a comment |
2
Create a module named Vendor_Module. Create all the files and structure like below:
Step 1:
/app/code/Vendor/Module/registration.php
<?php
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
'Vendor_Module',
__DIR__
);
Step 2:
/app/code/Vendor/Module/etc/module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Vendor_Module" setup_version="0.0.1">
<sequence>
<module name="Magento_Sales"/>
</sequence>
</module>
</config>
Step 3:
/app/code/Vendor/Module/view/adminhtml/layout/sales_order_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Vendor_Module::css/grid.css"/>
</head>
</page>
Step 4:
/app/code/Vendor/Module/view/adminhtml/ui_component/sales_order_grid.xml
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<columns name="sales_order_columns">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/grid/listing</item>
</item>
</argument>
</columns>
</listing>
Step 5:
/app/code/Vendor/Module/view/adminhtml/web/css/grid.css
td.complete div {
border: 1px solid #008000;
padding: 5px 0px 6px 10px;
}
td.closed div{
border: 1px solid #FF0000;
padding: 5px 0px 6px 10px;
}
td.processing div{
border: 1px solid #808080;
padding: 5px 0px 6px 10px;
}
td.pending div{
border: 1px solid #FFA500;
padding: 5px 0px 6px 10px;
}
Step 6:
/app/code/Vendor/Module/view/adminhtml/web/js/grid/listing.js
define([
'Magento_Ui/js/grid/listing'
], function (Collection) {
'use strict';
return Collection.extend({
defaults: {
template: 'Vendor_Module/ui/grid/listing'
},
getRowClass: function (col,row) {
if(col.index == 'status'){
if(row.status == 'complete') {
return 'complete';
} else if(row.status == 'closed') {
return 'closed';
} else if(row.status == 'processing') {
return 'processing';
} else {
return 'pending';
}
}
}
});
});
Step 7:
/app/code/Vendor/Module/view/adminhtml/web/template/ui/grid/listing.html
<div class="admin__data-grid-wrap" data-role="grid-wrapper">
<table class="data-grid" data-role="grid">
<thead>
<tr each="data: getVisible(), as: '$col'" render="getHeader()"/>
</thead>
<tbody>
<tr class="data-row" repeat="foreach: rows, item: '$row'">
<td outerfasteach="data: getVisible(), as: '$col'"
css="$parent.getRowClass($col,$row());" click="getFieldHandler($row())" template="getBody()"/>
</tr>
<tr ifnot="hasData()" class="data-grid-tr-no-data">
<td attr="colspan: countVisible()" translate="'We couldn't find any records.'"/>
</tr>
</tbody>
</table>
</div>
You can adjust the css from grid.css according to your requriement. You will get all classes according to your status.
answered Aug 23 '18 at 8:34
Sukumar GoraiSukumar Gorai
6,5803528
yourlisting.htmlfile replaces the$parent.getRowClass($col,$row())css data binding,which removes the css classesdata-grid-checkbox-celland `data-grid-actions-cell from the grid. Can you update your template, to bring those classes back?
– EpixRu
7 mins ago
add a comment |
2
2
2
Create a module named Vendor_Module. Create all the files and structure like below:
Step 1:
/app/code/Vendor/Module/registration.php
<?php
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
'Vendor_Module',
__DIR__
);
Step 2:
/app/code/Vendor/Module/etc/module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Vendor_Module" setup_version="0.0.1">
<sequence>
<module name="Magento_Sales"/>
</sequence>
</module>
</config>
Step 3:
/app/code/Vendor/Module/view/adminhtml/layout/sales_order_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Vendor_Module::css/grid.css"/>
</head>
</page>
Step 4:
/app/code/Vendor/Module/view/adminhtml/ui_component/sales_order_grid.xml
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<columns name="sales_order_columns">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/grid/listing</item>
</item>
</argument>
</columns>
</listing>
Step 5:
/app/code/Vendor/Module/view/adminhtml/web/css/grid.css
td.complete div {
border: 1px solid #008000;
padding: 5px 0px 6px 10px;
}
td.closed div{
border: 1px solid #FF0000;
padding: 5px 0px 6px 10px;
}
td.processing div{
border: 1px solid #808080;
padding: 5px 0px 6px 10px;
}
td.pending div{
border: 1px solid #FFA500;
padding: 5px 0px 6px 10px;
}
Step 6:
/app/code/Vendor/Module/view/adminhtml/web/js/grid/listing.js
define([
'Magento_Ui/js/grid/listing'
], function (Collection) {
'use strict';
return Collection.extend({
defaults: {
template: 'Vendor_Module/ui/grid/listing'
},
getRowClass: function (col,row) {
if(col.index == 'status'){
if(row.status == 'complete') {
return 'complete';
} else if(row.status == 'closed') {
return 'closed';
} else if(row.status == 'processing') {
return 'processing';
} else {
return 'pending';
}
}
}
});
});
Step 7:
/app/code/Vendor/Module/view/adminhtml/web/template/ui/grid/listing.html
<div class="admin__data-grid-wrap" data-role="grid-wrapper">
<table class="data-grid" data-role="grid">
<thead>
<tr each="data: getVisible(), as: '$col'" render="getHeader()"/>
</thead>
<tbody>
<tr class="data-row" repeat="foreach: rows, item: '$row'">
<td outerfasteach="data: getVisible(), as: '$col'"
css="$parent.getRowClass($col,$row());" click="getFieldHandler($row())" template="getBody()"/>
</tr>
<tr ifnot="hasData()" class="data-grid-tr-no-data">
<td attr="colspan: countVisible()" translate="'We couldn't find any records.'"/>
</tr>
</tbody>
</table>
</div>
You can adjust the css from grid.css according to your requriement. You will get all classes according to your status.
answered Aug 23 '18 at 8:34
Sukumar GoraiSukumar Gorai
6,5803528
Create a module named Vendor_Module. Create all the files and structure like below:
Step 1:
/app/code/Vendor/Module/registration.php
<?php
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
'Vendor_Module',
__DIR__
);
Step 2:
/app/code/Vendor/Module/etc/module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Vendor_Module" setup_version="0.0.1">
<sequence>
<module name="Magento_Sales"/>
</sequence>
</module>
</config>
Step 3:
/app/code/Vendor/Module/view/adminhtml/layout/sales_order_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Vendor_Module::css/grid.css"/>
</head>
</page>
Step 4:
/app/code/Vendor/Module/view/adminhtml/ui_component/sales_order_grid.xml
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<columns name="sales_order_columns">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/grid/listing</item>
</item>
</argument>
</columns>
</listing>
Step 5:
/app/code/Vendor/Module/view/adminhtml/web/css/grid.css
td.complete div {
border: 1px solid #008000;
padding: 5px 0px 6px 10px;
}
td.closed div{
border: 1px solid #FF0000;
padding: 5px 0px 6px 10px;
}
td.processing div{
border: 1px solid #808080;
padding: 5px 0px 6px 10px;
}
td.pending div{
border: 1px solid #FFA500;
padding: 5px 0px 6px 10px;
}
Step 6:
/app/code/Vendor/Module/view/adminhtml/web/js/grid/listing.js
define([
'Magento_Ui/js/grid/listing'
], function (Collection) {
'use strict';
return Collection.extend({
defaults: {
template: 'Vendor_Module/ui/grid/listing'
},
getRowClass: function (col,row) {
if(col.index == 'status'){
if(row.status == 'complete') {
return 'complete';
} else if(row.status == 'closed') {
return 'closed';
} else if(row.status == 'processing') {
return 'processing';
} else {
return 'pending';
}
}
}
});
});
Step 7:
/app/code/Vendor/Module/view/adminhtml/web/template/ui/grid/listing.html
<div class="admin__data-grid-wrap" data-role="grid-wrapper">
<table class="data-grid" data-role="grid">
<thead>
<tr each="data: getVisible(), as: '$col'" render="getHeader()"/>
</thead>
<tbody>
<tr class="data-row" repeat="foreach: rows, item: '$row'">
<td outerfasteach="data: getVisible(), as: '$col'"
css="$parent.getRowClass($col,$row());" click="getFieldHandler($row())" template="getBody()"/>
</tr>
<tr ifnot="hasData()" class="data-grid-tr-no-data">
<td attr="colspan: countVisible()" translate="'We couldn't find any records.'"/>
</tr>
</tbody>
</table>
</div>
You can adjust the css from grid.css according to your requriement. You will get all classes according to your status.
answered Aug 23 '18 at 8:34
Sukumar GoraiSukumar Gorai
6,5803528
answered Aug 23 '18 at 8:34
Sukumar GoraiSukumar Gorai
6,5803528
answered Aug 23 '18 at 8:34
Sukumar GoraiSukumar Gorai
6,5803528
answered Aug 23 '18 at 8:34
Sukumar GoraiSukumar Gorai
6,5803528
6,5803528
yourlisting.htmlfile replaces the$parent.getRowClass($col,$row())css data binding,which removes the css classesdata-grid-checkbox-celland `data-grid-actions-cell from the grid. Can you update your template, to bring those classes back?
– EpixRu
7 mins ago
add a comment |
yourlisting.htmlfile replaces the$parent.getRowClass($col,$row())css data binding,which removes the css classesdata-grid-checkbox-celland `data-grid-actions-cell from the grid. Can you update your template, to bring those classes back?
– EpixRu
7 mins ago
your
listing.html file replaces the $parent.getRowClass($col,$row()) css data binding,which removes the css classes data-grid-checkbox-cell and `data-grid-actions-cell from the grid. Can you update your template, to bring those classes back?– EpixRu
7 mins ago
your
listing.html file replaces the $parent.getRowClass($col,$row()) css data binding,which removes the css classes data-grid-checkbox-cell and `data-grid-actions-cell from the grid. Can you update your template, to bring those classes back?– EpixRu
7 mins ago
add a comment |
1
Please follow the step to apply style to your status field admin grid.
VendorModule Nameviewadminhtmllayoutdefault.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="<Vendor>_<Module Name>::css/style.css"/>
</head>
</page>
After that create css file in your web folder like :
VendorModule Nameviewadminhtmlwebcssstyle.css
add your style here for different statuses.
If you still query then let me know.
answered Aug 23 '18 at 6:56
aravind Palaravind Pal
91
Do i need to have a renderer for use with style?
– Bong Channarith
Aug 23 '18 at 7:03
No need to renderer. and run command.
– aravind Pal
Aug 23 '18 at 7:31
add a comment |
1
Please follow the step to apply style to your status field admin grid.
VendorModule Nameviewadminhtmllayoutdefault.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="<Vendor>_<Module Name>::css/style.css"/>
</head>
</page>
After that create css file in your web folder like :
VendorModule Nameviewadminhtmlwebcssstyle.css
add your style here for different statuses.
If you still query then let me know.
answered Aug 23 '18 at 6:56
aravind Palaravind Pal
91
Do i need to have a renderer for use with style?
– Bong Channarith
Aug 23 '18 at 7:03
No need to renderer. and run command.
– aravind Pal
Aug 23 '18 at 7:31
add a comment |
1
1
1
Please follow the step to apply style to your status field admin grid.
VendorModule Nameviewadminhtmllayoutdefault.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="<Vendor>_<Module Name>::css/style.css"/>
</head>
</page>
After that create css file in your web folder like :
VendorModule Nameviewadminhtmlwebcssstyle.css
add your style here for different statuses.
If you still query then let me know.
answered Aug 23 '18 at 6:56
aravind Palaravind Pal
91
Please follow the step to apply style to your status field admin grid.
VendorModule Nameviewadminhtmllayoutdefault.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="<Vendor>_<Module Name>::css/style.css"/>
</head>
</page>
After that create css file in your web folder like :
VendorModule Nameviewadminhtmlwebcssstyle.css
add your style here for different statuses.
If you still query then let me know.
answered Aug 23 '18 at 6:56
aravind Palaravind Pal
91
answered Aug 23 '18 at 6:56
aravind Palaravind Pal
91
answered Aug 23 '18 at 6:56
aravind Palaravind Pal
91
answered Aug 23 '18 at 6:56
aravind Palaravind Pal
91
91
Do i need to have a renderer for use with style?
– Bong Channarith
Aug 23 '18 at 7:03
No need to renderer. and run command.
– aravind Pal
Aug 23 '18 at 7:31
add a comment |
Do i need to have a renderer for use with style?
– Bong Channarith
Aug 23 '18 at 7:03
No need to renderer. and run command.
– aravind Pal
Aug 23 '18 at 7:31
Do i need to have a renderer for use with style?
– Bong Channarith
Aug 23 '18 at 7:03
Do i need to have a renderer for use with style?
– Bong Channarith
Aug 23 '18 at 7:03
No need to renderer. and run command.
– aravind Pal
Aug 23 '18 at 7:31
No need to renderer. and run command.
– aravind Pal
Aug 23 '18 at 7:31
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f239275%2fmagento-2-add-color-style-in-status-column-in-sale-order%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
<column name="status" class="IotaEShoppingUiComponentListingColumnStatus"> <settings> <filter>select</filter> <options class="MagentoSalesUiComponentListingColumnStatusOptions"/> <dataType>select</dataType> <label translate="true">Status</label> </settings> </column>
– Bong Channarith
Aug 23 '18 at 7:00
I using class. @LAW
– Bong Channarith
Aug 23 '18 at 7:03
Yes my bad, I was thinking you wanted to make every block different color based on status. Sorry, my bad!
– LAW
Aug 23 '18 at 7:04
Check my answer.
– Sukumar Gorai
Aug 23 '18 at 8:35