Request Quote

Display a modified collection in grid using ui_component magento 2

Suppose you need to add filters to your collection and you want to display your grid using ui_component as they allow you to configure the page manipulating the UI components, then follow the steps below.

Now suppose you want to display products whose price is greater than 100.

Add this code in your Webkul/ModuleName/view/adminhtml/ui_component/example.xml

<dataSource name="test_products_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
    <argument name="class" xsi:type="string">Webkul\ModuleName\Ui\DataProvider\Product\ProductDataProvider</argument>
    <argument name="name" xsi:type="string">test_products_data_source</argument>
    <argument name="primaryFieldName" xsi:type="string">entity_id</argument>
    <argument name="requestFieldName" xsi:type="string">entity_id</argument>
    <argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="update_url" xsi:type="url" path="mui/index/render"/>
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>

In the code above,

<argument name=”class” xsi:type=”string”>Webkul\ModuleName\Ui\DataProvider\Product\ProductDataProvider</argument>

this line holds to path to our collection.

Now in file ProductDataProvider.php in path Webkul/ModuleName/Ui/DataProvider/Product


namespace Webkul\ModuleName\Ui\DataProvider\Product;

use Magento\Catalog\Model\ResourceModel\Product\CollectionFactory;

class ProductDataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider

    public function __construct(
        CollectionFactory $collectionFactory,
        array $meta = [],
        array $data = []
    ) {
        $collection = $collectionFactory->create();
        $this->collection = $collectionFactory->create()
                          ->addAttributeToFilter('price', ['gt' => 100]);

And that’s it. Follow the rest like you normally do to display a grid.

Happy coding 🙂

. . .


Add Your Comment

Be the first to comment.

Hire Us!
Brief us about your requirements and we'll get back to you.
Woo! Hooy!
We have just recieved your project brief and our expert will contact you shortly.
Send Again