0

I have created a ui component grid .

How to sorting the admin grid

<?xml version="1.0"?>
<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">xx_stockmovements_stock_movements.xx_stockmovements_stock_movements_data_source</item>
            <item name="deps" xsi:type="string">xx_stockmovements_stock_movements.xx_stockmovements_stock_movements_data_source</item>
        </item>
        <item name="spinner" xsi:type="string">xx_stockmovements_stock_columns</item>        
    </argument>
    <dataSource name="xx_stockmovements_stock_movements_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">XxStockMovementsGridDataProvider</argument>
            <argument name="name" xsi:type="string">xx_stockmovements_stock_movements_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 name="storageConfig" xsi:type="array">
                        <item name="indexField" xsi:type="string">id</item>
                    </item>
                </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>
        <bookmark name="bookmarks">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="storageConfig" xsi:type="array">
                        <item name="namespace" xsi:type="string">xx_stockmovements_stock_movements</item>
                    </item>
                </item>
            </argument>
        </bookmark>
        <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">xx_stockmovements_stock_movements.xx_stockmovements_stock_movements.xx_stockmovements_stock_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>
        <exportButton name="export_button">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="selectProvider" xsi:type="string">xx_stockmovements_stock_movements.xx_stockmovements_stock_movements.xx_stockmovements_stock_movements.ids</item>
                </item>
            </argument>
        </exportButton>        
        <filters name="listing_filters">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="columnsProvider" xsi:type="string">xx_stockmovements_stock_movements.xx_stockmovements_stock_movements.xx_stockmovements_stock_columns</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">xx_stockmovements_stock_movements.xx_stockmovements_stock_movements.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">xx_stockmovements_stock_movements.xx_stockmovements_stock_movements.listing_top.listing_filters</item>
                        <item name="imports" xsi:type="array">
                            <item name="visible" xsi:type="string">xx_stockmovements_stock_movements.xx_stockmovements_stock_movements.xx_stockmovements_stock_columns.${ $.index }:visible</item>
                        </item>
                    </item>
                </item>
                <item name="observers" xsi:type="array">
                    <item name="column" xsi:type="string">column</item>
                </item>
            </argument>
        </filters>       
        <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">xx_stockmovements_stock_movements.xx_stockmovements_stock_movements.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.paging</item>
                    </item>
                    <item name="selectProvider" xsi:type="string">xx_stockmovements_stock_movements.xx_stockmovements_stock_movements.xx_stockmovements_stock_columns.ids</item>
                </item>
            </argument>
        </paging>
    </container>
    <columns name="xx_stockmovements_stock_columns">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">xx_stockmovements_stock_movements.xx_stockmovements_stock_movements.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current</item>
                </item>               
                <item name="childDefaults" xsi:type="array">
                    <item name="fieldAction" xsi:type="array">
                        <item name="provider" xsi:type="string">xx_stockmovements_stock_movements.xx_stockmovements_stock_movements.xx_stockmovements_stock_columns_editor</item>
                        <item name="target" xsi:type="string">startEdit</item>
                        <item name="params" xsi:type="array">
                            <item name="0" xsi:type="string">${ $.$data.rowIndex }</item>
                            <item name="1" xsi:type="boolean">true</item>
                        </item>
                    </item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">xx_stockmovements_stock_movements.xx_stockmovements_stock_movements.listing_top.bookmarks</item>
                        <item name="root" xsi:type="string">columns.${ $.index }</item>
                        <item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item>
                    </item>
                </item>
            </item>
        </argument>
         <column name="product_sku" class="Xx\StockMovements\Ui\Component\Listing\Columns\Product">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
                    <item name="filter" xsi:type="string">text</item>                   
                    <item name="label" xsi:type="string" translate="true">Sku</item>
                    <item name="sorting" xsi:type="string">desc</item>
                    <!--<item name="sortable" xsi:type="boolean">true</item>-->
                </item>
            </argument>
        </column>       
        <column name="qty">
            <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">Qty</item>
                    <item name="sortable" xsi:type="string">asc</item>
                </item>
            </argument>
        </column>
        <column name="movement">
            <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">Movement</item>
                    <item name="sortable" xsi:type="boolean">false</item>
                </item>
            </argument>
        </column>  
        <column name="is_in_stock">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Xx\StockMovements\Model\Column\InStock</item>
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">select</item>
                    <item name="label" translate="true" xsi:type="string">In Stock</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                    <item name="dataType" xsi:type="string">select</item> 
                    <item name="sortable" xsi:type="string">asc</item>          
                </item>
            </argument>
        </column>        
        <column name="message">
            <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">Message</item>
                    <item name="sortable" xsi:type="string">asc</item>
                </item>
            </argument>
            <settings>
                <filter>textRange</filter>
                <label translate="true">Message</label>
                <sorting>asc</sorting>
            </settings>
        </column>

        <column name="user">
            <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">User</item>
                    <item name="sortable" xsi:type="string">asc</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 At</item>
                    <item name="sortable" xsi:type="string">asc</item>
                </item>
            </argument>
        </column>   
    </columns>
</listing>

I also trying

<item name="sorting" xsi:type="string">desc</item>
<item name="sortable" xsi:type="boolean">true</item>

But its not working

  • Can you please upload your xml code of ui grid? – Rohan Hapani Mar 28 '18 at 12:59
0

Have You tried Like below code in Ui_component form file

<item name="sortOrder" xsi:type="number">10</item>
0

Try to apply this format in your file:

<column name="product_sku" class="Xx\StockMovements\Ui\Component\Listing\Columns\Product">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
                <item name="filter" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Sku</item>
                <item name="sorting" xsi:type="string">desc</item>
            </item>
        </argument>
    </column>

And remove generated folder.

  • updated my post – Mano M Mar 28 '18 at 13:05
  • Check updated answer – Rohan Hapani Mar 28 '18 at 13:13
  • There are something going wrong in your code format. Some tags not proper ending. Upload your code in html formatter. You can find there are so many tags not proper ending. – Rohan Hapani Mar 28 '18 at 13:16
  • Ok I will update it – Mano M Mar 28 '18 at 13:18
  • Updated my post – Mano M Mar 28 '18 at 13:22

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.