Magento 2 - Custom Grid Admin Error

Question

I'm trying to display a very simple grid in Magento 2 just for practice, but it keeps giving me the same error, and I can't find where the mistake is. The grid is displayed but no records are found. The console throws the error:

Uncaught TypeError: Cannot create property '_rowIndex' on number '1'

. When I check the request http://localhost/index.php/admin/mui/index/render/key/[myKey]/?namespace=comment_listing&isAjax=true, it shows a bad formed json response:

{
"totalRecords":1,
"items":[
1,[{"comment_id":"26","product_id":"6","customer_id":"2","customer":"Pablo","comment":"test","created_at":"2017-06-12 12:44:54","updated_at":"2017-06-12 12:44:54"}]
]
}

The "1" in "items" is producing the error. I check the catalog response, and is not formed liked that, in "items" there are no numbers alone, just the records of the table. Any ideas? My listing is:

<!-- Data Config -->
<argument name="data" xsi:type="array">
 <item name="js_config" xsi:type="array">
 <item name="provider" xsi:type="string">comment_listing.comment_listing_data_source</item>
 <item name="deps" xsi:type="string">comment_listing.comment_listing_data_source</item>
 </item>
 <item name="spinner" xsi:type="string">comment_listing_columns</item>
</argument>
<!-- Data Source -->
<dataSource name="comment_listing_data_source">
 <argument name="dataProvider" xsi:type="configurableObject">
 <argument name="class" xsi:type="string">Summa\Comment\Ui\DataProvider\Comment\CommentDataProvider</argument>
 <argument name="name" xsi:type="string">comment_listing_data_source</argument>
 <argument name="primaryFieldName" xsi:type="string">comment_id</argument>
 <argument name="requestFieldName" xsi:type="string">comment_id</argument>
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="update_url" xsi:type="url" path="mui/index/render"/>
 </item>
 </argument>
 </argument>
 <argument name="data" xsi:type="array">
 <item name="js_config" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
 </item>
 </argument>
</dataSource>
<!-- Columns -->
<columns name="comment_listing_columns">
 <selectionsColumn name="ids">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="indexField" xsi:type="string">comment_id</item>
 </item>
 </argument>
 </selectionsColumn>
 <column name="customer">
 <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">Customer</item>
 </item>
 </argument>
 </column>
 <column name="comment">
 <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">Comment</item>
 </item>
 </argument>
 </column>
</columns>

Answer 1

The problem seems to be in your dataprovider in file Summa\Comment\Ui\DataProvider\Comment\CommentDataProvider

You can refer method in product dataprovider.

public function getData()
{
 if (!$this->getCollection()->isLoaded()) {
 $this->getCollection()->load();
 }
 $items = $this->getCollection()->toArray();
 return [
 'totalRecords' => $this->getCollection()->getSize(),
 'items' => array_values($items),
 ];
}

• Pablo H: I have the exactly same method in my CommentDataProvider, since I copy from product dataprovider, so I don't think that's the problem.
• Priyank: add your data provider code
• Pablo H: nevermind, i fixed it (thanks to you). I debugged that function and discovered that the problem was array_values. I don't know why, but $items was including 'totalRecords' and 'items', so I change array_values($items) to $items['items'] and it worked. Thanks!

Answer 2

Define your DataProvider as virtual type

<!-- This is required to use default data_provider in listing. -->
<!-- This Virtual Type MUST be declared in etc/di.xml but not in etc/adminhtml/di.xml -->
<virtualType name="VendorCollection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
 <arguments>
 <argument name="mainTable" xsi:type="string">mytable_vendor</argument>
 <argument name="resourceModel" xsi:type="string">CustomVendor\Vendors\Model\ResourceModel\Vendor</argument>
 </arguments>
</virtualType>
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
 <arguments>
 <argument name="collections" xsi:type="array">
 <item name="vendors_listing_data_source" xsi:type="string">VendorCollection</item>
 </argument>
 </arguments>
</type>

Use base data provider in your UI component (view/adminhtml/ui_component/vendors_listing.xml):

<dataSource name="vendors_listing_data_source" component="Magento_Ui/js/grid/provider">
 <settings>
 <storageConfig>
 <param name="indexField" xsi:type="string">vendor_id</param>
 </storageConfig>
 <updateUrl path="mui/index/render"/>
 </settings>
 <dataProvider class="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider" name="vendors_listing_data_source">
 <settings>
 <primaryFieldName>vendor_id</primaryFieldName>
 <requestFieldName>vendor_id</requestFieldName>
 </settings>
 </dataProvider>
</dataSource>