Magento2 – Grid UI Component – Part2

In this post we will see more grid secondary ui components to our grid

Second components add more features to the grid we added in previous post.

Export Button

<container name="listing_top">
         <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string">ui/grid/toolbar</item>
            </item>
        </argument>
         <exportButton name="export_button">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="selectProvider" xsi:type="string">hello_world_grid.hello_world_grid.hello_world_columns.ids</item>
                </item>
            </argument>
        </exportButton>
</container>

All below xml tags do inside the ‘container tag

Bookmark

<bookmark name="bookmarks">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="storageConfig" xsi:type="array">
                        <item name="namespace" xsi:type="string">hello_world_grid</item>
                    </item>
                </item>
            </argument>
        </bookmark>

Searching

<filterSearch name="fulltext">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="provider" xsi:type="string">hello_world_grid.excellence_hello_grid_data_source</item>
                    <item name="chipsProvider" xsi:type="string">hello_world_grid.hello_world_grid.listing_top.listing_filters_chips</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">hello_world_grid.hello_world_grid.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.search</item>
                    </item>
                </item>
            </argument>
        </filterSearch>
        <filters name="listing_filters">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="columnsProvider" xsi:type="string">hello_world_grid.hello_world_grid.hello_world_columns</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">hello_world_grid.hello_world_grid.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.filters</item>
                    </item>
                    <item name="childDefaults" xsi:type="array">
                        <item name="provider" xsi:type="string">hello_world_grid.hello_world_grid.listing_top.listing_filters</item>
                        <item name="imports" xsi:type="array">
                            <item name="visible" xsi:type="string">hello_world_grid.hello_world_grid.hello_world_columns.${ $.index }:visible</item>
                        </item>
                    </item>
                </item>
            </argument>
        </filters>

Column Controls

 <component name="columns_controls">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="columnsData" xsi:type="array">
                        <item name="provider" xsi:type="string">hello_world_grid.hello_world_grid.hello_world_columns</item>
                    </item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item>
                    <item name="displayArea" xsi:type="string">dataGridActions</item>
                </item>
            </argument>
        </component>

Paging

<paging name="listing_paging">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">hello_world_grid.hello_world_grid.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.paging</item>
                    </item>
                    <item name="selectProvider" xsi:type="string">hello_world_grid.hello_world_grid.hello_world_columns.ids</item>
                </item>
            </argument>
        </paging>

Mass Action

<massaction name="listing_massaction">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="selectProvider" xsi:type="string">hello_world_grid.hello_world_grid.hello_world_columns.ids</item>
                    <item name="indexField" xsi:type="string">entity_id</item>
                </item>
            </argument>
            <action name="delete">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="type" xsi:type="string">delete</item>
                        <item name="label" xsi:type="string" translate="true">Delete</item>
                        <item name="url" xsi:type="url" path="hello/world/massDelete"/>
                    </item>
                </argument>
            </action>
        </massaction>

The post Magento2 – Grid UI Component – Part2 appeared first on Excellence Technologies Magento Blog | Magento Tutorials | Magento Developer.