How to Use Inline Edit in UI Grid in Magento 2?

October 22, 2020

In this tutorial, Today we will explain a guide on how to use inline edit in UI Grid in Magento 2. In certain UI Grids, Magento 2 provides the functionality of inline edit data directly from UI Grid. But, if you want to add inline edit feature in your custom module, here are a few steps:

Steps of use inline edit in UI Grid :

1) First of all, You need to create the UI Component Grid. Then, In the element of column add this below code of your UI grid listing file:

<item name="editorConfig" xsi:type="array">
    <item name="selectProvider" xsi:type="string">md_uiexample_blog_listing.md_uiexample_blog_listing.uiexample_blog_columns.ids</item>
    <item name="enabled" xsi:type="boolean">true</item>
    <item name="indexField" xsi:type="string">entity_id</item>
    <item name="clientConfig" xsi:type="array">
        <item name="saveUrl" xsi:type="url" path="md_uiexample/blog/inlineEdit"/>
        <item name="validateBeforeSave" xsi:type="boolean">false</item>
    </item>
</item>

In above code, you need to set action URL in path attribute. I added md_uigridexample/entity/inlineEdit as my action URL.

2) After that, To make a clickable grid, add this below code after that editorConfig element(above code) in your UI Grid listing file:

<item name="childDefaults" xsi:type="array">
    <item name="fieldAction" xsi:type="array">
        <item name="provider" xsi:type="string">md_uiexample_blog_listing.md_uiexample_blog_listing.uiexample_blog_columns_editor</item>
        <item name="target" xsi:type="string">startEdit</item>
        <item name="params" xsi:type="array">
            <item name="0" xsi:type="string">${ $.$data.rowIndex }</item>
            <item name="1" xsi:type="boolean">true</item>
        </item>
    </item>
    <item name="storageConfig" xsi:type="array">
        <item name="provider" xsi:type="string">md_uiexample_blog_listing.md_uiexample_blog_listing.listing_top.bookmarks</item>
        <item name="root" xsi:type="string">columns.${ $.index }</item>
        <item name="namespace" xsi:type="string">current.${ $.storageConfig.root }</item>
    </item>
</item>

3) Then, to make a column editable in your UI Grid, add this below code in your column code in your UI Grid listing file:

<column name="attribute_name">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="editor" xsi:type="array">
                <item name="editorType" xsi:type="string">text</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
            </item>
            <item name="filter" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Name</item>
            <item name="sortOrder" xsi:type="number">10</item>
        </item>
    </argument>
</column>

In above code, editorType is used to add type of input editor such as text, date, etc.

4) In Last, Create controller action at app/code/MD/UiExample/Controller/Adminhtml/Blog/InlineEdit.php file and paste the below code to save data:

<?php

namespace MD\UiExample\Controller\Adminhtml\Blog;

use Magento\Backend\App\Action;
use Magento\Backend\App\Action\Context;
use Magento\Framework\Controller\Result\JsonFactory;
use MD\UiExample\Model\ResourceModel\Blog\Collection;

class InlineEdit extends Action
{

    /**
     * @var JsonFactory
     */
    protected $jsonFactory;

    /**
     * @var Collection
     */
    protected $blogCollection;

    /**
     * @param Context     $context
     * @param Collection  $blogCollection
     * @param JsonFactory $jsonFactory
     */
    public function __construct(
        Context $context,
        Collection $blogCollection,
        JsonFactory $jsonFactory
    ) {
        parent::__construct($context);
        $this->jsonFactory = $jsonFactory;
        $this->blogCollection = $blogCollection;
    }

    /**
     * @return \Magento\Framework\Controller\ResultInterface
     */
    public function execute()
    {
        /**
         * @var \Magento\Framework\Controller\Result\Json $resultJson
         */
        $resultJson = $this->jsonFactory->create();
        $error = false;
        $messages = [];

        $postData = $this->getRequest()->getParam('items', []);
        if (!($this->getRequest()->getParam('isAjax') && count($postData))) {
            return $resultJson->setData(
                [
                    'messages' => [__('Please correct the data which you send.')],
                    'error' => true,
                ]
            );
        }

        try {
            $this->blogCollection
                ->setStoreId($this->getRequest()->getParam('store', 0))
                ->addFieldToFilter('entity_id', ['in' => array_keys($postData)])
                ->walk('saveCollection', [$postData]);
        } catch (\Exception $e) {
            $messages[] = __('There was an error saving the data: ') . $e->getMessage();
            $error = true;
        }

        return $resultJson->setData(
            [
                'messages' => $messages,
                'error' => $error,
            ]
        );
    }
}

You can customize the code of action based on your requirement.

Now, Just clean the cache and check it.

That’s it !!!

Output:

Magento 2 Admin