Request Quote

Inline Editing Grid in Magento 2 Backend

Here, We learn how to edit inline grid and save data in Magento 2 backend.

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.

<item name="editorConfig" xsi:type="array">
  <item name="selectProvider" xsi:type="string">test_test_list.test_test_list.test_test_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="test/test/inlineEdit"/>
     <item name="validateBeforeSave" xsi:type="boolean">false</item>
  </item>
</item>

the action inlineEdit will save the data into the database.

Make the clickable element to edit the data:

Now, we will make the grid clickable by the element fieldAction.

<item name="childDefaults" xsi:type="array">
  <item 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>
  </item>
</item>

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.
If you want to go deep into this topic, you can check Inline Edit Component.
This example for the single column, you can implement it in several columns as you required.
Hope it will help you. Thank you.

. . .

Comment

Add Your Comment

Be the first to comment.

css.php