Inline Editing Grid in Magento 2 Backend

In this blog, we’ll explore Inline Editing Grid in Magento 2 Backend and how it helps admins quickly update product and order data directly from the grid view.

There are three main steps for the inline edit in Admin:
1) create a grid using the UI component.
2) make the clickable element to edit the data.
3) create the controller for saving edited data.

Create a grid using the UI component:

Firstly, you can check how to create the admin grid using UI component from the wonderful blog UI Component Grid
In the element Columns, I will register the inline editing and will make the grid clickable by the element fieldAction.

<settings>
    <editorConfig>
        <param name="selectProvider" xsi:type="string">test_test_list.test_test_list.test_test_columns.ids</param>
        <param name="enabled" xsi:type="boolean">true</param>
        <param name="indexField" xsi:type="string">entity_id</param>
        <param name="clientConfig" xsi:type="array">
            <item name="saveUrl" path="productattachment/test/inlineEdit" xsi:type="url"/>
            <item name="validateBeforeSave" xsi:type="boolean">false</item>
        </param>
    </editorConfig>
    <childDefaults>
        <param name="fieldAction" xsi:type="array">
            <item name="provider" xsi:type="string">test_test_list.test_test_list.test_test_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>

The action inlineEdit will save the data into the database.

Now, We will make the column editable which we want to edit in the grid using the element editor.

<column name="qty">
  <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 name="validate-zero-or-greater" xsi:type="boolean">true</item>
          </item>
       </item>
       <item name="label" xsi:type="string" translate="true">Quantity</item>
       <item name="sortOrder" xsi:type="number">4</item>
    </item>
  </argument>
</column>

editorType: Type of the editor such as text, date, select etc.
validation: Validation rules which you want to apply before the save.
Then you will see the Magento admin grid like below image.

Create the controller for saving edited data:

Now, create the InlineEdit.php file to get data and save it in the database.
This file will be located under app/code/Webkul/Test/Controller/Adminhtml/Test/.

<?php

namespace Webkul\Test\Controller\Adminhtml\Test;

class InlineEdit extends \Magento\Backend\App\Action
{

    protected $jsonFactory;

    public function __construct(
        \Magento\Backend\App\Action\Context $context,
        \Magento\Framework\Controller\Result\JsonFactory $jsonFactory
    ) {
        parent::__construct($context);
        $this->jsonFactory = $jsonFactory;
    }

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

        if ($this->getRequest()->getParam('isAjax')) {
            $postItems = $this->getRequest()->getParam('items', []);
            if (!count($postItems)) {
                $messages[] = __('Please correct the data sent.');
                $error = true;
            } else {
                foreach (array_keys($postItems) as $entityId) {
                    /** load your model to update the data */
                    $model = $this->_objectManager->create('Test\Test\Model\test')->load($entityId);
                    try {
                        $model->setData(array_merge($model->getData(), $postItems[$entityId]));
                        $model->save();
                    } catch (\Exception $e) {
                        $messages[] = "[Error:]  {$e->getMessage()}";
                        $error = true;
                    }
                }
            }
        }

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

You can save the grid-updated data into the database.
This example is for the single column. You can implement it in several columns as per your requirements.
Hope it will help you. Thank you.