Read More
Read More
Menu Close

    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:
    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>

    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>

    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 name="label" xsi:type="string" translate="true">Quantity</item>
           <item name="sortOrder" xsi:type="number">4</item>

    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.

    Searching for an experienced
    Magento 2 Company ?
    Read More

    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/.

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

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*

    Be the first to comment.

    Back to Top