Magento 2: Adding Store View Filter To Custom Grid

Nov 23, 2025 by Andrew McMorgan 51 views

Hey guys! Ever wanted to enhance your Magento 2 admin grids with a Store View filter? If you're running a multi-store setup in Magento 2.X, you know how crucial it is to filter data based on specific store views. In this guide, we'll walk you through the process of adding a Store View filter to your custom listing grid. This will make managing data across multiple stores a breeze. Let's dive in!

Why Add a Store View Filter?

Before we get into the how-to, let's quickly cover the why. If you're dealing with multiple store views, you'll quickly realize the default Magento grids can get cluttered. Seeing all your data mashed together isn't ideal, especially when you need to focus on a specific store. A Store View filter lets you narrow down the information, making it easier to manage products, customers, and other entities for particular storefronts. Imagine you're running promotions specific to certain regions or brands – filtering by Store View lets you see exactly how those promotions are performing. This targeted view helps in making informed decisions and streamlining your operations. You'll be able to quickly identify what's working in one store versus another, and tailor your strategies accordingly. Think of it as having laser focus instead of a blurry wide shot. This level of granularity is essential for any Magento 2 store operating across multiple locales or brands. By implementing this filter, you're not just adding a feature; you're enhancing your ability to analyze and act on your data effectively.

Prerequisites

Before we jump into the code, make sure you've got these prerequisites covered:

A Magento 2.X installation: This guide is tailored for Magento 2, so make sure you have a working installation.
A custom module: You should already have a custom module where you want to add the filter. If you don't, you'll need to create one. Think of this as your project's home base. It's where all the customizations specific to this feature will reside. Creating a module ensures that your changes are modular and won't interfere with Magento's core files. It's like building a custom extension to your house, rather than trying to renovate the entire foundation. This approach keeps your Magento installation clean and maintainable. If you're new to module creation, there are tons of resources available online, including the official Magento documentation, which can guide you through the process step by step. Consider this step as laying the groundwork for your filter – a solid foundation will ensure a smoother integration.
Basic understanding of Magento 2 architecture: Familiarity with Magento 2's file structure, di.xml, and UI components will be helpful. This is like knowing the blueprint of the house you're renovating. Understanding the architecture allows you to navigate the system more effectively and make informed decisions about where to place your code. Knowing how Magento handles dependency injection (di.xml), for example, will save you headaches when you need to inject dependencies into your components. Similarly, understanding UI components will empower you to customize the admin grids with confidence. This isn't about becoming a Magento expert overnight, but having a general grasp of the key concepts will make the entire process much less daunting.

Step-by-Step Guide to Adding the Store View Filter

Okay, let's get our hands dirty and add that Store View filter! We'll break this down into manageable steps.

Step 1: Create the `di.xml` Configuration

First, we need to tell Magento about our filter. We do this by creating a di.xml file in your module's etc/adminhtml directory. If the directory doesn't exist, create it. Think of di.xml as the instruction manual for Magento's object manager. It tells Magento how to create and configure objects. This is where we'll define our preference for the UI component that will handle the Store View filtering. By setting a preference, we're essentially saying, "Whenever Magento needs an instance of this interface, use my custom class instead." This is a powerful mechanism that allows you to extend and customize Magento's functionality without directly modifying core files. In our case, we'll be overriding the default filter with our custom filter that includes Store View functionality. This approach ensures that our changes are modular and easily maintainable. If we ever need to disable or remove our customization, we can simply remove the di.xml file or comment out the preference, without affecting the rest of the system. This is a key principle of Magento development – using preferences and plugins to extend functionality in a non-destructive way.

Your di.xml should look something like this:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Ui\Component\MassAction\Filter" type="[YourVendor]\CustomModule\Ui\Component\MassAction\Filter" />
</config>

Replace [YourVendor]\CustomModule with your actual vendor and module name.

Step 2: Create the Custom Filter Class

Now, let's create the custom filter class that will handle the Store View filtering logic. Create a file Filter.php in [YourVendor]/CustomModule/Ui/Component/MassAction. If these directories don't exist, create them. This is where the magic happens! Our custom filter class will extend Magento's default filter and add the logic to handle Store View filtering. Think of this as building upon an existing foundation. We're not reinventing the wheel; we're simply adding a new feature to an existing component. This approach not only saves time and effort but also ensures that our customization is compatible with Magento's core functionality. By extending the default filter, we inherit all its existing capabilities, such as filtering by other attributes. This allows us to seamlessly integrate Store View filtering into the existing filtering mechanism, without breaking anything. Our custom class will be responsible for intercepting the filter request, extracting the Store View ID, and applying it to the collection. This involves interacting with Magento's database abstraction layer and ensuring that the filter is applied correctly. It's like adding a new lens to a camera, allowing it to focus on a specific subject within the broader scene.

Here's a basic example of what your Filter.php might look like:

<?php

namespace [YourVendor]\CustomModule\Ui\Component\MassAction;

