Contents
Today, We will add an edit inline grid on the admin grid in Magento 2.
The first create a grid using the UI component:
Firstly, you can check how to create the admin grid using UI component.
In the element Columns, I will register the inline editing.
create view/adminhtml/ui_component/flip_index.xml and add code.
<columns name="flipbook_columns">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="editorConfig" xsi:type="array">
<item name="selectProvider" xsi:type="string">flipbook_index.flipbook_index.flipbook_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" path="flipbook/flip/inlineEdit" xsi:type="url"/>
<item name="validateBeforeSave" xsi:type="boolean">false</item>
</item>
</item>
<item name="childDefaults" xsi:type="array">
<item name="fieldAction" xsi:type="array">
<item name="provider" xsi:type="string">flipbook_index.flipbook_index.flipbook_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>
</item>
</argument>Add the editorType and validation fields we can click on the grid we want to edit.
<column name="book">
<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">Book</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>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 the 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/Magepow/Flipbook/Controller/Adminhtml/InlineEdit.php.
<?php
namespace Magepow\Flipbook\Controller\Adminhtml\Flip;
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('Magepow\Flipbook\Model\Flip')->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
]);
}
}Rungning this command
php bin/magento cache:flsuhNow you can edit and save those.
Hope this article will help you in some way. You can see useful articles in the next articles.