0

I have added a custom grid in my Admin custom module. Now I want to add a Dropdown on the column. So meaning per records will have a dropdown for them to select from. This dropdown will contain list of templates. So basically per record/row I will choose which template I will assign for that record. Then I will have a button where it will run the update command for those record that we selected.

So my question is how can I add a dropdown for the grid table column? It's not just one dropdown. I want to add a dropdown on EVERY ROW in the grid table.

<column name="customer_lastname">
       <argument name="data" xsi:type="array">
           <item name="config" xsi:type="array">
               <item name="filter" xsi:type="string">text</item>
               <item name="label" xsi:type="string" translate="true">Last Name</item>
               <item name="sortOrder" xsi:type="number">6</item>
           </item>
       </argument>
    </column>
    <column name="customer_middlename">
       <argument name="data" xsi:type="array">
           <item name="config" xsi:type="array">
               <item name="filter" xsi:type="string">text</item>
               <item name="label" xsi:type="string" translate="true">Middle Name</item>
               <item name="sortOrder" xsi:type="number">5</item>
           </item>
       </argument>
    </column>
    <column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date" >
       <argument name="data" xsi:type="array">
           <item name="config" xsi:type="array">
               <item name="filter" xsi:type="string">dateRange</item>
               <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
               <item name="dataType" xsi:type="string">date</item>
               <item name="label" xsi:type="string" translate="true">Order Date</item>
               <item name="sortOrder" xsi:type="number">2</item>
           </item>
       </argument>
   </column>
   <actionsColumn name="actions" class="Tcm\Reports\Ui\Component\Listing\Column\Action">
       <argument name="data" xsi:type="array">
           <item name="config" xsi:type="array">
               <item name="resizeEnabled" xsi:type="boolean">false</item>
               <item name="resizeDefaultWidth" xsi:type="string">107</item>
               <item name="indexField" xsi:type="string">id</item>
           </item>
       </argument>
  </actionsColumn>
1
0

You can try following way..

Add select options and component in column. Full column like this:

<column name="items">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Vendor\Module\Ui\Component\Listing\Column\Myoptions</item>
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">select</item>
            <item name="label" xsi:type="string" translate="true">Items</item>
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
            <item name="dataType" xsi:type="string">select</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>

Now create Myoptions.php at

app/code/Vendor/Module/Ui/Component/Listing/Column/Myoptions.php

Now you can load table and pass array data in toOptionArray() like

<?php

namespace Vendor\Module\Ui\Component\Listing\Column;

class Status implements \Magento\Framework\Option\ArrayInterface
{
    //Here you can __construct Model

    public function toOptionArray()
    {
        return [
            ['value' => 0, 'label' => __('Option 1')],
            ['value' => 0, 'label' => __('Option 2')]
        ];
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.