use Magento\Framework\App\RequestInterface;
use Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory;
use Magento\Ui\Component\MassAction\Filter as UiMassActionFilter;

class Filter extends UiMassActionFilter
{
    /**
     * @var RequestInterface
     */
    protected $request;

    public function __construct(
        RequestInterface $request,
        CollectionFactory $collectionFactory
    ) {
        $this->request = $request;
        parent::__construct($request, $collectionFactory);
    }

    /**
     * Apply filter to collection
     *
     * @param \Magento\Framework\Data\Collection $collection
     * @return \Magento\Framework\Data\Collection
     */
    public function getCollection(
        \Magento\Framework\Data\Collection $collection
    ) {
        $storeId = $this->request->getParam('store_id');
        if ($storeId) {
            $collection->addStoreFilter($storeId);
        }

        return parent::getCollection($collection);
    }
}

Remember to replace [YourVendor]\CustomModule with your vendor and module name. This code snippet is a starting point, and you might need to adjust it based on your specific needs.

Step 3: Modify Your Listing UI Component

Next, you'll need to modify your listing UI component XML file to include the Store View filter. This file is usually located in [YourVendor]/[YourModule]/view/adminhtml/ui_component. Find your grid's UI component file (e.g., your_entity_listing.xml). This is where you tell Magento to display the Store View filter in your grid. Think of this as designing the interface for your filter. You're defining where it will appear on the screen, what it will look like, and how it will interact with the rest of the grid. The UI component XML file is a powerful tool that allows you to customize almost every aspect of your admin grids. You can add columns, filters, mass actions, and more, all without writing a single line of PHP code. In our case, we'll be adding a new form element to the toolbar of the grid, which will allow users to select a Store View. This involves adding a <formElement> node within the <toolbar> section of your UI component XML file. This form element will typically be a <select> element, which will display a dropdown list of available Store Views. When the user selects a Store View from the dropdown, the grid will automatically refresh, filtering the data based on the selected Store View. This provides a seamless and intuitive user experience.

Add the following code within the <listingToolbar> section:

<filter name="store_id">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="provider" xsi:type="string">ns = ${ $.ns }, index = ids</item>
            <item name="imports" xsi:type="array">
                <item name="store_id" xsi:type="string">${ $.provider }:params.store_id</item>
            </item>
            <item name="exports" xsi:type="array">
                <item name="store_id" xsi:type="string">${ $.provider }:params.store_id</item>
            </item>
            <item name="filterApply" xsi:type="string">${ $.parentName }:reloadData</item>
            <item name="label" xsi:type="string" translate="true">Store View</item>
            <item name="componentType" xsi:type="string">Magento\Ui\Component\Form\Field</item>
            <item name="dataType" xsi:type="string">text</item>
        </item>
    </argument>
    <settings>
        <options class="Magento\Store\Ui\Component\Listing\Column\Store\Options"/>
        <caption translate="true">All Store Views</caption>
        <dataScope>store_id</dataScope>
        <label translate="true">Store View</label>
        <visible>true</visible>
        <filter>select</filter>
    </settings>
</filter>

This code adds a dropdown filter labeled "Store View" to your grid. It uses Magento's built-in Magento\Store\Ui\Component\Listing\Column\Store\Options class to populate the dropdown with store view options.

Step 4: Clear Cache and Test

Finally, clear your Magento cache and test your new filter. You can do this by running the following command in your Magento root directory:

php bin/magento cache:clean

Then, navigate to your custom grid in the admin panel and you should see the Store View filter. Try selecting a store view and see if the grid filters accordingly. This is the moment of truth! After all the coding and configuration, it's time to see if our Store View filter is working as expected. Clearing the cache is crucial because Magento caches a lot of information, including UI component configurations. If you don't clear the cache, you might not see your changes reflected in the admin panel. Think of it as refreshing your browser to see the latest version of a website. Once you've cleared the cache, navigate to your custom grid in the admin panel. If you've followed the steps correctly, you should see a new dropdown filter labeled "Store View" in the grid's toolbar. This is the visual confirmation that our filter has been successfully integrated into the UI. Now, the real test begins. Select a specific Store View from the dropdown and observe the grid. Does it filter the data correctly, displaying only the records associated with the selected Store View? If so, congratulations! You've successfully added a Store View filter to your custom grid. If not, don't worry. Go back through the steps and double-check your code and configuration. Debugging is a natural part of the development process, and with a little persistence, you'll get it working.

Conclusion

And there you have it! You've successfully added a Store View filter to your custom listing grid in Magento 2. This will make managing your multi-store Magento 2 site much easier. Remember, this is a fundamental skill for anyone working with Magento 2, especially in multi-store environments. It's all about enhancing your ability to manage and analyze your data effectively. By implementing this filter, you're not just adding a feature; you're streamlining your workflow and making your Magento 2 experience more efficient. So go ahead, give it a try, and see how much easier it becomes to manage your store views! If you have any questions or run into any issues, feel free to leave a comment below. Happy coding, guys!