How to include a New Editing Inline Element for admin Grid in Magento 2

In this blog, we will explain you 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

Magento 2 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…

Image result for add new editing element for admin grid in Magento 2

  1. 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>
  1. 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>
  1. Build a source option for the program

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;

    }

}
  1. Build JS files

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;

        }

    });

});
  1. 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:

Image result for add new editing element for admin grid in Magento 2

The above mentioned steps are the smallest process for you to Add a New Editing Inline Element for Admin Grid in Magento 2. With this information, you can handle the Admin Grid in Magento 2 effortlessly.

Last Update: April 7, 2018  

March 6, 2018   982   Nandini Ramachandran    Operations    
Total 3 Votes:
2

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

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

Facebook
Twitter
INSTAGRAM
LinkedIn