Magento 2.2 Listing Grid ‘Select All’ Option Not Working – Fix

admingridmagento2.2selectuicomponent

I’m having issue building listing grid in my own module.
The fact is that if I select one or severals checkboxes, it works. If I select all (one by one or using the select all dropdown above), nothing change. No delete and no confirm message.

After searchs, the parameter « selected » is sent correctly but the array with the id selected is empty.
Do you know why and how to fix it ?

Magento CE : 2.2.5

Sources files :

uiComponent

<!-- main part of the grid -->
<argument name="data" xsi:type="array">
    <!-- define where to find the date source -->
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">maroute2_page_listing.maroute2_page_listing_data_source</item>
        <item name="deps" xsi:type="string">maroute2_page_listing.maroute2_page_listing_data_source</item>
    </item>
    <!-- define where to find the columns -->
    <item name="spinner" xsi:type="string">maroute2_page_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" translate="true">Add a new Contact</item>
            <item name="class" xsi:type="string">primary</item>
            <item name="url" xsi:type="string">*/*/Add</item>
        </item>
    </item>
</argument>

<!-- define the date source (must be the same than in argument/item/provider and argument/js_config/deps -->
<dataSource name="maroute2_page_listing_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <!-- unique name for the grid -->
        <argument name="class" xsi:type="string">ContactsGridDataProvider</argument>
        <!-- name of the data source same as in argument/js_config/provider -->
        <argument name="name" xsi:type="string">maroute2_page_listing_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">toto_contacts_id</argument>
        <argument name="requestFieldName" xsi:type="string">id</argument>
        <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">
                    <item name="indexField" xsi:type="string">toto_contacts_id</item>
                </item>
            </item>
        </argument>
    </argument>
</dataSource>

<!-- define the columns of my grid -->
<columns name="maroute2_page_columns">

    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <!-- Bookmarks behaviour -->
            <item name="storageConfig" xsi:type="array">
                <item name="provider" xsi:type="string">maroute2_page_listing.maroute2_page_listing.listing_top.bookmarks</item>
                <item name="namespace" xsi:type="string">current</item>
            </item>
            <item name="childDefaults" xsi:type="array">
                <item name="controlVisibility" xsi:type="boolean">true</item>
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">maroute2_page_listing.maroute2_page_listing.listing_top.bookmarks</item>
                    <item name="root" xsi:type="string">columns.${ $.index }</item>
                    <item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item>
                </item>
            </item>
        </item>
    </argument>

    <selectionsColumn name="ids">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <!-- define which field will be used as ID -->
                <item name="indexField" xsi:type="string">toto_contacts_id</item>
            </item>
        </argument>
    </selectionsColumn>

    <!-- Column ID -->
    <column name="toto_contacts_id">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">textRange</item>
                <item name="sorting" xsi:type="string">asc</item>
                <item name="label" xsi:type="string" translate="true">ID</item>
            </item>
        </argument>
    </column>
    <!-- Column name -->
    <column name="name">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="visible" xsi:type="boolean">true</item>
                <item name="dataType" xsi:type="string">text</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">contact</item>
                <item name="dataScope" xsi:type="string">name</item>
                <item name="label" xsi:type="string" translate="true">Name</item>
                <item name="filter" xsi:type="string">text</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
            </item>
        </argument>
    </column>
    <!-- Column email -->
    <column name="email">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="visible" xsi:type="boolean">true</item>
                <item name="dataType" xsi:type="string">text</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">contact</item>
                <item name="dataScope" xsi:type="string">email</item>
                <item name="label" xsi:type="string" translate="true">Email</item>
                <item name="filter" xsi:type="string">text</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
            </item>
        </argument>
    </column>
    <!-- action columns edit and delete -->
    <actionsColumn name="actions" class="toto\Helloworld\Ui\Component\Listing\Column\ContactsActions">
        <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">107</item>
                <item name="indexField" xsi:type="string">toto_contacts_id</item>
            </item>
        </argument>
    </actionsColumn>
</columns>

<!-- optionnel -->
<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>

    <!-- we put the others elements here -->
    <container 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">maroute2_page_listing.maroute2_page_listing.maroute2_page_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>
    </container>

    <bookmark name="bookmarks">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/bookmarks/bookmarks</item>
                <item name="displayArea" xsi:type="string">dataGridActions</item>
                <item name="storageConfig" xsi:type="array">
                    <item name="saveUrl" xsi:type="url" path="*/*/save"/>
                    <item name="deleteUrl" xsi:type="url" path="*/*/delete"/>
                    <item name="namespace" xsi:type="string">maroute2_page_listing</item>
                </item>
            </item>
        </argument>
    </bookmark>

    <paging name="listing_paging">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="storageConfig" xsi:type="array">
                    <!-- we put here the path to the bookmarks element -->
                    <item name="provider" xsi:type="string">maroute2_page_listing.maroute2_page_listing.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current.paging</item>
                </item>
                <!-- we put here the path to the element pfay_contact_ids of contacts_test_columns  element -->
                <item name="selectProvider" xsi:type="string">maroute2_page_listing.maroute2_page_listing.maroute2_page_columns.toto_contacts_id</item>
                <item name="displayArea" xsi:type="string">bottom</item>
            </item>
        </argument>
    </paging>

    <filters name="listing_filters">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">maroute2_page_listing.maroute2_page_listing.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">curren.filters</item>
                </item>
                <item name="childDefaults" xsi:type="array">
                    <item name="provider" xsi:type="string">maroute2_page_listing.maroute2_page_listing.listing_top.listing_filters</item>
                    <item name="imports" xsi:type="array">
                        <item name="visible" xsi:type="string">maroute2_page_listing.maroute2_page_listing.listing_top.bookmarks:current.columns.${ $.index }.visible</item>
                    </item>
                </item>
            </item>
        </argument>
    </filters>

    <massaction name="listing_massaction">
         <argument name="data" xsi:type="array">
             <item name="config" xsi:type="array">
                 <!-- we put here the path to the element pfay_contact_ids of contacts_test_columns  element -->
                 <item name="selectProvider" xsi:type="string">maroute2_page_listing.maroute2_page_listing.maroute2_page_columns.ids</item>
                 <item name="displayArea" xsi:type="string">bottom</item>
                 <item name="indexField" xsi:type="string">toto_contacts_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 Selected</item>
                     <item name="url" xsi:type="url" path="*/*/massDelete"/>
                     <item name="confirm" xsi:type="array">
                         <item name="title" xsi:type="string" translate="true">Delete all selected contacts</item>
                         <item name="message" xsi:type="string" translate="true">Do you want to delete all the selected contacts?</item>
                     </item>
                 </item>
             </argument>
         </action>
     </massaction>

     <!-- Filter Search -->
     <filterSearch name="fulltext">
         <argument name="data" xsi:type="array">
             <item name="config" xsi:type="array">
                 <item name="provider" xsi:type="string">maroute2_page_listing.maroute2_page_listing_data_source</item>
                 <item name="chipsProvider" xsi:type="string">maroute2_page_listing.maroute2_page_listing.listing_top.listing_filters_chips</item>
                 <item name="storageConfig" xsi:type="array">
                     <item name="provider" xsi:type="string">maroute2_page_listing.maroute2_page_listing.listing_top.bookmarks</item>
                     <item name="namespace" xsi:type="string">current.search</item>
                 </item>
             </item>
         </argument>
     </filterSearch>

