How to include a New Editing Inline Element in Magento 2?

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>








Build a new column at the point


<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>




Build a source option to form inline element in Magento admin


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




], 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


<span style="font-weight: 400;">  </span>



], 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( != undefined)





Build an HTML file


<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}




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!!!

Inline Element for admin Grid in Magento 2






Leave a Reply

Your email address will not be published. Required fields are marked *