Add DropDown in Sales Order Grid Section in Magento 2.2.5

Question

I have checked some of the links but they do not work my need so Please help someone who did this before

sales_order_grid.xml

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
 <columns name="sales_order_columns">
 <column name="company_status">
 <argument name="data" xsi:type="array">
 <item name="options" xsi:type="object">Magento\CompanyStatus\Ui\Component\Listing\Column\CompanyStatus\Options</item>
 <item name="config" xsi:type="array">
 <item name="filter" xsi:type="string">select</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">Company Status</item>
 </item>
 </argument>
 </column>
 </columns>
</listing>

Options.php

<?php
namespace Magento\CompanyStatus\Ui\Component\Listing\Column\CompanyStatus;
use Magento\Framework\Data\OptionSourceInterface;
class Options implements OptionSourceInterface
{
 public function toOptionArray()
 {
 $options = [];
 $options[] = [
 'label' => 'Payment & Artwork: Y > Vplus',
 'value' => 0
 ];
 $options[] = [
 'label' => 'Payment or Artwork: N',
 'value' => 1
 ];
 $options[] = [
 'label' => 'Payment & Artwork: N',
 'value' => 2
 ];
 return $options;
 }
}

enter image description here

• Rakesh Varma: What is the purpose of the dropdown in a column? Is it something like an action you want to perform?
• Kushal Dani: I have to show the dropdown in the grid section. when the admin user changes the dropdown value so it will save in DB
• ZealousWeb: I have a found a way for it. I am posting answer for you.

Answer 1

Please change below code in your sales_order_grid.xml file

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
 <columns name="sales_order_columns">
 <column name="company_status">
 <argument name="data" xsi:type="array">
 <item name="options" xsi:type="object">Magento\CompanyStatus\Ui\Component\Listing\Column\CompanyStatus\Options</item>
 <item name="config" xsi:type="array">
 <item name="filter" xsi:type="string">select</item>
 <item name="component" xsi:type="string">Magento_CompanyStatus/js/grid/columns/select</item>
 <item name="dataType" xsi:type="string">select</item>
 <item name="label" xsi:type="string" translate="true">Company Status</item>
 </item>
 </argument>
 </column>
 </columns>
</listing>

Now please create select.js file under path Magento/CompanyStatus/view/adminhtml/web/js/grid/columns/

define([
 'underscore',
 'Magento_Ui/js/grid/columns/select'
], function (_, Column) {
 'use strict';
 return Column.extend({
 defaults: {
 bodyTmpl: 'Magento_CompanyStatus/ui/grid/cells/select'
 }
 });
});

Now please create select.html file under path Magento/CompanyStatus/view/adminhtml/web/template/ui/grid/cells/

<select>
 <option>Please select</option>
 <option value="0">Payment & Artwork: Y > Vplus</option>
 <option value="1">Payment or Artwork: N</option>
 <option value="2">Payment & Artwork: N</option>
</select>

After that you need to write ajax call on change of options. Please check and let me know if you have any query.

• Kushal Dani: imgur.com/a/aPEMW2W
• Kushal Dani: I tried with your code but it does not display still if you have any solution so please help me on this
• ZealousWeb: I have updated my answer. Please check and let me know on this.
• ZealousWeb: This code will insert dropdown field value. It will not show dropdown. According to your code in your question , it seems you wanted to show options value in column but you are not able to get it.
• Kushal Dani: I have to show the dropdown in the grid section. so do you have ant idea?

Answer 2

Try with below changes. You need to create column editor as below. On click of a row it will open editor for that row in the grid.

enter image description here

Magento/CompanyStatus/view/adminhtml/ui_component/sales_order_grid.xml

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
 <columns name="sales_order_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">sales_order_grid.sales_order_grid.sales_order_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="companystatus/order/inlineEdit"/>
 <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">sales_order_grid.sales_order_grid.sales_order_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>
 <column name="company_status" class="Magento\CompanyStatus\Ui\Component\Listing\Column\CompanyStatus">
 <argument name="data" xsi:type="array">
 <item name="options" xsi:type="object">Magento\CompanyStatus\Model\Config\Source\CompanyStatuses</item>
 <item name="config" xsi:type="array">
 <item name="filter" xsi:type="string">select</item>
 <item name="editor" xsi:type="array">
 <item name="editorType" xsi:type="string">select</item>
 </item>
 <item name="dataType" xsi:type="string">select</item>
 <item name="label" xsi:type="string" translate="true">Company Status</item>
 </item>
 </argument>
 </column>
 </columns>
