Learn how to build a New Editing Inline Element for admin Grid in Magento 2. Examples choose a box with a background color. The following steps are:
Step 1: Classify new components in the Ui_component XML file
Step 2: Build a new column at the point
Step 3: Build a source option for the program
Step 4: Build JS files
Step 5: Build an HTML file
Build your Amazon-like multi-vendor marketplace website @ $249/- now!!!
Get your free live demo now: Click here
Add an Inline Element for admin Grid in Magento 2
Magento 2 platform offers a method to edit information of a row of admin grid which calls editing inline. There are some elements that we can use: text box, select…
Classify new components in the Ui_component XML file
Filedirectory: app/code/Webnexs/OrderSuccess/view/ui_component/os_needverify_listing.xml
<columns name="needverify_template_columns"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="editorConfig" xsi:type="array"> <item name="templates" xsi:type="array"> <item name="record" xsi:type="array"> <item name="component" xsi:type="string">Webnexs_OrderSuccess/js/grid/editing/record</item> </item> </item> </item> </item> </argument> ... </columns>
Build a new column at the point
Filedirectory:app/code/Webnexs/OrderSuccess/view/ui_component/os_needverify_listing.xml
<column name="tag_color"> <argument name="data" xsi:type="array"> <item name="options" xsi:type="object">Webnexs\OrderSuccess\Model\Source\Adminhtml\Tag</item> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">false</item> <item name="component" xsi:type="string">Webnexs_OrderSuccess/js/grid/columns/tag</item> <item name="bodyTmpl" xsi:type="string">Webnexs_OrderSuccess/grid/cells/tag</item> <item name="dataType" xsi:type="string">select</item> <item name="editor" xsi:type="string">tag</item> <item name="sortable" xsi:type="boolean">false</item> <item name="label" xsi:type="string" translate="true">Tag</item> <item name="resizeDefaultWidth" xsi:type="string">80</item> <item name="sortOrder" xsi:type="number">90</item> </item> </argument> </column>
Build a source option to form inline element in Magento admin
Filedirectory:app/code/Webnexs/OrderSuccess/Model/Source/Adminhtml/Tag
namespace Webnexs\OrderSuccess\Model\Source\Adminhtml;
class Tag implements \Magento\Framework\Option\ArrayInterface
{
public function toOptionArray()
{
$tags[] = [
['value' => '#F5FF6E', 'label' => __('Processing')],
['value' => '#FFD240', 'label' => __('Pending')],
['value' => '#00A679', 'label' => __('Completed')],
['value' => '#FF0000', 'label' => __('Canceled')],
];
return $tags;
}
}Build JS files in Magento 2
Change vendor/magento-ui/view/base/web/js/grid/editing/record.js file
File:app/code/Webnexs/OrderSuccess/view/adminhtml/web/js/grid/editing/record.js
define([
'Magento_Ui/js/grid/editing/record'
], function (Record) {
'use strict';
return Record.extend({
defaults: {
templates: {
fields: {
// Add tag element
tag: {
component: 'Webnexs_OrderSuccess/js/form/element/tag',
template: 'Webnexs_OrderSuccess/form/element/tag',
options: '${ JSON.stringify($.$data.column.options) }'
}
}
},
},
});
});Generate new js component file:app/code/Webnexs/OrderSuccess/view/adminhtml/web/js/form/element/tag.js
define([
<span style="font-weight: 400;"> </span>
'Magento_Ui/js/form/element/select',
'ko'
], function (Select, ko) {
'use strict';
return Select.extend({
optionsAfterRender: function (option, item) {
if(item != undefined) {
if(item.value == 'remove') {
ko.applyBindingsToNode(option, {style: {background: '#FFFFFF'}}, item);
}else {
ko.applyBindingsToNode(option, {style: {background: item.value}}, item);
}
}
},
setSelectColor: function (item, event) {
if(event.target.value != undefined)
event.target.style='background-color:'+event.target.value;
}
});
});Build an HTML file
File:app/code/Webnexs/OrderSuccess/view/adminhtml/web/template/form/element/tag.html
<select class="admin__control-select" data-bind="
attr: {
name: inputName,
id: uid,
disabled: disabled,
'aria-describedby': noticeId
},
hasFocus: focused,
options: options,
value: value,
optionsValue: 'value',
optionsText: 'label',
optionsAfterRender: optionsAfterRender,
event: {change: setSelectColor},
style: {backgroundColor: value}
"
/>Result
The above mentioned steps are the smallest process for you to add a New Editing Inline Element for Admin Grid in Magento. With this information, you can handle the Admin Grid in Magento 2 effortlessly.
Contact us to know more about Magento 2 store development today!!!
Leave a Reply