Magento2 – How Inline Edit Works in Admin UI-Components Grid

gridinline-editormagento2uicomponent

Can you please briefly explain how inline edit work in admin ui-components grid in Magento2.

Please explain controller, interface, and model.

Best Answer

There are two main files for inline edit in admin grid

1) Ui Component Grid

2) Contoller for save data

Let's take an example vendor: Test and module name: Test

Ui Component Grid

In the following sample code, I have created a UI Component file named test_mytesting_index.xml at app/code/Test/Test/view/adminhtml/ui_component/test_mytesting_index.xml

Here you need to pass inline controller to edit inline data

<item name="saveUrl" path="test_test/mytesting/inlineEdit" xsi:type="url"/>

<item name="editorConfig" xsi:type="array">
    <item name="selectProvider" xsi:type="string">test_mytesting_index.test_mytesting_index.test_mytesting_columns.ids</item>
    <item name="enabled" xsi:type="boolean">true</item>
    <item name="indexField" xsi:type="string">mytesting_id</item>
    <item name="clientConfig" xsi:type="array">
        <item name="saveUrl" path="test_test/mytesting/inlineEdit" xsi:type="url"/>
        <item name="validateBeforeSave" xsi:type="boolean">false</item>
    </item>
</item>

Now create controller InlineEdit.php to get the posted data and save it into the database

app/code/Test/Test/Controller/Adminhtml/Mytesting/InlineEdit.php

<?php

namespace Test\Test\Controller\Adminhtml\Mytesting;

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 $modelid) {
                    /** @var \Magento\Cms\Model\Block $block */
                    $model = $this->_objectManager->create('Test\Test\Model\Mytesting')->load($modelid);
                    try {
                        $model->setData(array_merge($model->getData(), $postItems[$modelid]));
                        $model->save();
                    } catch (\Exception $e) {
                        $messages[] = "[Mytesting ID: {$modelid}]  {$e->getMessage()}";
                        $error = true;
                    }
                }
            }
        }

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

Use fieldAction to make the grid clickable by the element fieldAction

The action inlineEdit will save the data into mysql. 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_mytesting_index.test_mytesting_index.test_mytesting_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>

We will make the column editable inline by using the element editor:

<column name="field1">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">text</item>
            <item name="label" translate="true" xsi:type="string">field1</item>
            <item name="resizeEnabled" xsi:type="boolean">false</item>
            <item name="resizeDefaultWidth" xsi:type="string">10</item>
            <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">false</item>
                </item>
            </item>
        </item>
    </argument>
</column>

In the configuration for the specific column, the editor can include:

editorType - type of the editor. Possible values: same as primitives (text, select, date), can also provide new type.

validation - validation rules, required-entry here as just an example of possible rules

Related Topic