</listing>

Magento/CompanyStatus/Ui/Component/Listing/Column/CompanyStatus.php

<?php
namespace Magento\CompanyStatus\Ui\Component\Listing\Column;
use Magento\CompanyStatus\Model\Config\Source\CompanyStatuses as CompanyStatusOptions;
class CompanyStatus extends \Magento\Ui\Component\Listing\Columns\Column {
 public function __construct(
 \Magento\Framework\View\Element\UiComponent\ContextInterface $context,
 \Magento\Framework\View\Element\UiComponentFactory $uiComponentFactory,
 array $components = [],
 array $data = []
 ){
 parent::__construct($context, $uiComponentFactory, $components, $data);
 }
 public function prepareDataSource(array $dataSource) {
 if (isset($dataSource['data']['items'])) {
 $companyStatuses = CompanyStatusOptions::getStatuses();
 foreach ($dataSource['data']['items'] as &$item) {
 $item['company_status'] = $companyStatuses[$item['company_status']];
 }
 }
 return $dataSource;
 }
}

Magento/CompanyStatus/Model/Config/Source/CompanyStatuses.php

<?php
namespace Magento\CompanyStatus\Model\Config\Source;
use Magento\Framework\Data\OptionSourceInterface;
class CompanyStatuses implements OptionSourceInterface
{
 const STATUS_0 = 0;
 const STATUS_1 = 1;
 const STATUS_2 = 2;
 public function toOptionArray()
 {
 $options = [];
 $options[] = [
 'label' => 'Payment & Artwork: Y > Vplus',
 'value' => self::STATUS_0
 ];
 $options[] = [
 'label' => 'Payment or Artwork: N',
 'value' => self::STATUS_1
 ];
 $options[] = [
 'label' => 'Payment & Artwork: N',
 'value' => self::STATUS_2
 ];
 return $options;
 }
 public static function getStatuses()
 {
 $options = [
 self::STATUS_0 => 'Payment & Artwork: Y > Vplus',
 self::STATUS_1 => 'Payment or Artwork: N',
 self::STATUS_2 => 'Payment & Artwork: N',
 ];
 return $options;
 }
}

Magento/CompanyStatus/Controller/Adminhtml/Order/InlineEdit.php

<?php
namespace Magento\CompanyStatus\Controller\Adminhtml\Order;
class InlineEdit extends \Magento\Backend\App\Action
{
 protected $jsonFactory;
 protected $orderFactory;
 public function __construct(
 \Magento\Backend\App\Action\Context $context,
 \Magento\Framework\Controller\Result\JsonFactory $jsonFactory,
 \Magento\Sales\Api\OrderRepositoryInterface $orderRepository
 ) {
 parent::__construct($context);
 $this->jsonFactory = $jsonFactory;
 $this->orderRepository = $orderRepository;
 }
 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 $orderId) {
 $order = $this->orderRepository->get($orderId);
 try {
 $order->setData(array_merge($order->getData(), $postItems[$orderId]));
 $this->orderRepository->save($order);
 } catch (\Exception $e) {
 $messages[] = "[ID: {$orderId}] {$e->getMessage()}";
 $error = true;
 }
 }
 }
 }
 return $resultJson->setData([
 'messages' => $messages,
 'error' => $error,
 ]);
 }
}

Magento/CompanyStatus/etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
 <virtualType name="Magento\Sales\Model\ResourceModel\Order\Grid" type="Magento\Sales\Model\ResourceModel\Grid">
 <arguments>
 <argument name="columns" xsi:type="array">
 <item name="company_status" xsi:type="string">sales_order.company_status</item>
 </argument>
 </arguments>
 </virtualType>
</config>

Magento/CompanyStatus/etc/adminhtml/routes.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
 <router id="admin">
 <route frontName="companystatus" id="companystatus">
 <module before="Magento_Backend" name="Magento_CompanyStatus" />
 </route>
 </router>
</config>