cancel
Showing results for 
Search instead for 
Did you mean: 

Admin UI grid multiselect widget

Admin UI grid multiselect widget

I'm using inlineEdit in a UI grid, where in the xml I have a select widget:

 

<column name="foo" component="Magento_Ui/js/grid/columns/select">
<settings>
<label translate="true">Foo</label>
<options class="Vendor\Module\Model\Config\FooOptions"/>
<filter>select</filter>
<dataType>select</dataType>
<editor>
<editorType>select</editorType>
</editor>
</settings>
</column>

 

This works fine for single select, but I cannot figure out how to enable a multi-select widget in this context?

1 REPLY 1

Re: Admin UI grid multiselect widget

I have managed to get it half working. In the columns section, under settings and editorConfig, I add 

<param name="templates">

 as shown below, and if I put a static array of options under 

<item name="multiselect" xsi:type="array">

, this works as desired, but if I instead want to use options provided by toOptionArray method in e.g. Foo\Bar\Model\Config\TestOptions (commented out below), this class is being loaded, I checked, but the toOptionArray() function in it is never called. Should I have some other function in there that provides the options for this multiselect?

 

<columns name="foo">
    <settings>           
        <editorConfig>
            ...

            <param name="templates" xsi:type="array">
                <item name="record" xsi:type="array">
                    <item name="templates" xsi:type="array">
                        <item name="fields" xsi:type="array">

                            <item name="multiselect" xsi:type="array">

                                <item name="component" xsi:type="string">Magento_Ui/js/form/element/multiselect</item>
                                <item name="template" xsi:type="string">ui/form/element/multiselect</item>


                                <!--<item name="options" xsi:type="object">Foo\Bar\Model\Config\TestOptions</item>-->

                                <item name="options" xsi:type="array">
                                    <item name="0" xsi:type="array">
                                        <item name="value" xsi:type="number">1</item>
                                        <item name="label" xsi:type="string" translate="true">Option #1</item>
                                    </item><item name="1" xsi:type="array">
                                        <item name="value" xsi:type="number">2</item>
                                        <item name="label" xsi:type="string" translate="true">Option #2</item>
                                    </item><item name="2" xsi:type="array">
                                        <item name="value" xsi:type="number">3</item>
                                        <item name="label" xsi:type="string" translate="true">Option #3</item>
                                    </item>
                                </item>

                            </item>
                        </item>
                    </item>
                </item>
            </param>

        </editorConfig>
     <settings>