</container>

MassDelete controller

class MassDelete extends \Magento\Backend\App\Action {
public function execute() {
    $ids = $this->getRequest()->getParam('selected', []);

    //var_dump($ids);
    //exit;

    if (!is_array($ids) || !count($ids)) {
        $resultRedirect = $this->resultRedirectFactory->create();
        return $resultRedirect->setPath('*/*/index', array('_current' => true));
    }

    foreach ($ids as $id) {
        if ($contact = $this->_objectManager->create(Contact::class)->load($id)) {
            $contact->delete();
        }
    }
    $this->messageManager->addSuccess(__('A total of %1 record(s) have been deleted.', count($ids)));

    $resultRedirect = $this->resultRedirectFactory->create();
    return $resultRedirect->setPath('*/*/index', array('_current' => true));
}}

/***********************/
Edit 09-06-2018

See below the output when I do a $ids = $this->getRequest()->getParams() and both cases :

//select one or many

array (size=6)
  'key' => string '3facf2af98e5da6519aff1da3ed860651e446b4a51640f3f4db86d43a9ac50a4' (length=64)
    'selected' => 
      array (size=2)
        0 => string '10' (length=2)
        1 => string '9' (length=1)
    'filters' => 
      array (size=1)
        'placeholder' => string 'true' (length=4)
    'search' => string '' (length=0)
    'namespace' => string 'maroute2_page_listing' (length=21)
    'form_key' => string 'DbgFSakzdi1xLujW' (length=16)

