0

I have created a custom module to display the grid in the admin section. The grid appears including the contents of it, but the grid shows a loading icon and the grid can't be clicked.

I tried comparing my ui_component files and my di.xml to other code that have I found, but it still doesn't fix the issue.

enter image description here

Here is my di.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<virtualType name="GalleryGridFilterPool" type="Magento\Framework\View\Element\UiComponent\DataProvider\FilterPool">
    <arguments>
        <argument name="appliers" xsi:type="array">
            <item name="regular" xsi:type="object">Magento\Framework\View\Element\UiComponent\DataProvider\RegularFilter</item>
            <item name="fulltext" xsi:type="object">Magento\Framework\View\Element\UiComponent\DataProvider\FulltextFilter</item>
        </argument>
    </arguments>
</virtualType>
<virtualType name="GalleryGridDataProvider" type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
    <arguments>
        <argument name="collection" xsi:type="object" shared="false">Vendor\ExtendedGallery\Model\ResourceModel\ExtendedBanner\Collection</argument>
        <argument name="filterPool" xsi:type="object" shared="false">GalleryGridFilterPool</argument>
    </arguments>
</virtualType>

<virtualType name="Vendor\ExtendedGallery\Model\ResourceModel\ExtendedBanner\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
    <arguments>
        <argument name="mainTable" xsi:type="string">lof_gallery_banner</argument>
        <argument name="resourceModel" xsi:type="string">Vendor\ExtendedGallery\Model\ResourceModel\ExtendedBanner</argument>
    </arguments>
</virtualType>

<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <!--data provider name which used in grid ui component file -->
            <item name="bagallery_banner_listing_data_source" xsi:type="string">Vendor\Module\Model\ResourceModel\ExtendedBanner\Collection</item>
        </argument>
    </arguments>
</type>

And here is my ui_component XML file:

<?xml version="1.0" encoding="UTF-8"?>
<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">bagallery_banner_listing.bagallery_banner_listing_data_source</item>
        <item name="deps" xsi:type="string">bagallery_banner_listing.bagallery_banner_listing_data_source</item>
    </item>
    <item name="spinner" xsi:type="string">bagallery_banner_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 Banner</item>
            <item name="class" xsi:type="string">primary</item>
            <item name="url" xsi:type="string">*/*/addrow</item>
        </item>
    </item>
</argument>

<dataSource name="bagallery_banner_listing_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">GalleryGridDataProvider</argument>
        <!-- here we pass dataprovider name which i will define in di.xml file of module in next step -->
        <argument name="name" xsi:type="string">bagallery_banner_listing_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">id</argument>
        <argument name="requestFieldName" xsi:type="string">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>

<container name="listing_top">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="template" xsi:type="string">ui/grid/toolbar</item>
            <item name="stickyTmpl" xsi:type="string">ui/grid/sticky/toolbar</item>
        </item>
    </argument>
    <component name="columns_controls">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="columnsData" xsi:type="array">
                    <item name="provider" xsi:type="string">bagallery_banner_listing.bagallery_banner_listing.vendor_extendedgallery_grid_columns</item>
                </item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item>
                <item name="displayArea" xsi:type="string">dataGridActions</item>
            </item>
        </argument>
    </component>
    <filters name="listing_filters">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="columnsProvider" xsi:type="string">bagallery_banner_listing.bagallery_banner_listing.vendor_extendedgallery_grid_columns</item>
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">bagallery_banner_listing.bagallery_banner_listing.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current.filters</item>
                </item>
                <item name="templates" xsi:type="array">
                    <item name="filters" xsi:type="array">
                        <item name="select" xsi:type="array">
                            <item name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</item>
                            <item name="template" xsi:type="string">ui/grid/filters/elements/ui-select</item>
                        </item>
                    </item>
                </item>
                <item name="childDefaults" xsi:type="array">
                    <item name="provider" xsi:type="string">bagallery_banner_listing.bagallery_banner_listing.listing_top.listing_filters</item>
                    <item name="imports" xsi:type="array">
                        <item name="visible" xsi:type="string">bagallery_banner_listing.bagallery_banner_listing.vendor_extendedgallery_grid_columns.${ $.index }:visible</item>
                    </item>
                </item>
            </item>
            <item name="observers" xsi:type="array">
                <item name="column" xsi:type="string">column</item>
            </item>
        </argument>
    </filters>
    <massaction name="listing_massaction">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="selectProvider" xsi:type="string">bagallery_banner_listing.bagallery_banner_listing.vendor_extendedgallery_grid_columns.ids</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item>
                <item name="indexField" xsi:type="string">id</item>
            </item>
        </argument>
        <!-- Mass actions which you want to add in your grid-->
        <action name="delete">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="type" xsi:type="string">delete</item>
                    <item name="label" xsi:type="string" translate="true">Delete</item>
                    <item name="url" xsi:type="url" path="grid/grid/massdelete"/>
                    <item name="confirm" xsi:type="array">
                        <item name="title" xsi:type="string" translate="true">Delete</item>
                        <item name="message" xsi:type="string" translate="true">Do you want to delete selected row record?</item>
                    </item>
                </item>
            </argument>
        </action>
    </massaction>
    <paging name="listing_paging">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">bagallery_banner_listing.bagallery_banner_listing.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current.paging</item>
                </item>
                <item name="selectProvider" xsi:type="string">bagallery_banner_listing.bagallery_banner_listing.vendor_extendedgallery_grid_columns.ids</item>
            </item>
        </argument>
    </paging>
</container>



</listing>
0

I'm fairly new to the ui_components so i might be wrong.

But as far as i see you need to add an .._.._index.xml where you have something like this :

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <uiComponent name="product_listing"/>
        </referenceContainer>
    </body>
</page>

(this is an example from the product_listing of Magento 2)

and also the ui_component xlm itself uses listingToolbar to have a toolbar instead of a container so i think

<container name="listing_top">

needs to be something like this :

<listingToolbar name="listing_top">

for a good reference you can take a look at magento/module-catalog/view/adminhtml/ui-component/product_listing.xml

  • regarding the first suggestion that you mentioned. I already have that ..xml file. I just forgot to include it here. Sorry for that. Regarding your second thoughts, i'll try to do it. Thank you so much. – markaugustine Nov 7 '17 at 5:14
  • No problem , let me know if it works – CompactCode Nov 7 '17 at 5:31
  • I'm sorry, but changing the <container> to <listingToolbar> didn't work for me. – markaugustine Nov 7 '17 at 5:36
  • Well i'm afraid i'm currently learning to understand this myself so i won't be able to help you more then this. I know this solved it for me. Maybe you should take a look at the product_listing that i recommended and see what you do different – CompactCode Nov 7 '17 at 6:14
0

Your ui_component file is missing with some tags or elements There is no column tag for getting those data. And if there any column tag like

<columns name="index_columns">
        <settings>
            <editorConfig>
                <param name="clientConfig" xsi:type="array">
                    <item name="saveUrl" xsi:type="url" path="helloworld/index/inlineEdit"/>
                    <item name="validateBeforeSave" xsi:type="boolean">false</item>
                </param>
                <param name="indexField" xsi:type="string">post_id</param>
                <param name="enabled" xsi:type="boolean">true</param>
                <param name="selectProvider" xsi:type="string">helloworld_index_listing.helloworld_index_listing.index_columns.ids</param>
            </editorConfig> ....

in - the name matters to make the spinner understand that the data is loaded. Map it properly with other tag ie:

<item name="spinner" xsi:type="string">index_columns</item>

Then after clear the cache and check.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.