Magento 2 – Add Export Button in Custom Grid

exportgridmagento2uicomponent

I have created a custom grid and trying to add export button for it.

here is the code i used in my listing.xml file.

<exportButton class="Magento\Ui\Component\ExportButton">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="options" xsi:type="array">
                    <item name="cvs" xsi:type="array">
                        <item name="value" xsi:type="string">csv</item>
                        <item name="label" xsi:type="string" translate="true">CSV</item>
                        <item name="url" xsi:type="string">mui/export/gridToCsv</item>
                    </item>
                    <item name="xml" xsi:type="array">
                        <item name="value" xsi:type="string">xml</item>
                        <item name="label" xsi:type="string" translate="true">Excel XML</item>
                        <item name="url" xsi:type="string">mui/export/gridToXml</item>                          
                    </item> 
                </item>
            </item>
        </argument>
    </exportButton>

Once i click the export button i am getting below error.

"Notice: Undefined index: attributes in /vendor/magento/framework/View/Element/UiComponentFactory.php on line 166"

Update:

Full code of my listing.xml file.

<?xml version="1.0" encoding="UTF-8"?>
 <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<!-- Integration -->
<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <!-- we define a provider -->
        <item name="provider" xsi:type="string">catalogreport_manage_listing.catalogreport_manage_listing_data_source</item>
        <!-- same string as above -->
        <item name="deps" xsi:type="string">catalogreport_manage_listing.catalogreport_manage_listing_data_source</item>
    </item>
    <!-- define column type -->
    <item name="spinner" xsi:type="string">catalogreport_manage_columns</item>
</argument>
<!-- Data source -->
<dataSource name="catalogreport_manage_listing_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">ManageGridDataProvider</argument> <!-- Data provider class -->
        <argument name="name" xsi:type="string">catalogreport_manage_listing_data_source</argument> <!-- provider defined above -->
        <argument name="primaryFieldName" xsi:type="string">item_id</argument> <!-- Primary key -->
        <argument name="requestFieldName" xsi:type="string">id</argument> <!-- URL name parameter -->
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
                <item name="update_url" xsi:type="url" path="mui/index/render"/>
                <item name="storageConfig" xsi:type="array">
                    <!-- Primary key column name -->
                    <item name="indexField" xsi:type="string">item_id</item>
                </item>
            </item>
        </argument>
    </argument>
</dataSource>
<!-- Container Listing Top -->
<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>
    <bookmark name="bookmarks" />
    <columnsControls name="columns_controls" />
    <filters name="listing_filters" />
    <!-- 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">catalogreport_manage_listing.catalogreport_manage_listing.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current.paging</item>
                </item>
                <item name="selectProvider" xsi:type="string">catalogreport_manage_listing.catalogreport_manage_listing.catalogreport_manage_columns.ids</item>
                <item name="displayArea" xsi:type="string">bottom</item>
            </item>
        </argument>
    </paging>
    <exportButton class="Magento\Ui\Component\ExportButton">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="options" xsi:type="array">
                    <item name="csv" xsi:type="array">
                        <item name="value" xsi:type="string">csv</item>
                        <item name="label" xsi:type="string" translate="true">CSV</item>
                        <item name="url" xsi:type="string">mui/export/gridToCsv</item>
                    </item>
                    <item name="xml" xsi:type="array">
                        <item name="value" xsi:type="string">xml</item>
                        <item name="label" xsi:type="string" translate="true">Excel XML</item>
                        <item name="url" xsi:type="string">mui/export/gridToXml</item>                          
                    </item> 
                </item>
            </item>
        </argument>
    </exportButton>