//select all

array (size=6)
  'key' => string '3facf2af98e5da6519aff1da3ed860651e446b4a51640f3f4db86d43a9ac50a4' (length=64)
  'excluded' => string 'false' (length=5)
  'filters' => 
    array (size=1)
      'placeholder' => string 'true' (length=4)
  'search' => string '' (length=0)
  'namespace' => string 'maroute2_page_listing' (length=21)
  'form_key' => string 'DbgFSakzdi1xLujW' (length=16)

An array of selected/excluded elements applied filters and applied full-text search terms are sent there. The difference between the transmitted parameters depends on the method of selection. If you press "select all", the element "excluded" contains "false". If you have chosen a few elements manually, the array "selected" contains the entity id of all selected records. If you press "select all", but later uncheck several records manually, the array
"excluded" contains the entity id of all unchecked records. To see an example of the implementation of "massDelete" action and how these parameters are processed, look at the class Magento\Cms\Controller\Adminhtml\Block\massDelete.

https://www.gomage.com/blog/uigrid/

Best Answer

1.You need to create MassDelete.php file in your controller.

<?php
    namespace Namespace\Module\Controller\Adminhtml\Order;

    use Magento\Framework\Controller\ResultFactory;
    use Magento\Backend\App\Action\Context;
    use Magento\Ui\Component\MassAction\Filter;
    use WilliamsCommerce\OrderBy\Model\ResourceModel\OrderBy\CollectionFactory;

    /**
     * Class MassDelete
     */
    class MassDelete extends \Magento\Backend\App\Action
    {
        /**
         * @var Filter
         */
        protected $filter;

        /**
         * @var CollectionFactory
         */
        protected $collectionFactory;

        /**
         * @param Context $context
         * @param Filter $filter
         * @param CollectionFactory $collectionFactory
         */
        public function __construct(Context $context, Filter $filter, CollectionFactory $collectionFactory)
        {
            $this->filter = $filter;
            $this->collectionFactory = $collectionFactory;
            parent::__construct($context);
        }

        /**
         * Execute action
         *
         * @return \Magento\Backend\Model\View\Result\Redirect
         * @throws \Magento\Framework\Exception\LocalizedException|\Exception
         */
        public function execute()
        {
            $collection = $this->filter->getCollection($this->collectionFactory->create());
            $collectionSize = $collection->getSize();

            foreach ($collection as $page) {
                $page->delete();
            }
            $this->messageManager->addSuccess(__('A total of %1 record(s) have been deleted.', $collectionSize));

            /** @var \Magento\Backend\Model\View\Result\Redirect $resultRedirect */
            $resultRedirect = $this->resultFactory->create(ResultFactory::TYPE_REDIRECT);
            return $resultRedirect->setPath('*/*/');
        }
    }

This code will delete your selected rows and all mass delete as well.

Related Solutions

Magento – Multi select filter in magento2 grid

I had the same issue and was searching for a solution for this. Requirement adds multi-select in Newsletter Subscribers grid.

Step 1. In the app\code\Company\Module\view\adminhtml\layout\newsletter_subscriber_block.xml

