Hello Everyone,
In this blog, we will learn about how to Add Inline Edit Functionality in UI Grid in Backend in Magento 2.
Default Magento 2 backend grid provides the functionality of sort, filter and edit the data.
With the help of inline edit functionality admin can edit row from grid directly.
Without wasting your time, let us guide you straight away. Follow the easy step given below to Add Inline Edit Functionality in UI Grid in Magento 2.
STEPS FOR ADD INLINE EDIT IN UI GRID BACKEND IN MAGENTO 2
For Sales Order View:
Step 1: add/update below file ui_listing.xml
app/code/Vendor/Extension/view/adminhtml/ui_component/ui_listing.xml
<columns name=”data_records_columns”>
<settings>
<editorConfig>
<param name=”clientConfig” xsi:type=”array”>
<item name=”saveUrl” xsi:type=”url” path=”routes/action/inlineedit”/>
<item name=”validateBeforeSave” xsi:type=”boolean”>false</item>
</param>
<param name=”indexField” xsi:type=”string”>
entity_id
</param>
<param name=”enabled” xsi:type=”boolean”>
true
</param>
<param name=”selectProvider” xsi:type=”string”>
data_list.data_list.data_records_columns.ids
</param>
</editorConfig>
<childDefaults>
<param name=”fieldAction” xsi:type=”array”>
<item name=”provider” xsi:type=”string”>data_list.data_list.data_records_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>
</param>
</childDefaults>
</settings>
<selectionsColumn name=”ids”>
<argument name=”data” xsi:type=”array”>
<item name=”config” xsi:type=”array”>
<item name=”indexField” xsi:type=”string”>entity_id</item>
<item name=”sortOrder” xsi:type=”number”>0</item>
</item>
</argument>
</selectionsColumn>
//name of a column on which you want to add inline edit
<column name=”name”>
<argument name=”data” xsi:type=”array”>
<item name=”config” xsi:type=”array”>
<item name=”component” xsi:type=”string”>Magento_Ui/js/grid/columns/column</item>
<item name=”editor” xsi:type=”array”>
<item name=”editorType” xsi:type=”string”>text</item>
<item name=”validation” xsi:type=”array”>
<item name=”name” xsi:type=”boolean”>true</item>
</item>
</item>
<item name=”label” xsi:type=”string” translate=”true”>Name</item>
<item name=”dataType” xsi:type=”string”>text</item>
<item name=”sortOrder” xsi:type=”number”>50</item>
<item name=”resizeEnabled” xsi:type=”boolean”>false</item>
<item name=”resizeDefaultWidth” xsi:type=”string”>60</item>
<item name=”sortable” xsi:type=”boolean”>false</item>
</item>
</argument>
</column>
</columns>
Step 2: Create file InlineEdit.php for get and save data
app/code/Vendor/Extension/Controller/Adminhtml/Action/InlineEdit.php
<?php
namespace Vendor\Extension\Controller\Adminhtml\Action;
use Magento\Backend\App\Action;
use Magento\Backend\App\Action\Context;
use Magento\Framework\Controller\Result\JsonFactory;
use Vendor\Extension\Model\Model;
class InlineEdit extends Action
{
protected $jsonFactory;
protected $model;
public function __construct(
Context $context,
JsonFactory $jsonFactory,
Model $model
)
{
parent::__construct($context);
$this->jsonFactory = $jsonFactory;
$this->model = $model;
}
public function execute()
{
$resultJson = $this->jsonFactory->create();
$error = false;
$messages = [];
if ($this->getRequest()->getParam(‘isAjax’)) {
$postItems = $this->getRequest()->getParam(‘items’, []);
if (empty($postItems)) {
$messages[] = __(‘Please correct the data sent.’);
$error = true;
} else {
foreach (array_keys($postItems) as $entityId) {
$modelData = $this->model->load($entityId);
try {
$modelData->setData(array_merge($modelData->getData(), $postItems[$entityId]));
$modelData->save();
} catch (\Exception $e) {
$messages[] = “[Error:] {$e->getMessage()}”;
$error = true;
}
}
}
}
return $resultJson->setData([
‘messages’ => $messages,
‘error’ => $error
]);
}
}
Step 3: Finally run the below commands
$ php bin/magento cache:clean
$ php bin/magento cache:flush
Step 4: Output:
Final Thoughts:
So this was the easiest way which we have told you in this blog. This is how you can Add Inline Edit Functionality in UI Grid Backend in Magento 2. Hope you liked the blog.
So quickly go to the comment box and tell me how you like this blog?
Stay tuned with us on our site to get new updates of Magento.
Thanks for reading and visiting our site.