Magento2: How to add product images to custom ui-component admin grid

Question

I have a custom grid using ui component method in back-end to show data from a custom table with columns as follows:

id 
product_id 
user_id 
store_ids 
status 
adminassign 
created 
modified 
position

Here the product_id, user_id, status denotes default Product ID, Customer ID and Product Status respectively. Now I have displayed these values in the custom grid.
How can I join the default catalog_product and customer tables to show more fields like Product Name, Product Image, Product Status and Customer Name in to the grid.

Please help me out. Thank you in advance.

Answer 1

You can add _initSelect() method in your Collection.php file in your custom module

protected function _initSelect()
{
 parent::_initSelect();
 $this->getSelect()->joinLeft(
 ['cp' => $this->getTable('catalog_product')],
 'main_table.product_id = cp.entity_id',
 ['*']
 );
 return $this;
}

You can check this module as a reference link.

Hope this will help you!

• Kishan Savaliya: Let me know if it helps. Thanks.
• coderaiseR: Do you mean the Collection class Myvendor\Mymodule\Model\ResourceModel\Pendingproducts\Collection mentioned in di.xml? (like the one in the code below:) <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory"> <arguments> <argument name="collections" xsi:type="array"> <item name="entity_listing_data_source1" xsi:type="string">Myvendor\Mymodule\Model\ResourceModel\Pendingproducts\Collection</item> </argument> </arguments> </type>
• Kishan Savaliya: Yes, Exactly you need to add this in your app\code\Myvendor\Mymodule\Model\ResourceModel\Pendingproducts\Collection.php file
• coderaiseR: I added the _initSelect() method to Collection.php, but it seems like the code is not being run. Because it is not showing anything when I tried to echo the collection query or even added exit() afterwards. Any idea why?
• Kishan Savaliya: Please check your di.xml file if you've created VirtualType there for collection then we need to add this initselect using dataprovider file.