Magento 2.2 UI Component – Collection Not Loading in Admin Grid

collection;gridmagento2magento2.2uicomponent

I have a basic CRUD repository setup, however when I try to go to the Admin Grid UI Component, the spinner just spins and nothing loads. No errors displayed in any of the logs either. When I inspect and view the XHR requests, I can see the collection loading (shark_id: 1, name: foo, etc.)

I'm also able to successfully view the collection on the frontend using a controller with:

$sharks = $this->sharkRepository->getList($this->searchCriteriaBuilder->create())->getItems();

So I know that it is possible to get the collection, but I'm at a loss as to why the Admin Grid won't load. I've gone over the naming and everything seems correct for the column names. Is there something I'm missing?

(Mostly full repository, all files relevant to the Model, ResourceModel, API, and so on are in this git repository)

Model:

<?php
namespace Practice\Sharks\Model;
use Magento\Framework\Model\AbstractModel;
use Magento\Framework\DataObject\IdentityInterface;
use Practice\Sharks\Api\Data\SharkInterface;
/**
 * Class Shark
 * @package Practice\Sharks\Model;
 */
class Shark extends AbstractModel implements SharkInterface, IdentityInterface
{

const CACHE_TAG = 'practice_sharks_shark';
/**
 *
 */
protected function _construct()
{
    $this->_init('Practice\Sharks\Model\ResourceModel\Shark');
}
/**
 * Get shark_id
 * @return string|null
 */
public function getId()
{
    return $this->getData(self::SHARK_ID);
}
/**
 * Set shark_id
 * @param string $sharkId
 * @return \Practice\Sharks\Api\Data\SharkInterface
 */
public function setId($sharkId)
{
    return $this->setData(self::SHARK_ID, $sharkId);
}
/**
 * @return mixed
 */
public function getName()
{
    return $this->getData(self::NAME);
}
/**
 * @param string $name
 */
public function setName($name)
{
    $this->setData(self::NAME, $name);
}
/**
 * @return mixed
 */
public function getCreatedAt()
{
    return $this->getData(self::CREATED_AT);
}
/**
 * @param string $createdAt
 */
public function setCreatedAt($createdAt)
{
    $this->setData(self::CREATED_AT, $createdAt);
}
/**
 * @return mixed
 */
public function getModifiedAt()
{
    return $this->getData(self::MODIFIED_AT);
}
/**
 * @param string $modifiedAt
 */
public function setModifiedAt($modifiedAt)
{
    $this->setData(self::MODIFIED_AT, $modifiedAt);
}
/**
 * Return unique ID(s) for each object in system
 *
 * @return string[]
 */
public function getIdentities()
{
    return [self::CACHE_TAG . '_' . $this->getId()];
}

}

ResourceModel

<?php
namespace Practice\Sharks\Model\ResourceModel;
/**
 * @package Practice\Sharks\Model\ResourceModel
 */
class Shark extends \Magento\Framework\Model\ResourceModel\Db\AbstractDb
{
    protected $_idFieldName = 'shark_id';
    /**
     *
     */
    protected function _construct()
    {
        $this->_init('practice_sharks', 'shark_id');
    }
}

Collection:

<?php
namespace Practice\Sharks\Model\ResourceModel\Shark;
/**
 */
class Collection extends \Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection
{
    /**
     *
     */
    protected function _construct()
    {
        $this->_init('Practice\Sharks\Model\Shark', 'Practice\Sharks\Model\ResourceModel\Shark');
    }
}

di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

<preference for="Practice\Sharks\Api\SharkRepositoryInterface" type="Practice\Sharks\Model\SharkRepository"/>
<preference for="Practice\Sharks\Api\Data\SharkInterface" type="Practice\Sharks\Model\Shark"/>
<preference for="Practice\Sharks\Api\Data\SharkSearchResultsInterface" type="Magento\Framework\Api\SearchResults"/>

<virtualType name="Practice\Sharks\Model\ResourceModel\Shark\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
    <arguments>
        <argument name="mainTable" xsi:type="string">practice_sharks</argument>
        <argument name="resourceModel" xsi:type="string">Practice\Sharks\Model\ResourceModel\Shark\Collection</argument>
    </arguments>
</virtualType>

