How to inline edit magento 2 product collection using ui-components(grid)?

Question

Suppose i want to edit some rows in product's grid collection.

Answer 1

In the element Columns, You have to 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>
 </item>
 </item>

The action inlineEdit will save the data into the database.

Make the clickable element to edit the data:

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

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

Create the controller for saving edited data:

This file will be located under app/code/Namespace/Modulename/Controller/Adminhtml/Test/

<?php
namespace Namespace\Modulename\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
 ) {
 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 $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]));
 $model->save();
 } catch (\Exception $e) {
 $messages[] = "[Error:] {$e->getMessage()}";
 $error = true;
 }
 }
 }
 }
 return $resultJson->setData([
 'messages' => $messages,
 'error' => $error
 ]);
 }
}

For the reference you can check below link

• how-to-code-inline-editing-grid-in-magento-2-backend
• inline-editing-grid-in-magento-2-backend
• how-inline-edit-work-in-admin-ui-components-grid-magento2

I hope it helps!

• Chirag Patel: @paras surya If my answer is useful to you then you can accept as answer.
• paras surya: yes , it is useful for me.
• Chirag Patel: So you can accept as answer just click on Right arrow below upvote button.
• Sumit: @ChiragPatel How can we implement this functionality on the admin Product grid? Can you please explain. I've tried above but did not get any luck.
• Manisha Vasani: @ChiragPatel how we can add a max limit for the inline edit rows selection at a time?