load product grid ui component

Question

I want to load the product grid via an ui_component.

 <fieldset name="fieldset_name">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">Label Bane</item>
 </item>
 </argument>
 <!-- This field represents form id and is hidden -->
 <field name="id">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="visible" xsi:type="boolean">false</item>
 <item name="dataType" xsi:type="string">text</item>
 <item name="formElement" xsi:type="string">input</item>
 <item name="source" xsi:type="string">model</item>
 </item>
 </argument>
 </field>
 <!-- This field has data type 'text' and standard 'input' form element and looks like input -->
 <field name="product_name">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string">Product Name</item>
 <item name="dataType" xsi:type="string">text</item>
 <item name="visible" xsi:type="boolean">true</item>
 <item name="formElement" xsi:type="string">input</item>
 <item name="source" xsi:type="string">model</item>
 </item>
 </argument>
 </field>
 <!-- Source: https://magento.stackexchange.com/questions/180037/magento-2-how-to-add-custom-grid-using-ui-component-in-admin-form-tab -->
 <insertListing>
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="autoRender" xsi:type="boolean">true</item>
 <!-- ui_component name -->
 <item name="ns" xsi:type="string">modulename_productgrid_listing</item>
 </item>
 </argument>
 </insertListing>
</fieldset>

as you can see I use the inserListing the load the "custom" product grid. ( if fact this is 100% the same as /vendor/magento/module-catalog/view/adminhtml/ui_component/product_listing.xml ).

When I check my console under XHR I can see the products but when I check the screen the grid keeps on loading. the other fields are shown and there are no errors

