MultiselectColumn component

Overview

The MultiselectColumn component implements a column with check boxes for selecting records. It also provides controls for selecting multiple records.

MultiselectColumn is a child of the Listing component and is rendered in its view. Like any component, it can hold the sort order value, which influences the order of all its child elements.

MultiselectColumn JS Component Structure

The MultiselectColumn component is implemented in the class app\code\Magento\Ui\view\base\web\js\grid\columns\multiselect.js.

Templates used by this component are:

app\code\Magento\Ui\view\base\web\templates\grid\cells\multiselect.html - The template defines each field in the grid. It provides the Multiselect component with the check box interface for selecting item(s) in the grid and performing actions over them.
app\code\Magento\Ui\view\base\web\templates\grid\columns\multiselect.html - The template defines the grid header with drop-down lists and the Select All, Deselect All, and other options.

MultiselectColumn configuration

Extends all Column configuration.

MultiselectColumn-specific configuration:

Option	Description	Type	Default Value
`bodyTmpl`	Path to the template that is used to render a column's field in the table's body.	String	`ui/grid/cells/multiselect`
`controlVisibility`	Whether a user can control column's visibility handled by the ColumnsControls component.	String	`false`
`draggable`	Defines if a user can change column's position in the table by grabbing column's header and dragging it across the table.	Boolean	`false`
`fieldClass`	Additonal CSS classes added to the column's field elements.	{ [name: string]: boolean }	{ `'data-grid-checkbox-cell': true` }
`headerTmpl`	Path to the `.html` template for the column's header.	String	`ui/grid/columns/multiselect`
`preserveSelectionsOnFilter`	Whether to preserve selected items when a new filter value is applied.	Boolean	`false`
`sortable`	Whether a column's fields can be used to sort records in the table.	Boolean	`false`

Methods and Events

No events are generated. Any other component that can retrieve access to this component and its properties can get data and track its changes using subscription.

How to configure a MultiselectColumn сomponent already used in code

Sample of code where component configurations are performed:

Current implementation:

<column name="ids" class="Magento\Ui\Component\MassAction\Columns\Column">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/multiselect</item>
         </item>
         <item name="config" xsi:type="array">
             <item name="indexField" xsi:type="string">page_id</item>
             <item name="appendTo" xsi:type="string"></item>
         </item>
    </argument>
</column>

Example configuration modifications:

Redefining the link to the template

<column name="ids" class="Magento\Ui\Component\MassAction\Columns\Column">
    <argument name="data" xsi:type="array">
        ...
        <item name="config" xsi:type="array">
            <item name="headerTmpl" xsi:type="string">product/grid/columns/multiselect</item>
        </item>
    </argument>
</column>

Redefining the name of the property which represents record identifier

<column name="ids" class="Magento\Ui\Component\MassAction\Columns\Column">
    <argument name="data" xsi:type="array">
        ...
        <item name="config" xsi:type="array">
            <item name="indexField" xsi:type="string">product_id</item>
        </item>
    </argument>
</column>

Redefining a property data source

<column name="ids" class="Magento\Ui\Component\MassAction\Columns\Column">
    <argument name="data" xsi:type="array">
        ...
        <item name="config" xsi:type="array">
            <item name="imports" xsi:type="array">
                <item name="rows">products_prodvider:data.products</item>
            </item>
        </item>
    </argument>
</column>

How to add a new component

Instance Replacement: One Instance of a Component

Redefine the link to constructor:

<column name="ids" class="Magento\Ui\Component\MassAction\Columns\Column">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Products/js/grid/columns/multiselect</item>
        </item>
    </argument>
</column>

Edit this page on GitHub

Give us feedback