Magento 2 Admin Grid Component Not Sorting Correctly

adminhtmlgridmagento2uicomponent

I've configured a grid component in Magento — and the sorting behavior seems broken. Where can I debug this on the javascript level, and/or does anyone else have any idea why this might be happening?

If I sort the grid once, an ajax request is made, and everything sorts correctly.

However, the second sort, without an ajax request, renders the grid with all the same IDs.

The behavior is not repeated on Magento core grids, so I'm pretty sure this is something I'm doing. I just don't know the ui component system well enough to know where to start debugging this.

Best Answer

Alright, I can't pretend to understand why yet, but the problem was the data argument of my dataProvider argument.

<!-- ... -->
<argument name="dataProvider" xsi:type="configurableObject">
    <!-- ... --->
    <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>
<!-- ... -->

When I compared this to a few of the core grids, the data argument was missing a storageConfig node, with an indexField sub-node with the primary key of my model.

<argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="update_url" xsi:type="url" path="mui/index/render"/>
        <item name="storageConfig" xsi:type="array">
            <item name="indexField" xsi:type="string">pulsestorm_commercebug_log_id</item>
        </item>                    

    </item>                          
</argument>

When I added these nodes, sorting functionality was restored.

Related Solutions

Magento 2 – Why UI Listing Component Needs Two Collections

Here is a quick answer to your first question:

The configuration for virtual type isn't required. If you look into Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider you'll find that none of those two arguments are used ("collection" as well as "filterPool").

We'll remove this unused configuration as soon as we can. So, result declaration of data providers virtual types should be as simple as this:

for CMS Pages:

<virtualType name="PageGridDataProvider" type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider"/>

and for CMS Blocks

<virtualType name="PageGridDataProvider" type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider"/>

And as now you can see, in UI Components configuration files you are not enforced to use data provider virtual type and you can refer to generic data provider Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider. We've decided to use virtual type, just to provide yet another extension point for developers.

Magento2 – How to Extend a Default UI Component in Adminhtml

You are missing this._super(); from your initialize function. This calls the parent's function of the same name, so I believe it will run the initialize function of the UI Component. Without this your script will never initialise.

Example:

initialize: function () {
    this._super();
    debugger;
    return this;
}

See the M2 repo for examples of this.

Best Answer

Related Solutions

Magento 2 – Why UI Listing Component Needs Two Collections

Magento2 – How to Extend a Default UI Component in Adminhtml

Related Topic