Add content to ColumnsEditorRecord component

[Pinchanzee]

General issue

Affected page: /guides/v2.4/ui_comp_guide/components/ui-columns-editor-record.html

Description:

No explanation on how to use options that aren't XML hardcoded in a custom type like multi-select.

Additional information:

This functionality is largely useless without the ability to provide dynamic options. I'm assuming there is a way to do this that's just undocumented but I could be wrong.

[m2-assistant[bot]]

Hi @Pinchanzee. Thank you for your report. To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[gixid192]

I think this can only be used for form not grid. In the Field class, it has code to initialize that multiselect node

[Pinchanzee]

How difficult to you think it would it be to bring the inline edit functionality inline with the expectated behaviour? I had a look myself but I'm not proficient with the JS architecture.

[gixid192]

I found a way to accomplish that but it only allows to use 1 multiselect column. More details about why could be found here: https://gist.github.com/gixid192/6e6781b708ace8ad0706f388466bb90a

The code for displaying is as follow (you can try on customer_listing.xml) For the index selector, you can read more about it here: https://devdocs.magento.com/guides/v2.4/ui_comp_guide/concepts/ui_comp_uiregistry.html#debug_uiregistry

<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="imports" xsi:type="array">
        <item name="options" xsi:type="string">index = gender:options</item>
    </item>
</item>

[Pinchanzee]

Brilliant! At least for my purposes, this should work fine as a workaround thanks. Would the same work for checkbox-set?

[gixid192]

Pretty much, because UI component works that way (XML -> PHP -> JS)

[Pinchanzee]

Is there some way to change which index the multiselect looks get to its selected values? For instance if you want to use prepareDataSource to modify how the column data is displayed, but your data provider providers another key that should be used to show populated values. By default it only works if you are displaying the multiselect values comma separated.

Example data source:

[
   'fieldname' => 'pretty display entry1<br/>pretty display entry2',
   'fieldname_raw' => 'entry1,entry2'
]

Is there some way to still show the user-friendly fieldname key while using fieldname_raw key for the multiselect data provider?

[gixid192]

I haven't looked deeper at how index are defined, usually, it defined by the column's name.

However, it's really doesn't matter, you can always let the grid render first, and then get the grid-selector by using knockout https://devdocs.magento.com/guides/v2.4/ui_comp_guide/troubleshoot/ui_comp_troubleshoot_js.html#debugging-using-pure-knockout

[creffect]

I couldn't get it to work with the dynamic options-Tag like select, so I tried overriding the complete component, which worked, but I still couldn't get dynamic options.

I found a solution for me by override only select-component. Of course, the disadvantage is, that it will replace all selects ion one grid, but for my purpose, this was the best solution.

<listing ...>
  <columns ...>
    <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="select" xsi:type="array">
                          <item name="component" xsi:type="string">Dr_VerbeekBol/js/form/element/categoryselect</item>
                          <item name="template" xsi:type="string">Dr_VerbeekBol/form/element/categoryselect</item>
                      </item>
                  </item>
              </item>
          </item>
      </param>
      </editorConfig>
    </settings>
    <column name="categories" component="Magento_Ui/js/grid/columns/select">
      <settings>
          <options class="Dr\VerbeekBol\Model\Source\Categories" />
          <editor>
              <editorType>select</editorType>
          </editor>
          <filter>select</filter>
          <dataType>select</dataType>
          <label translate="true">Kategorien</label>
      </settings> 
    </column>
</columns>
</listing>