<block class="Magento\Backend\Block\Widget\Grid\Column" as="column" before="column">
    <arguments>
        <argument name="header" xsi:type="string" translate="true">Product Interests</argument>
        <argument name="index" xsi:type="string">product_interests</argument>
        <argument name="header_css_class" xsi:type="string">col-brand</argument>
        <argument name="column_css_class" xsi:type="string">col-brand</argument>
        <argument name="type" xsi:type="string">options</argument>
        <argument name="filter" xsi:type="string">
            Company\Module\Block\Backend\Widget\Grid\Column\Filter\Multiselect
        </argument>
        <argument name="renderer" xsi:type="string">
            Company\Module\Block\Backend\Widget\Grid\Column\Renderer\Multiselect
        </argument>
    </arguments>
</block>

Step 2.

<?php
   namespace Company\Module\Block\Backend\Widget\Grid\Column\Filter;

   class Multiselect extends \Magento\Backend\Block\Widget\Grid\Column\Filter\Select
   {
        protected function _getOptions()
        {
            $emptyOption = ['value' => null, 'label' => ''];

            $optionGroups = $this->getColumn()->getOptionGroups();
            if ($optionGroups) {
                array_unshift($optionGroups, $emptyOption);
                return $optionGroups;
            }

            $colOptions = $this->getColumn()->getOptions();
            if (!empty($colOptions) && is_array($colOptions)) {
                $options = [$emptyOption];

                foreach ($colOptions as $key => $option) {
                    if (is_array($option)) {
                        $options[] = $option;
                    } else {
                        $options[] = ['value' => $key, 'label' => $option];
                    }
                }
                return $options;
            }
            return [];
        }

        /**
         * {@inheritdoc}
         */
        public function getHtml()
        {
            $html = '<select multiple name="' . $this->_getHtmlName() . '" id="' . $this->_getHtmlId() . '"' . $this->getUiId(
                    'filter',
                        $this->_getHtmlName()
                    ) . 'class="no-changes admin__control-select">';
            $value = $this->getValue();
            foreach ($this->_getOptions() as $option) {
                if (is_array($option['value'])) {
                    $html .= '<optgroup label="' . $this->escapeHtml($option['label']) . '">';
                    foreach ($option['value'] as $subOption) {
                        $html .= $this->_renderOption($subOption, $value);
                    }
                    $html .= '</optgroup>';
                } else {
                    $html .= $this->_renderOption($option, $value);
                }
            }
            $html .= '</select>';
            return $html;
        }
    }
    ?>

Step 3.

<?php
namespace Company\Module\Block\Backend\Widget\Grid\Column\Renderer;

use Magento\Framework\DataObject;

class Multiselect extends \Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer
{
    /**
     * @param DataObject $row
     *
     * @return string
     */
    public function render(DataObject $row)
    {
        $labels = [];
        $values = explode(',', $this->_getValue($row));
        foreach ($values as $value) {
            $labels[] = $value;
        }

        $renderedValue = implode(', ', $labels);

        if ($this->getColumn()->getEditable()) {
            $result = '<div class="admin__grid-control">';
            $result .= $this->getColumn()->getEditOnly() ? ''
                        : '<span class="admin__grid-control-value">' . $renderedValue . '</span>';

            return $result . $this->_getInputValueElement($row) . '</div>' ;
        }
        return $renderedValue;
    }
}
?>

Step 4. Create column in table newsletter_subscriber value will be comma separate

Magento 2: Admin Grid Select Filter with Comma Separated Values

Add below code in your Collection Class

public function addFieldToFilter($field, $condition = null)
{
    if ($field === 'customer_groups') {
        $conditionSec = ['like' => '%'.$condition['eq'].'%'];
        return parent::addFieldToFilter($field, $conditionSec);
    }
    return parent::addFieldToFilter($field, $condition);
}

Best Answer

Related Solutions

Magento – Multi select filter in magento2 grid

Magento 2: Admin Grid Select Filter with Comma Separated Values

Related Topic