gridmagento-2.2.5uicomponent
I wish to add import button in my custom admin grid using ui component, in magento 2.
To add this import button which type of grid is better ? ui component grid or php grid.
Note :
We can fill the grid by clicking add new and fill the form or by
clicking import button and upload csv file
Please provide me a solution
Please check this.
Step 1: Add the following code in your ui form
<fieldset name="assign_products">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Assign Products</item>
<item name="collapsible" xsi:type="boolean">true</item>
<item name="sortOrder" xsi:type="number">40</item>
</item>
</argument>
<container name="assign_products_container" >
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="sortOrder" xsi:type="number">60</item>
</item>
</argument>
<htmlContent name="html_content">
<argument name="block" xsi:type="object">Namespace\Module\Block\Adminhtml\Products\Edit\AssignProducts</argument>
</htmlContent>
</container>
</fieldset>
Step 2: Create AssignProducts.php in Namespace\Module\Block\Adminhtml\Products\Edit
namespace Namespace\Module\Block\Adminhtml\Products\Edit;
class AssignProducts extends \Magento\Backend\Block\Template
{
/**
* Block template
*
* @var string
*/
protected $_template = 'products/assign_products.phtml';
/**
* @var \Magento\Catalog\Block\Adminhtml\Category\Tab\Product
*/
protected $blockGrid;
/**
* @var \Magento\Framework\Registry
*/
protected $registry;
/**
* @var \Magento\Framework\Json\EncoderInterface
*/
protected $jsonEncoder;
protected $_productCollectionFactory;
/**
* AssignProducts constructor.
*
* @param \Magento\Backend\Block\Template\Context $context
* @param \Magento\Framework\Registry $registry
* @param \Magento\Framework\Json\EncoderInterface $jsonEncoder
* @param array $data
*/
public function __construct(
\Magento\Backend\Block\Template\Context $context,
\Magento\Framework\Registry $registry,
\Magento\Framework\Json\EncoderInterface $jsonEncoder,
\Namespace\Module\Model\ResourceModel\Product\CollectionFactory $productCollectionFactory, //your custom collection
array $data = []
) {
$this->registry = $registry;
$this->jsonEncoder = $jsonEncoder;
$this->_productCollectionFactory = $productCollectionFactory;
parent::__construct($context, $data);
}
/**
* Retrieve instance of grid block
*
* @return \Magento\Framework\View\Element\BlockInterface
* @throws \Magento\Framework\Exception\LocalizedException
*/
public function getBlockGrid()
{
if (null === $this->blockGrid) {
$this->blockGrid = $this->getLayout()->createBlock(
'Namespace\Module\Block\Adminhtml\Products\Edit\Tab\Product',
'category.product.grid'
);
}
return $this->blockGrid;
}
/**
* Return HTML of grid block
*
* @return string
*/
public function getGridHtml()
{
return $this->getBlockGrid()->toHtml();
}
/**
* @return string
*/
public function getProductsJson()
{
$vProducts = $this->_productCollectionFactory->create()
->addFieldToFilter('customer_id', $this->getItem()->getCustomerId())
->addFieldToSelect('product_id');
$products = array();
foreach($vProducts as $pdct){
$products[$pdct->getProductId()] = '';
}
if (!empty($products)) {
return $this->jsonEncoder->encode($products);
}
return '{}';
}
public function getItem()
{
return $this->registry->registry('my_item');
}
}
Step3:Create Product.php in Namespace\Module\Block\Adminhtml\Products\Edit\Tab\
namespace Namespace\Module\Block\Adminhtml\Products\Edit\Tab;
use Magento\Backend\Block\Widget\Grid;
use Magento\Backend\Block\Widget\Grid\Column;
use Magento\Backend\Block\Widget\Grid\Extended;
class Product extends \Magento\Backend\Block\Widget\Grid\Extended
{
protected $logger;
/**
* Core registry
*
* @var \Magento\Framework\Registry
*/
protected $_coreRegistry = null;
/**
* @var \Magento\Catalog\Model\ProductFactory
*/
protected $_productFactory;
protected $_productCollectionFactory;
public function __construct(
\Magento\Backend\Block\Template\Context $context,
\Magento\Backend\Helper\Data $backendHelper,
\Magento\Catalog\Model\ProductFactory $productFactory,
\Namespace\Module\Model\ResourceModel\Product\CollectionFactory $productCollectionFactory,
\Magento\Framework\Registry $coreRegistry,
array $data = []
) {
$this->_productFactory = $productFactory;
$this->_coreRegistry = $coreRegistry;
$this->_productCollectionFactory = $productCollectionFactory;
parent::__construct($context, $backendHelper, $data);
}
/**
* @return void
*/
protected function _construct()
{
parent::_construct();
$this->setId('catalog_category_products');
$this->setDefaultSort('entity_id');
$this->setUseAjax(true);
}
/**
* @return array|null
*/
public function getItem()
{
return $this->_coreRegistry->registry('my_item');
}
/**
* @param Column $column
* @return $this
*/
protected function _addColumnFilterToCollection($column)
{
// Set custom filter for in category flag
if ($column->getId() == 'in_category') {
$productIds = $this->_getSelectedProducts();
if (empty($productIds)) {
$productIds = 0;
}
if ($column->getFilter()->getValue()) {
$this->getCollection()->addFieldToFilter('entity_id', ['in' => $productIds]);
} elseif (!empty($productIds)) {
$this->getCollection()->addFieldToFilter('entity_id', ['nin' => $productIds]);
}
} else {
parent::_addColumnFilterToCollection($column);
}
return $this;
}
/**
* @return Grid
*/
protected function _prepareCollection()
{
if ($this->getItem()->getId()) {
$this->setDefaultFilter(['in_category' => 1]);
}
$collection = $this->_productFactory->create()->getCollection()->addAttributeToSelect(
'name'
)->addAttributeToSelect(
'sku'
)->addAttributeToSelect(
'price'
)->joinField(
'position',
'catalog_category_product',
'position',
'product_id=entity_id',
'category_id=' . (int)$this->getRequest()->getParam('id', 0),
'left'
);
$storeId = (int)$this->getRequest()->getParam('store', 0);
if ($storeId > 0) {
$collection->addStoreFilter($storeId);
}
$this->setCollection($collection);
if ($this->getItem()->getProductsReadonly()) {
$productIds = $this->_getSelectedProducts();
if (empty($productIds)) {
$productIds = 0;
}
$this->getCollection()->addFieldToFilter('entity_id', ['in' => $productIds]);
}
return parent::_prepareCollection();
}
/**
* @return Extended
*/
protected function _prepareColumns()
{
if (!$this->getItem()->getProductsReadonly()) {
$this->addColumn(
'in_category',
[
'type' => 'checkbox',
'name' => 'in_category',
'values' => $this->_getSelectedProducts(),
'index' => 'entity_id',
'header_css_class' => 'col-select col-massaction',
'column_css_class' => 'col-select col-massaction'
]
);
}
$this->addColumn(
'entity_id',
[
'header' => __('ID'),
'sortable' => true,
'index' => 'entity_id',
'header_css_class' => 'col-id',
'column_css_class' => 'col-id'
]
);
$this->addColumn('name', ['header' => __('Name'), 'index' => 'name']);
$this->addColumn('sku', ['header' => __('SKU'), 'index' => 'sku']);
$this->addColumn(
'price',
[
'header' => __('Price'),
'type' => 'currency',
'currency_code' => (string)$this->_scopeConfig->getValue(
\Magento\Directory\Model\Currency::XML_PATH_CURRENCY_BASE,
\Magento\Store\Model\ScopeInterface::SCOPE_STORE
),
'index' => 'price'
]
);
$this->addColumn(
'position',
[
'header' => __('Position'),
'type' => 'number',
'index' => 'position',
'editable' => !$this->getItem()->getProductsReadonly()
]
);
return parent::_prepareColumns();
}
/**
* @return string
*/
public function getGridUrl()
{
return $this->getUrl('module/products/grid', ['_current' => true]);
}
/**
* @return array
*/
protected function _getSelectedProducts()
{
$products = $this->getRequest()->getPost('selected_products');
if ($products === null) {
$vProducts = $this->_productCollectionFactory->create()
->addFieldToFilter('customer_id', $this->getItem()->getCustomerId())
->addFieldToSelect('product_id');
$products = array();
foreach($vProducts as $pdct){
$products[] = $pdct->getProductId();
}
}
return $products;
}
}
Step4:Create assign_products.phtml in Namespace\Module\view\adminhtml\templates\products\
<?php
$blockGrid = $block->getBlockGrid();
$gridJsObjectName = $blockGrid->getJsObjectName();
?>
<?php echo $block->getGridHtml(); ?>
<input type="hidden" name="category_products" id="in_category_products" data-form-part="your_form" value="" />
<script type="text/x-magento-init">
{
"*": {
"Namespace_Module/products/assign-products": {
"selectedProducts": <?php /* @escapeNotVerified */ echo $block->getProductsJson(); ?>,
"gridJsObjectName": <?php /* @escapeNotVerified */ echo '"' . $gridJsObjectName . '"' ?: '{}'; ?>
}
}
}
</script>
<!-- @todo remove when "UI components" will support such initialization -->
<script>
require('mage/apply/main').apply();
</script>
Step 4: Copy vendor/magento/module-catalog/view/adminhtml/web/catalog/category/assign-products.js to Namespace/Module/view/adminhtml/web/products/
Step 5: Create Grid.php Namespace/Module/Controller/Adminhtml/Products
namespace Namespace\Module\Controller\Adminhtml\Products;
class Grid extends \Namespace\Module\Controller\Adminhtml\Products\Product
{
/**
* @var \Magento\Framework\Controller\Result\RawFactory
*/
protected $resultRawFactory;
/**
* @var \Magento\Framework\View\LayoutFactory
*/
protected $layoutFactory;
/**
* @param \Magento\Backend\App\Action\Context $context
* @param \Magento\Framework\Controller\Result\RawFactory $resultRawFactory
* @param \Magento\Framework\View\LayoutFactory $layoutFactory
*/
public function __construct(
\Magento\Backend\App\Action\Context $context,
\Magento\Framework\Controller\Result\RawFactory $resultRawFactory,
\Magento\Framework\View\LayoutFactory $layoutFactory
) {
parent::__construct($context);
$this->resultRawFactory = $resultRawFactory;
$this->layoutFactory = $layoutFactory;
}
/**
* Grid Action
* Display list of products related to current category
*
* @return \Magento\Framework\Controller\Result\Raw
*/
public function execute()
{
$item = $this->_initItem(true);
if (!$item) {
/** @var \Magento\Backend\Model\View\Result\Redirect $resultRedirect */
$resultRedirect = $this->resultRedirectFactory->create();
return $resultRedirect->setPath('module/item/new', ['_current' => true, 'id' => null]);
}
/** @var \Magento\Framework\Controller\Result\Raw $resultRaw */
$resultRaw = $this->resultRawFactory->create();
return $resultRaw->setContents(
$this->layoutFactory->create()->createBlock(
'Namespace\Module\Block\Adminhtml\Products\Edit\Tab\Product',
'category.product.grid'
)->toHtml()
);
}
protected function _initItem($getRootInstead = false)
{
$id = (int)$this->getRequest()->getParam('id', false);
$myModel = $this->_objectManager->create('Namespace\Module\Model\Item');
if ($id) {
$myModel->load($id);
}
$this->_objectManager->get('Magento\Framework\Registry')->register('item', $myModel);
$this->_objectManager->get('Magento\Framework\Registry')->register('my_item', $myModel);
$this->_objectManager->get('Magento\Cms\Model\Wysiwyg\Config');
return $storeModel;
}
}
Step 6: Create Product.php Namespace/Module/Controller/Adminhtml/Products
namespace Namespace\Module\Controller\Adminhtml\Products;
abstract class Product extends \Magento\Backend\App\Action
{
/**
* Authorization level of a basic admin session
*
* @see _isAllowed()
*/
const ADMIN_RESOURCE = 'Namespace_Module::item_list';
}
I don't know why you want to keep back button in your grid listing but this is how you can define any button in your ui component grid
<item name="buttons" xsi:type="array">
<item name="add" xsi:type="array">
<item name="name" xsi:type="string">add</item>
<item name="label" xsi:type="string">Add Custom</item>
<item name="class" xsi:type="string">primary</item>
<item name="url" xsi:type="string">*/*/new</item>
</item>
</item>
here */*/new is your path to the controller you want to call.
Add the above code inside the <argument name="data" xsi:type="array"> tag
Updated
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="context" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\Context</argument>
<argument name="namespace" xsi:type="string">custom_grid_listing</argument>
</argument>
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">custom_grid_listing.custom_grid_listing_data_source</item>
<item name="deps" xsi:type="string">custom_grid_listing.custom_grid_listing_data_source</item>
</item>
<item name="spinner" xsi:type="string">custom_grid_columns</item>
<item name="buttons" xsi:type="array">
<item name="add" xsi:type="array">
<item name="name" xsi:type="string">add</item>
<item name="label" xsi:type="string">Add Custom</item>
<item name="class" xsi:type="string">primary</item>
<item name="url" xsi:type="string">*/*/new</item>
</item>
</item>
</argument>
<dataSource name="custom_grid_listing_data_source">
---
</dataSource>
Best Answer
ui_component is easier..