2

I want to add customer grid in custom module's tab in Magento 2.1 How can I achieve this?

1 Answer 1

0

Follow Step to add the customer grid in tab.

app/code/VendorName/ModuleName/Block/Adminhtml/Customer/Tabs.php

<?php

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
namespace VendorName\ModuleName\Block\Adminhtml\Customer\Edit;

class Tabs extends \Magento\Backend\Block\Widget\Tabs
{
    /**
     * @return void
     */
    protected function _construct()
    {
        parent::_construct();
        $this->setId('page_tabs');
        $this->setDestElementId('edit_form');
        $this->setTitle(__('Notification Information'));
    }

    protected function _beforeToHtml()
    {   
        $this->addTab('customergrid', array(
            'label'     => __('Customers'),
            'title'     => __('Customers'),
            'content'   => $this->getLayout()->createBlock('JT\PushNotification\Block\Adminhtml\Notification\Edit\Tab\Customers')->toHtml(),
        ));

        return parent::_beforeToHtml();
    }
}
app/code/VendorName/ModuleName/Block/Adminhtml/Customer/Edit/Tab/Customers.php
<?php

/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

namespace VendorName\ModuleName\Block\Adminhtml\Customer\Edit\Tab;

class Customers extends \Magento\Backend\Block\Template
{
    /**
     * Block template
     *
     * @var string
     */
    protected $_template = 'customer/customers.phtml';

    /**
     * @var \Magento\Catalog\Block\Adminhtml\Category\Tab\Product
     */
    protected $blockGrid;

    /**
     * @var \Magento\Framework\Registry
     */
    protected $registry;

    /**
     * @var \Magento\Framework\Json\EncoderInterface
     */
    protected $jsonEncoder;

    /**
     * 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,
        array $data = []
    ) {
        $this->registry = $registry;
        $this->jsonEncoder = $jsonEncoder;
        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(
                'VendorName\ModduleName\Block\Adminhtml\Customer\Edit\Tab\CustomerGrid',
                'customer.grid'
            );
        }
        return $this->blockGrid;
    }

    /**
     * Return HTML of grid block
     *
     * @return string
     */
    public function getGridHtml()
    {

        return $this->getBlockGrid()->toHtml();
    }

    /**
     * @return string
     */
    public function getCustomersJson()
    {
        $notificationId = $this->getRequest()->getParam('notification_id', false);
        $customers = [];
        if($notificationId) {
            $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
            $collection = $objectManager->create('VendorName\ModuleName\Model\NotificationQueue')->getCollection();
            $collection->addFieldToFilter('notification_id', ['eq' => $notificationId]);
            if ( $collection->getSize() > 0 ) {
                foreach ($collection as $notification) {
                    $customers[$notification->getCustomerId()] = '';
                }
            }
        }

        if (!empty($customers)) {
            return $this->jsonEncoder->encode($customers);
        }
        return '{}';
    }

}

app/code/VendorName/ModuleName/Block/Adminhtml/Customer/Edit/Tab/CustomerGrid.php

<?php

namespace VendorName\ModuleName\Block\Adminhtml\Customer\Edit\Tab;

/**
 * Class Porders
 * @package VendorName\ModuleName\Block\Adminhtml\Customer\Edit\Tab
 */
class CustomerGrid extends \Magento\Backend\Block\Widget\Grid\Extended
{
    /**
     * @var  \Magento\Framework\Registry
     */
    protected $registry;

    protected $_objectManager = null;

    /**
     *
     * @param \Magento\Backend\Block\Template\Context $context
     * @param \Magento\Backend\Helper\Data $backendHelper
     * @param \Magento\Framework\Registry $registry
     * @param \Magento\Framework\ObjectManagerInterface $objectManager
     * @param \Magento\Customer\Model\Customer $customerCollection,
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Backend\Helper\Data $backendHelper,
        \Magento\Framework\Registry $registry,
        \Magento\Framework\ObjectManagerInterface $objectManager,
        \Magento\Customer\Model\Customer $customerCollection
        array $data = []
    ) {
        $this->customerCollection = $customerCollection;
        $this->_objectManager = $objectManager;
        $this->registry = $registry;
        parent::__construct($context, $backendHelper, $data);
    }

    /**
     * _construct
     * @return void
     */
    protected function _construct()
    {
        parent::_construct();
        $notificationId = $this->getRequest()->getParam('notification_id',0);
        $this->setId('customerGrids_'.$notificationId);
        $this->setDefaultSort('entity_id');
        $this->setSaveParametersInSession(true);
        $this->setUseAjax(true);
    }

