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

Please explain controller, interface, and model.


3 Answers 3


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>

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



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
    ) {
        $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]));
                    } 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>

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>

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

  • Thanks @prince patel I have tried with $block->setData(array_merge($block->getData(), $postItems[$blockId])); but getting error <b>Fatal error</b>: Uncaught Error: Call to undefined method Tatva\Subscription\Model\ResourceModel\Subscription\CollectionSubReport::setData() Jun 6, 2018 at 11:46

Inline Edit Component

The Inline Edit component is used to provide the ability of inline editing.

Related UI Components

The Bulk Edit component uses the Inline Edit component. The Listing component can use the Inline Edit if it is configured and enabled.

Implementation of Inline Edit

Currently Inline Edit is not presented in definition.xml. It is used as a plugin for the Listing component. It can be configured in definitions.xml if necessary.

To enable Inline Edit component for the grid, it is declared as a plugin for Listing component:

For more detail visit magento devdocs.

  • I know how to make admingrid inline editable but i don't know how inline edit controller and interface work for data save. Can you please explain it Jun 6, 2018 at 9:42

Please follow this URL,



This will help you more.

  • Actually i don't know how inlineedit controller and interface work for data save. Can you please explain it Jun 6, 2018 at 9:42
  • If your requirement is to edit grid inline then you follow this. And Magento saves data. Jun 6, 2018 at 9:45
  • Check this file: app\code\Magento\Ui\view\base\web\templates\grid\editing\header-buttons.html Jun 6, 2018 at 9:51
  • When you edit field inline and hit save button then save controller is call from a grid. Jun 6, 2018 at 9:52
  • If you read carefully this document then you easily understand how it works. Jun 6, 2018 at 9:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.