<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <item name="practice_sharks_listing_data_source" xsi:type="string">Practice\Sharks\Model\ResourceModel\Shark\Grid\Collection</item>
        </argument>
    </arguments>
</type>

Ui Component

<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">practice_sharks_listing.practice_sharks_listing_data_source</item>
        <item name="deps" xsi:type="string">practice_sharks_listing.practice_sharks_listing_data_source</item>
    </item>
    <item name="spinner" xsi:type="string">spinner_columns</item>
    <item name="buttons" xsi:type="array">
        <item name="add" xsi:type="array">
            <item name="name" xsi:type="string">add</item>
            <item name="label" xsi:type="string" translate="true">Add New Shark</item>
            <item name="class" xsi:type="string">primary</item>
            <item name="url" xsi:type="string">*/*/new</item>
        </item>
    </item>
</argument>
<dataSource name="practice_sharks_listing_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument>
        <argument name="name" xsi:type="string">practice_sharks_listing_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">shark_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">shark_id</item>
                </item>
            </item>
        </argument>
    </argument>
</dataSource>
<columns name="spinner_columns">
    <selectionsColumn name="ids">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="resizeEnabled" xsi:type="boolean">false</item>
                <item name="resizeDefaultWidth" xsi:type="string">55</item>
                <item name="indexField" xsi:type="string">shark_id</item>
            </item>
        </argument>
    </selectionsColumn>
    <column name="shark_id">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">textRange</item>
                <item name="sorting" xsi:type="string">asc</item>
                <item name="label" xsi:type="string" translate="true">ID</item>
            </item>
        </argument>
    </column>
    <column name="name">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">text</item>
                <item name="editor" xsi:type="array">
                    <item name="editorType" xsi:type="string">text</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
                <item name="label" xsi:type="string" translate="true">Name</item>
            </item>
        </argument>
    </column>
</columns>

What am I missing? Something in the Collection, Ui_Component? I'm at a loss here.

Best Answer

Fix 1: In app/code/Practice/Sharks/view/adminhtml/ui_component/sharks_shark_listing.xml

Replace practice_sharks_listing to sharks_shark_listing

Fix 2: In app/code/Practice/Sharks/etc/di.xml, change data source to sharks_shark_listing_data_source

Fix 3: app/code/Practice/Sharks/Model/ResourceModel/Shark/Collection.php


<?php
namespace Practice\Sharks\Model\ResourceModel\Shark;

/**

 */
class Collection extends \Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection
{
    /**
     * @var string
     */
    protected $_idFieldName = 'shark_id';

    /**
     *
     */
    protected function _construct()
    {
        $this->_init('Practice\Sharks\Model\Shark', 'Practice\Sharks\Model\ResourceModel\Shark');
    }
}

Related Solutions

Magento 2 – How to Rewrite TierPrice Block

Suppose package:Learning and module: Custom

Module.xml looks like

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Learning_Custom" setup_version="2.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config>

And then create a layout xml following path -> app/code/Learning/Custom/view/frontend/layout/catalog_product_prices.xml

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/layout_generic.xsd">
    <referenceBlock name="render.product.prices">
        <arguments>
            <argument name="default" xsi:type="array">
                <item name="prices" xsi:type="array">
                    <item name="tier_price" xsi:type="array">
                        <item name="render_template" xsi:type="string">Learning_Custom::product/price/tier_prices.phtml
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</layout>

Create template inside your module or copy base template file inside your module path should be -> app/code/Learning/Custom/view/frontend/templates/product/price/tier_prices.phtml

Magento2 – Resolve UI Template / Adminhtml Issues

Create a new class called Wundercarparts\Makeanoffer\Model\ResourceModel\Offers\Grid\Collection (place it in the proper file to match the file path).

The class should look like this

<?php
namespace Wundercarparts\Makeanoffer\Model\ResourceModel\Offers\Grid;

use Magento\Framework\Api\SearchCriteriaInterface;
use Magento\Framework\Api\Search\SearchResultInterface;
use Magento\Framework\DB\Adapter\AdapterInterface;
use Magento\Framework\Data\Collection\Db\FetchStrategyInterface;
use Magento\Framework\Data\Collection\EntityFactoryInterface;
use Magento\Framework\Event\ManagerInterface as EventManagerInterface;
use Magento\Framework\Model\ResourceModel\Db\AbstractDb;
use Magento\Framework\Api\Search\AggregationInterface;
use Psr\Log\LoggerInterface;
use Wundercarparts\Makeanoffer\Model\ResourceModel\Offers\Collection as OffersCollection;

