Magento 2 Debug Ui Grid

Question

i create my custom UI Grid, then i have next problem, my grid is infinity load. enter image description here

Can someone recomend me, how can i debug my problem?

• Marius: maybe this helps: magento.stackexchange.com/questions/124817/…
• Petro Chaikivskyi: @Marius i think no.
• Aasim Goriya: Please add your ui component code and your di.xml code so I can check more in detail.

Answer 1

In this case problems usually in dataProvider. But it will be easier if you provide your entity_lisiting_grid.xml listing should like this :

<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">mageplaza_helloworld_post_listing.mageplaza_helloworld_post_listing_data_source</item>
 <item name="deps" xsi:type="string">mageplaza_helloworld_post_listing.mageplaza_helloworld_post_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 Post</item>
 <item name="class" xsi:type="string">primary</item>
 <item name="url" xsi:type="string">*/*/new</item>
 </item>
 </item>
</argument>
<dataSource name="nameOfDataSource">
 <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">mageplaza_helloworld_post_listing_data_source</argument>
 <argument name="primaryFieldName" xsi:type="string">post_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">post_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">post_id</item>
 </item>
 </argument>
 </selectionsColumn>
 <column name="post_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>
 <column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="filter" xsi:type="string">dateRange</item>
 <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
 <item name="dataType" xsi:type="string">date</item>
 <item name="label" xsi:type="string" translate="true">Created</item>
 </item>
 </argument>
 </column>
 <column name="updated_at" class="Magento\Ui\Component\Listing\Columns\Date">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="filter" xsi:type="string">dateRange</item>
 <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
 <item name="dataType" xsi:type="string">date</item>
 <item name="label" xsi:type="string" translate="true">Modified</item>
 </item>
 </argument>
 </column>
</columns>

check the example here https://www.mageplaza.com/magento-2-module-development/create-admin-grid-magento-2.html

• Petro Chaikivskyi: Can you give some right decision how DataProvider need to work(some example of DataProvider)