Magento 2, the popular e-commerce platform, offers an impressive feature set for businesses and developers alike. Among its offerings, the Magento 2 Admin Grid is a potent tool enabling management and visualization of your store data effectively. Today we'll discuss an essential aspect of customization within the Admin Grid - adding Select/Dropdown components.

 

Creating the UI Component:

To integrate a Select/Dropdown component into your Magento 2 UI Component Admin Grid, you'll start by declaring the UI Component in your XML file.

 

<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">

...

<column name="COLUMN_NAME" component="Magento_Ui/js/grid/columns/select">

...

</column>

...

</listing>

 

'Column' defines the column in which you intend to add the dropdown function, and ‘COLUMN_NAME’ should be replaced with the relevant column's name you want to customize.

 

Configuring the Select/Dropdown Component:

Once you successfully declare your UI component, it's time to structure your Select/Dropdown Component. Replace the '...' in the above XML snippet with the following:

 

<settings>

    <options class="Vendor\Module\Model\Source\Status"/>

    <controlVisibility>true</controlVisibility>

    <dataType>select</dataType>

    <label translate="true">COLUMN_LABEL</label>

</settings>

 

In the 'options' tag, replace 'Vendor\Module\Model\Source\Status' with the path of your model class that retrieves options for the dropdown. 'COLUMN_LABEL' should be replaced with the name you want to display for the column in the grid.

 

Additionally, 'dataType' should always be 'select' for dropdowns, and 'controlVisibility' should be set to true to ensure the dropdown is visible.

 

Creating the Model Class:

Finally, create the model class that will retrieve options for your dropdown component:

 

namespace Vendor\Module\Model\Source;

 

use Magento\Framework\Data\OptionSourceInterface;

 

class Status implements OptionSourceInterface

{

    ...

 

    public function toOptionArray()

    {

        return [

            ['value' => 0, 'label' => __('Option 1')],

            ['value' => 1, 'label' => __('Option 2')],

            ['value' => 2, 'label' => __('Option 3')],

            ...

        ];

    }

}

 

Remember that 'Option 1', 'Option 2', etc., are the options displayed in the dropdown. Customize them according to your requirements.

 

In this blog, we discussed how to add Select/Dropdown components in Magento 2 UI Component Admin Grid. Incorporating dropdown selections can add interactive functionality to your grid, providing a more dynamic user experience. With Magento 2's robust customization options, you can construct an admin grid that efficiently serves your specific needs while optimizing your workflow. 

 

Happy Magento 2 coding!