class Collection extends OffersCollection implements SearchResultInterface
{
    /**
     * Aggregations
     * 
     * @var AggregationInterface
     */
    protected $aggregations;

    /**
     * constructor
     * 
     * @param EntityFactoryInterface $entityFactory
     * @param LoggerInterface $logger
     * @param FetchStrategyInterface $fetchStrategy
     * @param EventManagerInterface $eventManager
     * @param string $mainTable
     * @param string $eventPrefix
     * @param string $eventObject
     * @param string $resourceModel
     * @param AdapterInterface $connection
     * @param AbstractDb $resource
     * @param $model
     */
    public function __construct(
        EntityFactoryInterface $entityFactory,
        LoggerInterface $logger,
        FetchStrategyInterface $fetchStrategy,
        EventManagerInterface $eventManager,
        $mainTable,
        $eventPrefix,
        $eventObject,
        $resourceModel,
        AdapterInterface $connection = null,
        AbstractDb $resource = null,
        $model = 'Magento\Framework\View\Element\UiComponent\DataProvider\Document'
    )
    {
        parent::__construct($entityFactory, $logger, $fetchStrategy, $eventManager, $connection, $resource);
        $this->_eventPrefix = $eventPrefix;
        $this->_eventObject = $eventObject;
        $this->_init($model, $resourceModel);
        $this->setMainTable($mainTable);
    }


    /**
     * @return AggregationInterface
     */
    public function getAggregations()
    {
        return $this->aggregations;
    }

    /**
     * @param AggregationInterface $aggregations
     * @return $this
     */
    public function setAggregations($aggregations)
    {
        $this->aggregations = $aggregations;
    }


    /**
     * Retrieve all ids for collection
     * Backward compatibility with EAV collection
     *
     * @param int $limit
     * @param int $offset
     * @return array
     */
    public function getAllIds($limit = null, $offset = null)
    {
        return $this->getConnection()->fetchCol($this->_getAllIdsSelect($limit, $offset), $this->_bindParams);
    }

    /**
     * Get search criteria.
     *
     * @return \Magento\Framework\Api\SearchCriteriaInterface|null
     */
    public function getSearchCriteria()
    {
        return null;
    }

    /**
     * Set search criteria.
     *
     * @param SearchCriteriaInterface $searchCriteria
     * @return $this
     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
     */
    public function setSearchCriteria(SearchCriteriaInterface $searchCriteria = null)
    {
        return $this;
    }

    /**
     * Get total count.
     *
     * @return int
     */
    public function getTotalCount()
    {
        return $this->getSize();
    }

    /**
     * Set total count.
     *
     * @param int $totalCount
     * @return $this
     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
     */
    public function setTotalCount($totalCount)
    {
        return $this;
    }

    /**
     * Set items list.
     *
     * @param \Magento\Framework\Api\ExtensibleDataInterface[] $items
     * @return $this
     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
     */
    public function setItems(array $items = null)
    {
        return $this;
    }
}

then replace in di.xml this

<item name="offers_ui_listing_data_source" xsi:type="string">Wundercarparts\Makeanoffer\Model\ResourceModel\Offers\Collection</item>

with this

<item name="offers_ui_listing_data_source" xsi:type="string">Wundercarparts\Makeanoffer\Model\ResourceModel\Offers\Grid\Collection</item>

and this line

<type name="Wundercarparts\Makeanoffer\Model\ResourceModel\Offers\Collection">

with

<type name="Wundercarparts\Makeanoffer\Model\ResourceModel\Offers\Grid\Collection">

For this last line, if your Offers collection expects the parameters mainTable and others, instead of changing the line, duplicate the section that starts with <type name="Wundercarparts\Makeanoffer\Model\ResourceModel\Offers\Collection"> and then replace the line for the one you just cloned.

Best Answer

Related Solutions

Magento 2 – How to Rewrite TierPrice Block

Magento2 – Resolve UI Template / Adminhtml Issues

Related Topic