Magento 2 Create A custom grid for product using Ui component

Question

I want to create a gird using the UI component in Magento. The grid must have product id and product SKU. I tried using the below code but it's not working. Here is the below code to create the grid.

enter image description here

 <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">level_inventory.entity_listing_data_source1</item>
 <item name="deps" xsi:type="string">level_inventory.entity_listing_data_source1</item>
 </item>
 <item name="spinner" xsi:type="string">spinner_columns</item>
 <item name="buttons" xsi:type="array">
 <item name="back" xsi:type="array">
 <item name="name" xsi:type="string">back</item>
 <item name="label" xsi:type="string" translate="true">Back</item>
 <item name="class" xsi:type="string">action-default scalable back</item>
 <item name="url" xsi:type="string">*/*/index</item>
 </item>
 </item>
</argument>
<dataSource name="entity_listing_data_source1">
 <argument name="dataProvider" xsi:type="configurableObject">
 <argument name="class" xsi:type="string">Vendor\Module\Ui\Component\DataProvider\InventoryDetail</argument>
 <argument name="name" xsi:type="string">entity_listing_data_source1</argument>
 <argument name="primaryFieldName" xsi:type="string">entity_id</argument>
 <argument name="requestFieldName" xsi:type="string">id</argument>
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
 <item name="update_url" xsi:type="url" path="mui/index/render"/>
 <item name="storageConfig" xsi:type="array">
 <item name="indexField" xsi:type="string">entity_id</item>
 </item>
 </item>
 </argument>
 </argument>
</dataSource>
<listingToolbar name="listing_top">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="sticky" xsi:type="boolean">true</item>
 </item>
 </argument>
 <paging name="listing_paging"/>
</listingToolbar>
<columns name="spinner_columns">
 <column name="entity_id">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">Product Id</item>
 </item>
 </argument>
 </column>
 <column name="sku">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">SKU</item>
 <item name="sortable" xsi:type="boolean">false</item>
 </item>
 </argument>
 </column>
</columns>

 use Magento\Ui\DataProvider\AbstractDataProvider;
 use Magento\Catalog\Model\ResourceModel\Product\CollectionFactory as ProductCollection;
class InventoryDetail extends AbstractDataProvider
{
protected $productCollection;
public function __construct(
 $name,
 $primaryFieldName,
 $requestFieldName,
 ProductCollection $productCollection,
 array $meta = [],
 array $data = []
) {
 parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
 $this->initCollection();
}
public function initCollection()
{
 $collection = $this->productCollection->create();
 $this->collection = $collection;
}

}

• Mohit Rane: what error are you getting, can share the screenshot?
• Avesh Naik: wait i will upload the image.
• Avesh Naik: Nothing can be seen.
• Mohit Rane: check error logs
• Avesh Naik: Which error log file?

Answer 1

I can suggest that you are not defined you collection in di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
 <arguments>
 <argument name="collections" xsi:type="array">
 <item name="learnmodules_uitest_post_grid" xsi:type="string">Learnmodules\UiGridModule\Model\ResourceModel\Post\Grid\Collection</item>
 </argument>
 </arguments>
</type>
<virtualType name="Learnmodules\UiGridModule\Model\ResourceModel\Post\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
 <arguments>
 <argument name="mainTable" xsi:type="string">learn_uitest_post</argument>
 <argument name="resourceModel" xsi:type="string">Learnmodules\UiGridModule\Model\ResourceModel\Post</argument>
 </arguments>
</virtualType>
<virtualType name="Learnmodules\UiGridModule\Model\ResourceModel\Post\Grid\Collection">
 <arguments>
 <argument name="mainTable" xsi:type="string">learn_uitest_post</argument>
 <argument name="eventPrefix" xsi:type="string">learn_uitest_post_collection</argument>
 <argument name="eventObject" xsi:type="string">learn_uitest_post_collection</argument>
 <argument name="resourceModel" xsi:type="string">Learnmodules\UiGridModule\Model\ResourceModel\Post</argument>
 </arguments>
</virtualType>

my learnmodules_uitest_post_grid will be entity_listing_data_source1 in your code

• Avesh Naik: I am using Vendor\Module\Ui\Component\DataProvider\InventoryDetail directly in <argument name="class" xsi:type="string">, no need to create the above code.

Answer 2

Found the Solution.

Extended Magento\Catalog\Ui\DataProvider\Product\ProductDataProvider for my custom provider (InventoryDetail).

Answer 3

Please, you replace only your following code

<columns name="spinner_columns">
<column name="entity_id">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">Product Id</item>
 </item>
 </argument>
</column>
<column name="sku">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">SKU</item>
 <item name="sortable" xsi:type="boolean">false</item>
 </item>
 </argument>
</column>

To,

<columns name="spinner_columns">
<column name="entity_id">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="filter" xsi:type="string">text</item>
 <item name="label" xsi:type="string" translate="true">Product Id</item>
 <item name="sortOrder" xsi:type="number">10</item>
 <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
 </item>
 </argument>
</column>
<column name="sku">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="filter" xsi:type="string">text</item>
 <item name="label" xsi:type="string" translate="true">Sku</item>
 <item name="sortOrder" xsi:type="number">20</item>
 <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
 </item>
 </argument>
</column>

After that, run php bin/magento cache:flush command and check your custom grid.

I hope, it is useful for you.