edit: added modulename_productgrid_listing:

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
 <argument name="data" xsi:type="array">
 <item name="js_config" xsi:type="array">
 <item name="provider" xsi:type="string">product_listing.product_listing_data_source</item>
 </item>
 </argument>
 <settings>
 <spinner>product_columns</spinner>
 <deps>
 <dep>product_listing.product_listing_data_source</dep>
 </deps>
 </settings>
 <dataSource name="product_listing_data_source" component="Magento_Ui/js/grid/provider">
 <settings>
 <storageConfig>
 <param name="dataScope" xsi:type="string">filters.store_id</param>
 </storageConfig>
 <updateUrl path="mui/index/render"/>
 </settings>
 <aclResource>Magento_Catalog::products</aclResource>
 <dataProvider class="Magento\Catalog\Ui\DataProvider\Product\ProductDataProvider" name="product_listing_data_source">
 <settings>
 <requestFieldName>id</requestFieldName>
 <primaryFieldName>entity_id</primaryFieldName>
 </settings>
 </dataProvider>
 </dataSource>
 <listingToolbar name="listing_top">
 <settings>
 <sticky>true</sticky>
 </settings>
 <bookmark name="bookmarks"/>
 <columnsControls name="columns_controls"/>
 <filters name="listing_filters">
 <filterSelect name="store_id" provider="${ $.parentName }">
 <settings>
 <options class="Magento\Store\Ui\Component\Listing\Column\Store\Options"/>
 <caption translate="true">All Store Views</caption>
 <label translate="true">Store View</label>
 <dataScope>store_id</dataScope>
 </settings>
 </filterSelect>
 </filters>
 <paging name="listing_paging"/>
 </listingToolbar>
 <columns name="product_columns" class="Magento\Catalog\Ui\Component\Listing\Columns">
 <settings>
 <childDefaults>
 <param name="fieldAction" xsi:type="array">
 <item name="provider" xsi:type="string">product_listing.product_listing.product_columns.actions</item>
 <item name="target" xsi:type="string">applyAction</item>
 <item name="params" xsi:type="array">
 <item name="0" xsi:type="string">edit</item>
 <item name="1" xsi:type="string">${ $.$data.rowIndex }</item>
 </item>
 </param>
 </childDefaults>
 </settings>
 <selectionsColumn name="ids" sortOrder="0">
 <settings>
 <indexField>entity_id</indexField>
 </settings>
 </selectionsColumn>
 <column name="entity_id" sortOrder="10">
 <settings>
 <filter>textRange</filter>
 <label translate="true">ID</label>
 <sorting>asc</sorting>
 </settings>
 </column>
 <column name="thumbnail" class="Magento\Catalog\Ui\Component\Listing\Columns\Thumbnail" component="Magento_Ui/js/grid/columns/thumbnail" sortOrder="20">
 <settings>
 <altField>name</altField>
 <hasPreview>1</hasPreview>
 <addField>true</addField>
 <label translate="true">Thumbnail</label>
 <sortable>false</sortable>
 </settings>
 </column>
 <column name="name" sortOrder="30">
 <settings>
 <addField>true</addField>
 <filter>text</filter>
 <label translate="true">Name</label>
 </settings>
 </column>
 <column name="type_id" component="Magento_Ui/js/grid/columns/select" sortOrder="40">
 <settings>
 <options class="Magento\Catalog\Model\Product\Type"/>
 <filter>select</filter>
 <dataType>select</dataType>
 <label translate="true">Type</label>
 </settings>
 </column>
 <column name="attribute_set_id" component="Magento_Ui/js/grid/columns/select" sortOrder="50">
 <settings>
 <options class="Magento\Catalog\Model\Product\AttributeSet\Options"/>
 <filter>select</filter>
 <dataType>select</dataType>
 <label translate="true">Attribute Set</label>
 </settings>
 </column>
 <column name="sku" sortOrder="60">
 <settings>
 <filter>text</filter>
 <label translate="true">SKU</label>
 </settings>
 </column>
 <column name="price" class="Magento\Catalog\Ui\Component\Listing\Columns\Price" sortOrder="70">
 <settings>
 <addField>true</addField>
 <filter>textRange</filter>
 <label translate="true">Price</label>
 </settings>
 </column>
 <column name="visibility" component="Magento_Ui/js/grid/columns/select" sortOrder="80">
 <settings>
 <addField>true</addField>
 <options class="Magento\Catalog\Model\Product\Visibility"/>
 <filter>select</filter>
 <dataType>select</dataType>
 <label translate="true">Visibility</label>
 </settings>
 </column>
 <column name="status" component="Magento_Ui/js/grid/columns/select" sortOrder="90">
 <settings>
 <addField>true</addField>
 <options class="Magento\Catalog\Model\Product\Attribute\Source\Status"/>
 <filter>select</filter>
 <dataType>select</dataType>
 <label translate="true">Status</label>
 </settings>
 </column>
 <column name="websites" class="Magento\Catalog\Ui\Component\Listing\Columns\Websites" sortOrder="100">
 <settings>
 <addField>true</addField>
 <options class="Magento\Store\Model\ResourceModel\Website\Collection"/>
 <dataType>text</dataType>
 <label translate="true">Websites</label>
 </settings>
 </column>
 <actionsColumn name="actions" class="Magento\Catalog\Ui\Component\Listing\Columns\ProductActions" sortOrder="200">
 <settings>
 <indexField>entity_id</indexField>
 </settings>
 </actionsColumn>
 </columns>
</listing>

• Rutvee Sojitra: please add modulename_productgrid_listing code here
• ThatOneGuyThatDontGetIt: @RutveeSojitra I added the modulename_productgrid_listing as you requested
• Sagar Parikh: @ThatOneGuyThatDontGetIt How did you save the selected product?

Answer 1

Please replace listing name in whole file

product_listing to your listing file name modulename_productgrid_listing

example:

<argument name="data" xsi:type="array">
 <item name="js_config" xsi:type="array">
 <item name="provider" xsi:type="string">**product_listing**.product_listing_data_source</item>
 </item>
</argument>

product_listing this need to change with your product grid name

• Rutvee Sojitra: Happy Coding!!!