How to add export functionality in Magento 2 new grid system

Question

In Magento 1 I could add export functionality to any admin grid I create by adding this

$this->addExportType('*/*/exportCsv', Mage::helper('helper_alias')->__('CSV'));
$this->addExportType('*/*/exportXml', Mage::helper('helper_alias')->__('Excel XML'));

in the _prepareColumns of the grid block and then implementing the expotCsvAction and exportXmlAction in my admin controller.

How can I achieve the same result in Magento 2 in the new grid system? (the one that uses ui components and knockout js for rendering). Example, the products grid, the cms pages grid.
Or better yet, is this even possible?

• Sohel Rana: Better you can explore 'CustomerImportExport' module. it's working for my own module. If you need then I can create a sample module for you.
• Marius: Thanks, but I don't need (for now) a full import/export functionality. I just want to a grid export to all my custom grids. Kandy's answer solves it elegantly.
• Sohel Rana: No need to explore all module, only Controller and admin layout. Both are exportCsv and exportXml, only.
• Ajeet Singh: <exportButton class="Magento\Ui\Component\ExportButton" component="Magento_Ui/js/grid/export" displayArea="dataGridActions"> <settings> <options> <option 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">mymodule/product/export</item> </option> </options> </settings> </exportButton>

Answer 1

You can use sales/orders grid as example.

exportButton ui component responsible for UI

<exportButton name="export_button">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="selectProvider" xsi:type="string">sales_order_grid.sales_order_grid.sales_order_columns.ids</item>
 </item>
 </argument>
</exportButton>

where selectProvider is component responsible for selections data.

By default csv/xml options available and leads to \Magento\Ui\Controller\Adminhtml\Export\GridTo{Csv,Xml} action that export all selected data from data provider.

• Marius: damn...how did I miss that? I don't even need a custom action anymore for the export. thanks.
• Petar Dzhambazov: Does this still work in 2.1?
• Sakai: It doesn't work on Products grid, gives error on qty columns, fixed it get complaint about interfaces.
• apedic: anyone found a way?

Answer 2

<?php
namespace VendorName\Mymodule\Controller\Adminhtml\Product;
use Magento\Framework\App\Filesystem\DirectoryList;
use Magento\Framework\Filesystem;
use Magento\Framework\Filesystem\Directory\WriteInterface;
use Magento\Ui\Component\MassAction\Filter;
use Magento\Ui\Model\Export\ConvertToCsv;
use Magento\Framework\App\Response\Http\FileFactory;
use VendorName\Mymodule\Model\ResourceModel\Product\CollectionFactory;
class Export extends \Magento\Backend\App\Action
{
/**
 * @var \Magento\Backend\Model\View\Result\ForwardFactory
 */
protected $resultForwardFactory;
/**
 * Massactions filter
 *
 * @var Filter
 */
protected $filter;
/**
 * @var MetadataProvider
 */
protected $metadataProvider;
/**
 * @var WriteInterface
 */
protected $directory;
/**
 * @var ConvertToCsv
 */
protected $converter;
/**
 * @var FileFactory
 */
protected $fileFactory;
public function __construct(
 \Magento\Backend\App\Action\Context $context,
 \Magento\Backend\Model\View\Result\ForwardFactory $resultForwardFactory,
 Filter $filter,
 Filesystem $filesystem,
 ConvertToCsv $converter,
 FileFactory $fileFactory,
 \Magento\Ui\Model\Export\MetadataProvider $metadataProvider,
 \VendorName\Mymodule\Model\ResourceModel\Product $resource,
 CollectionFactory $collectionFactory
) {
 $this->resources = $resource;
 $this->filter = $filter;
 $this->_connection = $this->resources->getConnection();
 $this->directory = $filesystem->getDirectoryWrite(DirectoryList::VAR_DIR);
 $this->metadataProvider = $metadataProvider;
 $this->converter = $converter;
 $this->fileFactory = $fileFactory;
 parent::__construct($context);
 $this->resultForwardFactory = $resultForwardFactory;
 $this->collectionFactory = $collectionFactory;
}
/**
 * export.
 *
 * @return \Magento\Backend\Model\View\Result\Forward
 */
public function execute()
{
 try {
 $selected = $this->getRequest()->getParam('selected');
 if($selected) {
 $collection = $this->collectionFactory->create();
 }else {
 $collection = $this->filter->getCollection($this->collectionFactory->create());
 }
 $ids = $collection->getAllIds();
 $component = $this->filter->getComponent();
 $this->filter->prepareComponent($component);
 $dataProvider = $component->getContext()->getDataProvider();
 $dataProvider->setLimit(0, false);
 $searchResult = $component->getContext()->getDataProvider()->getSearchResult();
 $fields = $this->metadataProvider->getFields($component);
 $options = $this->metadataProvider->getOptions();
 $name = md5(microtime());
 $file = 'export/'. $component->getName() . $name . '.csv';
 $this->directory->create('export');
 $stream = $this->directory->openFile($file, 'w+');
 $stream->lock();
 $stream->writeCsv($this->metadataProvider->getHeaders($component));
 foreach ($searchResult->getItems() as $document) {
 if( in_array( $document->getId(), $ids ) ) {
 $this->metadataProvider->convertDate($document, $component->getName());
 $stream->writeCsv($this->metadataProvider->getRowData($document, $fields, $options));
 }
 }
 $stream->unlock();
 $stream->close();
 return $this->fileFactory->create('export.csv', [
 'type' => 'filename',
 'value' => $file,
 'rm' => true // can delete file after use
 ], 'var');
 }catch (\Exception $e){
 }
}
}

Answer 3

I am just updating Kandy's answer here

in your ui_component listing file you just need to add below one line for export

<exportButton name="export_button"/>

Make sure you add above line in listingToolbar node