How to make inline edit in admin order grid row?

Question

Can any one please let me know how to override admin sales order grid ui component to make it inline edittable? I have added custom column in the sales order grid and want to make it edittable. Please explain with example.

There are multiple examples to making any custom grid inline editable. I need help for sales order grid.

Answer 1

Add this type of code in your xml

my UI component file name : inquiry_record_inquiry_list.xml

Datasource name is : inquiry_record_inquiry_list_data_source

Column name is : inquiry_records_columns

Route name : productinquiry

Controller name : productinquiry

......................................................
......................................................
......................................................
......................................................
    <columns name="inquiry_records_columns">
        <settings>
            <editorConfig>
                <param name="selectProvider" xsi:type="string">inquiry_record_inquiry_list.inquiry_record_inquiry_list.inquiry_records_columns.ids</param>
                <param name="enabled" xsi:type="boolean">true</param>
                <param name="indexField" xsi:type="string">id</param>
                <param name="clientConfig" xsi:type="array">
                    <item name="saveUrl" path="productinquiry/productinquiry/inlineEdit" xsi:type="url"/>
                    <item name="validateBeforeSave" xsi:type="boolean">false</item>
                </param>
            </editorConfig>
            <childDefaults>
                <param name="fieldAction" xsi:type="array">
                  <item name="provider" xsi:type="string">inquiry_record_inquiry_list.inquiry_record_inquiry_list.inquiry_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">id</item>
                   <item name="sorting" xsi:type="string">desc</item>
                   <item name="sortOrder" xsi:type="number">0</item>
               </item>
           </argument>
       </selectionsColumn>
       <column name="id">
           <argument name="data" xsi:type="array">
               <item name="config" xsi:type="array">
                   <item name="filter" xsi:type="string">number</item>
                   <item name="label" xsi:type="string" translate="true">ID</item>
                   <item name="sortOrder" xsi:type="number">10</item>
               </item>
           </argument>
       </column>
        ......................................................
        ......................................................
        ......................................................
        <column name="inquiry_status" >
           <argument name="data" xsi:type="array">
               <item name="options" xsi:type="object">Vendore\ModuleName\Model\InquiryStatus</item>
               <item name="config" xsi:type="array">
                   <item name="filter" xsi:type="string">select</item>
                   <item name="align" xsi:type="string">center</item>
                   <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                   <item name="dataType" xsi:type="string">select</item>
                   <item name="label" xsi:type="string" translate="true">Status</item>
                   <item name="sortOrder" xsi:type="number">60</item>
                   <item name="editor" xsi:type="array">
                   <item name="editorType" xsi:type="string">select</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">false</item>
                    </item>
                  </item>
               </item>
           </argument>
       </column>
       ......................................................
       ......................................................
       ......................................................
    </columns>

After Change Data save using below file

<?php

namespace VendoreName\ModuleName\Controller\Adminhtml\Productinquiry;

use VendoreName\ModuleName\Model\ProductinquiryFactory;

class InlineEdit extends \Magento\Backend\App\Action
{

    protected $jsonFactory;
    protected $_productinquiryFactory;

    public function __construct(
        \Magento\Backend\App\Action\Context $context,
        \Magento\Framework\Controller\Result\JsonFactory $jsonFactory,
        ProductinquiryFactory $productinquiryFactory
    ) {
        parent::__construct($context);
        $this->jsonFactory = $jsonFactory;
        $this->_productinquiryFactory = $productinquiryFactory;
    }

    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) {
                    $model = $this->_productinquiryFactory->create()->load($modelid);
                    try {
                        $model->setData(array_merge($model->getData(), $postItems[$modelid]));
                        $model->save();
                    } catch (\Exception $e) {
                        $messages[] = "[ID: {$modelid}]  {$e->getMessage()}";
                        $error = true;
                    }
                }
            }
        }

        return $resultJson->setData([
            'messages' => $messages,
            'error' => $error,
        ]);
    }
}

For show Inquiry Status

<?php

namespace VendoreName\ModuleName\Model;

use Magento\Framework\Data\OptionSourceInterface;

class InquiryStatus implements OptionSourceInterface
{
    public function getOptionArray()
    {
        $options = [];
        $options['0'] = __('New');
        $options['1'] = __('Process');
        $options['2'] = __('Reject');
        $options['3'] = __('Complete');
        return $options;
    }
    public function getAllOptions()
    {
        $res = $this->getOptions();
        array_unshift($res, ['value' => '', 'label' => '']);
        return $res;
    }
    public function getOptions()
    {
        $res = [];
        foreach ($this->getOptionArray() as $index => $value) {
            $res[] = ['value' => $index, 'label' => $value];
        }
        return $res;
    }
    public function toOptionArray()
    {
        return $this->getOptions();
    }
}

I Hope This Helps You