1

I am creating a new module that includes the InlineEdit functionality of the UIComponent grid. It's simple to get it working with a simple text input. However, there is neither documentation nor an example of using the select input.

So if you use XML like the following to build your grid, it will add the text_column column and the store_id column and make them editable on click.

<listing>
    ...
    <columns name="company_module_columns">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="editorConfig" xsi:type="array">
                    ...
                    <item name="clientConfig" xsi:type="array">
                        <item name="saveUrl" xsi:type="url" path="company/module/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">company_module.company_module.company_module_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="text_column">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">textRange</item>
                    <item name="label" xsi:type="string" translate="true">Text Column</item>
                    <item name="editor" xsi:type="array">
                        <item name="editorType" xsi:type="string">text</item>
                        <item name="validation" xsi:type="array">
                            <item name="required-entry" xsi:type="boolean">true</item>
                        </item>
                    </item>
                </item>
            </argument>
        </column>
        <column name="store_id" class="Magento\Store\Ui\Component\Listing\Column\Store">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
                    <item name="sortable" xsi:type="boolean">false</item>
                    <item name="label" xsi:type="string" translate="true">Store</item>
                    <item name="editor" xsi:type="array">
                        <item name="editorType" xsi:type="string">select</item>
                        <!-- What do I need to do in this area to provide this dropdown with the proper data? -->
                        <item name="validation" xsi:type="array">
                            <item name="required-entry" xsi:type="boolean">false</item>
                        </item>
                    </item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

Unfortunately, I cannot figure out how to provide data to the dropdown select. If I change it to a text it pulls in the store name, and makes the name editable. But with select and no options provided, it just gives me an empty select, so the form parameters passed to my controller don't include the store field.

I tried several things, the latest being <item name="options" xsi:type="object">Magento\Store\Ui\Component\Listing\Column\Store\Options</item>, which I found on a standard UiComponent form in core Magento2.

4

Check if this code works:

<column name="store_id">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Magento\Store\Ui\Component\Listing\Column\Store\Options</item>
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">select</item>
            <item name="sorting" xsi:type="string">asc</item>
            <item name="sortOrder" xsi:type="number">1</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">Store</item>
            <item name="editor" xsi:type="string">select</item>
        </item>
    </argument>
</column>
1
  • Great suggestion, this does work in that it fills the dropdown with the stores. However, it no longer shows the store before activating the inline editor. I tried adding the class back to the column, and moving the options to different levels, but they seem to conflict. I'm only able to get one to work at a time--either the stores display in the grid on load, or they display in the dropdown select on edit.
    – cyk
    Feb 2 '17 at 16:02

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.