2

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>
  • please add modulename_productgrid_listing code here – Rutvee Sojitra Dec 17 '18 at 9:10
  • @RutveeSojitra I added the modulename_productgrid_listing as you requested – ThatOneGuyThatDontGetIt Dec 18 '18 at 19:57
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.