</container>
<!-- Columns -->
<columns name="catalogreport_manage_columns">
    <column name="increment_id" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">true</item>
                <item name="label" xsi:type="string" translate="true">Order number</item>
            </item>
        </argument>
    </column>
     <column name="sku">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
               <item name="filter" xsi:type="string">false</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 name="label" xsi:type="string" translate="true">SKU</item>
            </item>
        </argument>
    </column>
    <column name="customer_email" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">false</item>
                <item name="label" xsi:type="string" translate="true">Email</item>
            </item>
        </argument>
    </column>

    <column name="weee_tax_applied_amount" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">false</item>
                <item name="label" xsi:type="string" translate="true">Street</item>
            </item>
        </argument>
    </column>
    <column name="weee_tax_applied_row_amount" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">false</item>
                <item name="label" xsi:type="string" translate="true">City</item>
            </item>
        </argument>
    </column>

    <column name="weee_tax_disposition" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">false</item>
                <item name="label" xsi:type="string" translate="true">Postcode</item>
            </item>
        </argument>
    </column>

    <column name="weee_tax_row_disposition" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">false</item>
                <item name="label" xsi:type="string" translate="true">Country</item>
            </item>
        </argument>
    </column>


    <!-- new code -->

    <column name="created_at">
       <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">dateRange</item>
                <item name="editor" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Created At</item>
                <item name="sortOrder" xsi:type="number">60</item>
            </item>
        </argument>
    </column>
    <!-- new code -->
    <column name="status" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">false</item>
                <item name="label" xsi:type="string" translate="true">Status</item>
            </item>
        </argument>
    </column>
    <column name="name" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">false</item>
                <item name="label" xsi:type="string" translate="true">Product name</item>
            </item>
        </argument>
    </column>
    <column name="qty_ordered" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">false</item>
                <item name="label" xsi:type="string" translate="true">Quantity</item>
            </item>
        </argument>
    </column>
    <column name="shipping_amount" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">false</item>
                <item name="label" xsi:type="string" translate="true">Shipping amount</item>
            </item>
        </argument>
    </column>
    <column name="discount_description" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">false</item>
                <item name="label" xsi:type="string" translate="true">Discount code</item>
            </item>
        </argument>
    </column>
    <column name="discount_amount" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">false</item>
                <item name="label" xsi:type="string" translate="true">Discount</item>
            </item>
        </argument>
    </column>
    <column name="price" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">false</item>
                <item name="label" xsi:type="string" translate="true">Price</item>
            </item>
        </argument>
    </column>
    <column name="row_total" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">false</item>
                <item name="label" xsi:type="string" translate="true">Row total</item>
            </item>
        </argument>
    </column>
    <column name="grand_total" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">false</item>
                <item name="label" xsi:type="string" translate="true">Grand total</item>
            </item>
        </argument>
    </column>
</columns>

Can anyone help me to solve this error.

Thanks

Best Answer

Check my updated answer.. 

