Learn How To Add Magento 2 Multi-select Filter in UI grid

Magento 2 add a custom multi-select filter in UI grid

Running short of time? Get PDF of the blog in your mail.

In this blog we will learn to add a custom Magento 2 Multi-select Filter in UI Grid. Magento has it’s own Multi-select Filter for UI grids but most of the time developers have to implement their custom fields, so through this blog we will see how can we implement our custom filter for those fields in the grid.

Before starting this session, I recommend if you haven’t created any module in magento 2 earlier then refer to the Hello World Module , to understand the request flow of Magento 2 refer to the Magento 2.0 request Flow and to understand the Magento 2 architecture refer to the Magento 2.0 Architecture.

Now, I hope you have the basic knowledge of Magento 2, so let’s begin with today’s task.

We will extend the Customer UI grid and change select input filter to multiselect, for this we will use a pre-defined customer attribute country(billing_country_id). Now let’s begin the quest.

First, we have to rewrite a customer UI component file, app/code/Ced/Custom/view/adminhtml/ui_component/customer_listing.xml

<?xml version="1.0" encoding="UTF-8"?>

<listing xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"

        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">

   <listingToolbar name="listing_top"> 

       <filters component="Ced_CustomAttribute/js/grid/columns/filters"  />

   </listingToolbar>

</listing>

In above code we have added our own filter file Ced_CustomAttribute/js/grid/columns/filter, Now create a js file app/code/Ced/Custom/view/adminhtml/web/js/grid/columns/filters.js

Copy code from vendor/magento/module-ui/view/base/web/js/grid/filters/filters.js to our js file.

In filters.js file now we will add our own logic for implementing multi-select filter, so lets edit the methods one-by-one.

First make changes in the function extractPreview(elem)

function extractPreview(elem) {

  var containers = elem.containers[0];

  if (elem.index == 'billing_country_id') {

      var muliselectValue = containers.applied.billing_country_id;

  }

  return {

      label: elem.label,

      preview: elem.getPreview(),

      elem: elem

  };

}

Then, update Collection.extend({….. default > templates > filters, and add our custom filter of multi-select type after textrange something like this,

textRange: {

  component: 'Magento_Ui/js/grid/filters/range',

  rangeType: 'text'

},

multiselect: {

  component: 'Magento_Ui/js/form/element/multiselect',

  template: 'ui/grid/filters/field',

  options: '${ JSON.stringify($.$data.column.options) }',

  caption: ' '

}

In this we added multi-select type along with the other attribute types, and for this we used Magento Multi-select component. This method will be also useful to you if you want to add any other custom filter other than multi-select and at last we update the on ColumnsUpdate method with a foreach, in this we update the frontend type of our attribute to multi-select.

onColumnsUpdate: function (columns) {

   columns.forEach(function(data,index) {

       if(data){

           if(data.index == 'billing_country_id'){

               data.filter = 'multiselect';

           }

       }

   });

   columns.forEach(this.addFilter, this);

},

That’s it, now you can save the file and re-run the deploy commands to move your js file to pub/static.

php bin/magento setup:static-content:deploy -f

As now you have included your own filter.js so you will have more control on filters section. For example, you can update the filters message, default pre-filled values and so on.

Conclusion

Now in the end, as a conclusion this process will guide you to update a Magento 2 Multi-select Filter in the filter section of UI grids, and you can also modify the filters section as per your requirement.