How to Add Inline Edit in UI Grid in Magento 2 Backend

The Magento 2 UI grids are used to manage the store data in an easy-to-handle format.

In default Magento 2, the backend grids allow the admin to sort, filter, and edit the data. The admin can also use pagination and mass action to update the data in bulk.

However, there is a drawback in the design of the grids that compels the admin to open each row and update the data in it. It is a tedious and time-consuming task.

The solution to this issue is to add inline edit in UI grid in Magento 2 backend as shown below:

After implementing it using the below solution, the admin need not open each entry in the edit mode but simply make the necessary changes using the inline edit as shown in the above image.

You can use this solution in a custom admin grid as well as in Magento 2 default grids.

Steps to Add Inline Edit in UI Grid in Magento 2 Backend

1. Use the below code in your xml file of ui_component or in the grid where you want to add inline edit.
   This file will be located under  Vendor/Extension/view/adminhtml/ui_component/ .
   
   <columns name="data_records_columns"> <settings> <editorConfig> <param name="clientConfig" xsi:type="array"> <item name="saveUrl" xsi:type="url" path="routes/action/inlineedit"/> <item name="validateBeforeSave" xsi:type="boolean">false</item> </param> <param name="indexField" xsi:type="string"> entity_id </param> <param name="enabled" xsi:type="boolean"> true </param> <param name="selectProvider" xsi:type="string"> data_list.data_list.data_records_columns.ids </param> </editorConfig> <childDefaults> <param name="fieldAction" xsi:type="array"> <item name="provider" xsi:type="string">data_list.data_list.data_records_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> </param> </childDefaults> </settings> <selectionsColumn name="ids"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="indexField" xsi:type="string">entity_id</item> <item name="sortOrder" xsi:type="number">0</item> </item> </argument> </selectionsColumn> //name of a column on which you want to add inline edit <column name="name"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item> <item name="editor" xsi:type="array"> <item name="editorType" xsi:type="string">text</item> <item name="validation" xsi:type="array"> <item name="name" xsi:type="boolean">true</item> </item> </item> <item name="label" xsi:type="string" translate="true">Name</item> <item name="dataType" xsi:type="string">text</item> <item name="sortOrder" xsi:type="number">50</item> <item name="resizeEnabled" xsi:type="boolean">false</item> <item name="resizeDefaultWidth" xsi:type="string">60</item> <item name="sortable" xsi:type="boolean">false</item> </item> </argument> </column> </columns>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

   <columns name="data_records_columns">     <settings>         <editorConfig>             <param name="clientConfig" xsi:type="array">                 <item name="saveUrl" xsi:type="url" path="routes/action/inlineedit"/>                 <item name="validateBeforeSave" xsi:type="boolean">false</item>             </param>             <param name="indexField" xsi:type="string">                 entity_id             </param>             <param name="enabled" xsi:type="boolean">                 true             </param>             <param name="selectProvider" xsi:type="string">                 data_list.data_list.data_records_columns.ids             </param>         </editorConfig>         <childDefaults>             <param name="fieldAction" xsi:type="array">                 <item name="provider" xsi:type="string">data_list.data_list.data_records_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>             </param>         </childDefaults>     </settings>     <selectionsColumn name="ids">         <argument name="data" xsi:type="array">             <item name="config" xsi:type="array">                 <item name="indexField" xsi:type="string">entity_id</item>                 <item name="sortOrder" xsi:type="number">0</item>             </item>         </argument>     </selectionsColumn> //name of a column on which you want to add inline edit     <column name="name">         <argument name="data" xsi:type="array">             <item name="config" xsi:type="array">                 <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>                 <item name="editor" xsi:type="array">                     <item name="editorType" xsi:type="string">text</item>                     <item name="validation" xsi:type="array">                         <item name="name" xsi:type="boolean">true</item>                     </item>                 </item>                 <item name="label" xsi:type="string" translate="true">Name</item>                 <item name="dataType" xsi:type="string">text</item>                 <item name="sortOrder" xsi:type="number">50</item>                 <item name="resizeEnabled" xsi:type="boolean">false</item>                 <item name="resizeDefaultWidth" xsi:type="string">60</item>                 <item name="sortable" xsi:type="boolean">false</item>             </item>         </argument>     </column> </columns>

2. Create the InlineEdit.php file to get data and save it in the database at Vendor/Extension/Controller/Adminhtml/Action/.
   
   <?php namespace Vendor\Extension\Controller\Adminhtml\Action; use Magento\Backend\App\Action; use Magento\Backend\App\Action\Context; use Magento\Framework\Controller\Result\JsonFactory; use Vendore\Extension\Model\Model; class InlineEdit extends Action { protected $jsonFactory; protected $model; public function __construct( Context $context, JsonFactory $jsonFactory, Model $model ) { parent::__construct($context); $this->jsonFactory = $jsonFactory; $this->model = $model; } public function execute() { $resultJson = $this->jsonFactory->create(); $error = false; $messages = []; if ($this->getRequest()->getParam('isAjax')) { $postItems = $this->getRequest()->getParam('items', []); if (empty($postItems)) { $messages[] = __('Please correct the data sent.'); $error = true; } else { foreach (array_keys($postItems) as $entityId) { $modelData = $this->model->load($entityId); try { $modelData->setData(array_merge($modelData->getData(), $postItems[$entityId])); $modelData->save(); } catch (\Exception $e) { $messages[] = "[Error:] {$e->getMessage()}"; $error = true; } } } } return $resultJson->setData([ 'messages' => $messages, 'error' => $error ]); }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

   <?php   namespace Vendor\Extension\Controller\Adminhtml\Action;   use Magento\Backend\App\Action; use Magento\Backend\App\Action\Context; use Magento\Framework\Controller\Result\JsonFactory; use Vendore\Extension\Model\Model;   class InlineEdit extends Action {     protected $jsonFactory;     protected $model;       public function __construct(         Context $context,         JsonFactory $jsonFactory,         Model $model     )     {         parent::__construct($context);         $this->jsonFactory = $jsonFactory;         $this->model = $model;     }       public function execute()     {         $resultJson = $this->jsonFactory->create();         $error = false;         $messages = [];         if ($this->getRequest()->getParam('isAjax')) {             $postItems = $this->getRequest()->getParam('items', []);             if (empty($postItems)) {                 $messages[] = __('Please correct the data sent.');                 $error = true;             } else {                 foreach (array_keys($postItems) as $entityId) {                     $modelData = $this->model->load($entityId);                     try {                         $modelData->setData(array_merge($modelData->getData(), $postItems[$entityId]));                         $modelData->save();                     } catch (\Exception $e) {                         $messages[] = "[Error:]  {$e->getMessage()}";                         $error = true;                     }                 }             }         }           return $resultJson->setData([             'messages' => $messages,             'error' => $error         ]);     }

   Done!

   Do you find it challenging to edit your inline grid? Just mention your difficulty in the Comments section below.

   I would be happy to help.

   Feel free to share the solution with Magento Community via social media.

   Thank You.