    /**
     * add Column Filter To Collection
     */
    protected function _addColumnFilterToCollection($column)
    {
        if ($column->getId() == 'in_customer') {
            $productIds = $this->_getSelectedCustomers();

            if (empty($productIds)) {
                $productIds = 0;
            }
            if ($column->getFilter()->getValue()) {
                $this->getCollection()->addFieldToFilter('entity_id', array('in' => $productIds));
            } else {
                if ($productIds) {
                    $this->getCollection()->addFieldToFilter('entity_id', array('nin' => $productIds));
                }
            }
        } else {
            parent::_addColumnFilterToCollection($column);
        }

        return $this;
    }

    /**
     * prepare collection
     */
    protected function _prepareCollection()
    {
        $collection = $this->customerCollection->getCollection();
        $collection->setOrder('entity_id','DESC');
        $this->setCollection($collection);
        return parent::_prepareCollection();
    }

    /**
     * @return $this
     */
    protected function _prepareColumns()
    {
        $this->addColumn(
            'in_customer',
            [
                'header_css_class' => 'a-center',
                'type' => 'checkbox',
                'name' => 'in_customer',
                'align' => 'center',
                'index' => 'entity_id',
                'values' => $this->_getSelectedCustomers(),
            ]
        );

        $this->addColumn(
            'firstname',
            [
                'header' => __('Firstname'),
                'index' => 'firstname',
                'header_css_class' => 'col-id',
                'column_css_class' => 'col-id',
            ]
        );
        $this->addColumn(
            'lastname',
            [
                'header' => __('Lastname'),
                'index' => 'lastname',
                'header_css_class' => 'col-id',
                'column_css_class' => 'col-id',
            ]
        );
        $this->addColumn(
            'email',
            [
                'header' => __('Email'),
                'index' => 'email',
                'header_css_class' => 'col-id',
                'column_css_class' => 'col-id',
            ]
        );

        return parent::_prepareColumns();
    }

    

    /**
     * @return string
     */
    public function getGridUrl()
    {
        return $this->getUrl('notification/index/customergrid', ['_current' => true]);
    }

    /**
     * @param  object $row
     * @return string
     */
    public function getRowUrl($row)
    {
        return '';
    }

    protected function _getSelectedCustomers()
    {
        return $this->getCustomerIds();
    }

    protected function getCustomerIds()
    {
        $notificationId = $this->getRequest()->getParam('notification_id', false);
        $customers = [];
        if($notificationId) {
            $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
            $collection = $objectManager->create('VendorName\ModuleName\Model\NotificationQueue')->getCollection();
            $collection->addFieldToFilter('notification_id', ['eq' => $notificationId]);
            if ( $collection->getSize() > 0 ) {
                foreach ($collection as $notification) {                    
                    $customers[] = $notification->getCustomerId();
                }
            }
        }
        return $customers;
    }

    /**
     * @return $this
     */
    protected function _prepareMassaction()
    {
        return $this;
    }

    /**
     * {@inheritdoc}
     */
    public function canShowTab()
    {
        return true;
    }

    /**
     * {@inheritdoc}
     */
    public function isHidden()
    {
        return true;
    }
}

app/code/VendorName/ModuleName/Controller/Adminhtml/Index/CustomerGrid.php

<?php

namespace VendorName\ModuleName\Controller\Adminhtml\Index;

use Magento\Backend\App\Action;
use Magento\TestFramework\ErrorLog\Logger;

class CustomerGrid extends \Magento\Backend\App\Action
{

    /**
     * @var \Magento\Framework\View\Result\LayoutFactory
     */
    protected $_resultLayoutFactory;

    /**
     * @param \Magento\Framework\View\Result\LayoutFactory $resultLayoutFactory
     * @param Action\Context $context
     */
    public function __construct(
        Action\Context $context,
        \Magento\Framework\View\Result\LayoutFactory $resultLayoutFactory
    ) {
        parent::__construct($context);
        $this->_resultLayoutFactory = $resultLayoutFactory;
    }

    /**
     * {@inheritdoc}
     */
    protected function _isAllowed()
    {
        return true;
    }

    /**
     * Save action
     *
     * @return \Magento\Framework\Controller\ResultInterface
     */
    public function execute()
    {
        $resultLayout = $this->_resultLayoutFactory->create();
        $resultLayout->getLayout()->getBlock('VendorName\ModuleName\Block\Adminhtml\Customer\Edit\Tab\Customers');

        return $resultLayout;
    }

}