<?xml version="1.0" encoding="UTF-8"?>
     <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <!-- Integration -->
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <!-- we define a provider -->
            <item name="provider" xsi:type="string">catalogreport_manage_listing.catalogreport_manage_listing_data_source</item>
            <!-- same string as above -->
            <item name="deps" xsi:type="string">catalogreport_manage_listing.catalogreport_manage_listing_data_source</item>
        </item>
        <!-- define column type -->
        <item name="spinner" xsi:type="string">catalogreport_manage_columns</item>
    </argument>
    <!-- Data source -->
    <dataSource name="catalogreport_manage_listing_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">ManageGridDataProvider</argument> <!-- Data provider class -->
            <argument name="name" xsi:type="string">catalogreport_manage_listing_data_source</argument> <!-- provider defined above -->
            <argument name="primaryFieldName" xsi:type="string">item_id</argument> <!-- Primary key -->
            <argument name="requestFieldName" xsi:type="string">id</argument> <!-- URL name parameter -->
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
                    <item name="update_url" xsi:type="url" path="mui/index/render"/>
                    <item name="storageConfig" xsi:type="array">
                        <!-- Primary key column name -->
                        <item name="indexField" xsi:type="string">item_id</item>
                    </item>
                </item>
            </argument>
        </argument>
    </dataSource>
    <!-- Container Listing Top -->
    <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>
        <bookmark name="bookmarks" />
        <columnsControls name="columns_controls" />
        <filters name="listing_filters" />
        <!-- 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">catalogreport_manage_listing.catalogreport_manage_listing.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.paging</item>
                    </item>
                    <item name="selectProvider" xsi:type="string">catalogreport_manage_listing.catalogreport_manage_listing.catalogreport_manage_columns.ids</item>
                    <item name="displayArea" xsi:type="string">bottom</item>
                </item>
            </argument>
        </paging>
        <exportButton class="Magento\Ui\Component\ExportButton">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="options" xsi:type="array">
                        <item name="csv" xsi:type="array">
                            <item name="value" xsi:type="string">csv</item>
                            <item name="label" xsi:type="string" translate="true">CSV</item>
                            <item name="url" xsi:type="string">mui/export/gridToCsv</item>
                        </item>
                        <item name="xml" xsi:type="array">
                            <item name="value" xsi:type="string">xml</item>
                            <item name="label" xsi:type="string" translate="true">Excel XML</item>
                            <item name="url" xsi:type="string">mui/export/gridToXml</item>                          
                        </item> 
                    </item>
                </item>
            </argument>
        </exportButton>


    </container>
    <!-- Columns -->
    <columns name="catalogreport_manage_columns">
        <selectionsColumn name="ids">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="resizeEnabled" xsi:type="boolean">false</item>
                    <item name="resizeDefaultWidth" xsi:type="string">55</item>
                    <item name="indexField" xsi:type="string">item_id</item>
                </item>
            </argument>
        </selectionsColumn>
        <column name="increment_id" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">true</item>
                    <item name="label" xsi:type="string" translate="true">Order number</item>
                </item>
            </argument>
        </column>
         <column name="sku">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                   <item name="filter" xsi:type="string">false</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 name="label" xsi:type="string" translate="true">SKU</item>
                </item>
            </argument>
        </column>
        <column name="customer_email" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">false</item>
                    <item name="label" xsi:type="string" translate="true">Email</item>
                </item>
            </argument>
        </column>

        <column name="weee_tax_applied_amount" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">false</item>
                    <item name="label" xsi:type="string" translate="true">Street</item>
                </item>
            </argument>
        </column>
        <column name="weee_tax_applied_row_amount" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">false</item>
                    <item name="label" xsi:type="string" translate="true">City</item>
                </item>
            </argument>
        </column>

        <column name="weee_tax_disposition" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">false</item>
                    <item name="label" xsi:type="string" translate="true">Postcode</item>
                </item>
            </argument>
        </column>

        <column name="weee_tax_row_disposition" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">false</item>
                    <item name="label" xsi:type="string" translate="true">Country</item>
                </item>
            </argument>
        </column>


        <!-- new code -->

        <column name="created_at">
           <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">dateRange</item>
                    <item name="editor" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Created At</item>
                    <item name="sortOrder" xsi:type="number">60</item>
                </item>
            </argument>
        </column>
        <!-- new code -->
        <column name="status" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">false</item>
                    <item name="label" xsi:type="string" translate="true">Status</item>
                </item>
            </argument>
        </column>
        <column name="name" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">false</item>
                    <item name="label" xsi:type="string" translate="true">Product name</item>
                </item>
            </argument>
        </column>
        <column name="qty_ordered" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">false</item>
                    <item name="label" xsi:type="string" translate="true">Quantity</item>
                </item>
            </argument>
        </column>
        <column name="shipping_amount" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">false</item>
                    <item name="label" xsi:type="string" translate="true">Shipping amount</item>
                </item>
            </argument>
        </column>
        <column name="discount_description" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">false</item>
                    <item name="label" xsi:type="string" translate="true">Discount code</item>
                </item>
            </argument>
        </column>
        <column name="discount_amount" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">false</item>
                    <item name="label" xsi:type="string" translate="true">Discount</item>
                </item>
            </argument>
        </column>
        <column name="price" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">false</item>
                    <item name="label" xsi:type="string" translate="true">Price</item>
                </item>
            </argument>
        </column>
        <column name="row_total" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">false</item>
                    <item name="label" xsi:type="string" translate="true">Row total</item>
                </item>
            </argument>
        </column>
        <column name="grand_total" class="Vendor\Catalogreport\Ui\Component\Listing\Column\Quantity">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">false</item>
                    <item name="label" xsi:type="string" translate="true">Grand total</item>
                </item>
            </argument>
        </column>
    </columns>
 </listing>
Related Topic