Walmart Embraces Amazon MCF: A New Era of Cross-Platform Fulfillment for eCommerce
Walmart Embraces Amazon MCF: A New Era of Cross-Platform Fulfillment for eCommerce
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="http://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.
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.
Walmart Embraces Amazon MCF: A New Era of Cross-Platform Fulfillment for eCommerce
Order Management Redefined: A Centralized Solution for Amazon Sellers
Maximizing TikTok Shop’s Regional Compatibility for US, UK, and EU Markets
Understanding U.S. Tariffs in 2025: What Sellers Need to Know and Do
Walmart’s Search Algorithm Decoded: How to Rank Higher & Sell More
TikTok Gets a 75-Day Reprieve in the USA as Trump Signals Hope for a Deal
TikTok Shop Introduces Category-Based Benchmarks for Product Listings – What Sellers Need to Know
Amazon FBA vs. FBM: Which Fulfillment Method Is Right for You?
Amazon Launches Another AI Tool for Sellers: AI Generated Product Enrichment
Top 10 Selling Items on eBay in 2025
Amazon launches AI Powered ‘Interests’ Feature to Improve Shopping Experience
Is TikTok Staying in the US? The State of TikTok Ban
Best Buy coming back to the US, Marketplace Relaunch and New Opportunities in Store!
Miravia PrestaShop Connector: Built for Smart Sellers
Walmart Launches “Wally”, AI Assistant For Merchants
TikTok Shop to Start Business in Germany, France, and Italy
TikTok Shop Surges as Americans Spend $700 Annually, Defying Regulatory Pressures
Amazon’s Longest Prime Day Ever: What You Need to Know
eCommerce Growth in the Netherlands: A 5% Surge in 2024 with Bright Prospects Ahead
CedCommerce Launches Shopee & Lazada Integration for WooCommerce on WordPress.com