app/code/VendorName/ModuleName/view/adminhtml/templates/customer/customers.phtml

<?php
$blockGrid = $block->getBlockGrid();
$gridJsObjectName = $blockGrid->getJsObjectName();
?>
<?php  echo $block->getGridHtml(); ?>
<input type="hidden" name="notification_customers" id="in_customers" data-form-part="edit_form" value="" />
<script type="text/x-magento-init">
    {
        "*": {
            "VendorName_ModuleName/js/customer/customers": {
                "selectedCustomers": <?php /* @escapeNotVerified */ echo $block->getCustomersJson(); ?>,
                "gridJsObjectName": <?php /* @escapeNotVerified */ echo '"' . $gridJsObjectName . '"' ?: '{}'; ?>
            }
        }
    }
</script>
<!-- @todo remove when "UI components" will support such initialization -->
<script>
    require('mage/apply/main').apply();
</script>

app/code/VendorName/ModuleName/view/adminhtml/layout/notification_index_customergrid.xml

<?xml version="1.0"?>

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
    <container name="root">
        <block class="VendorName\ModuleName\Block\Adminhtml\Customer\Edit\Tab\CustomerGrid" name="notification.customers.grid"/>
    </container>
</layout>

app/code/VendorName/ModuleName/view/adminhtml/web/js/customer/customers.js

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/* global $, $H */

define([
    'mage/adminhtml/grid'
], function () {
    'use strict';

    return function (config) {
        var selectedCustomers = config.selectedCustomers,
            notificationCustomers = $H(selectedCustomers),
            gridJsObject = window[config.gridJsObjectName],
            tabIndex = 1000;

        $('in_customers').value = Object.toJSON(notificationCustomers);

        /**
         * Register Category Product
         *
         * @param {Object} grid
         * @param {Object} element
         * @param {Boolean} checked
         */
        function registerCategoryProduct(grid, element, checked) {
            if (checked) {
                if (element.positionElement) {
                    element.positionElement.disabled = false;
                    notificationCustomers.set(element.value, element.positionElement.value);
                }
                notificationCustomers.set(element.value, '');
            } else {
                if (element.positionElement) {
                    element.positionElement.disabled = true;
                }
                notificationCustomers.unset(element.value);
            }
            $('in_customers').value = Object.toJSON(notificationCustomers);
            grid.reloadParams = {
                'selected_products[]': notificationCustomers.keys()
            };
        }

        /**
         * Click on product row
         *
         * @param {Object} grid
         * @param {String} event
         */
        function categoryProductRowClick(grid, event) {
            var trElement = Event.findElement(event, 'tr'),
                isInput = Event.element(event).tagName === 'INPUT',
                checked = false,
                checkbox = null;

            if (trElement) {
                checkbox = Element.getElementsBySelector(trElement, 'input');

                if (checkbox[0]) {
                    checked = isInput ? checkbox[0].checked : !checkbox[0].checked;
                    gridJsObject.setCheckboxChecked(checkbox[0], checked);
                }
            }
        }

        /**
         * Change product position
         *
         * @param {String} event
         */
        function positionChange(event) {
            var element = Event.element(event);

            if (element && element.checkboxElement && element.checkboxElement.checked) {
                notificationCustomers.set(element.checkboxElement.value, element.value);
                $('in_customers').value = Object.toJSON(notificationCustomers);
            }
        }

        /**
         * Initialize category product row
         *
         * @param {Object} grid
         * @param {String} row
         */
        function categoryProductRowInit(grid, row) {
            var checkbox = $(row).getElementsByClassName('checkbox')[0],
                position = $(row).getElementsByClassName('input-text')[0];

            if (checkbox && position) {
                checkbox.positionElement = position;
                position.checkboxElement = checkbox;
                position.disabled = !checkbox.checked;
                position.tabIndex = tabIndex++;
                Event.observe(position, 'keyup', positionChange);
            }
        }

        gridJsObject.rowClickCallback = categoryProductRowClick;
        gridJsObject.initRowCallback = categoryProductRowInit;
        gridJsObject.checkboxCheckCallback = registerCategoryProduct;

        if (gridJsObject.rows) {
            gridJsObject.rows.each(function (row) {
                categoryProductRowInit(gridJsObject, row);
            });
        }
    };
});

After doing all above things run all commands once and check.

Please let me still if you get any error.

Thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.