Magento 2.2 – How to Sort Grid Column

gridmagento2.2php-7

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

Best Answer

I had exactly the same problem.

You first have to do your columns like this:

<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 name="sortOrder" xsi:type="number">1</item>
        </item>
    </argument>
</column>

Thereafter you need to go to your database table. search for table:

ui_bookmark

Search for the row that relates to your grid i.e:

product_attributes_listing

Delete the row and then:

php bin/magento cache:clean
php bin/magento cache:flush

Related Solutions

Magento 1.6.2.0 – Display New Column in Customer Grid When Sorting

Here is the solution of my problem : I was extending the wrong class. Instead of Mage_Adminhtml_Block_Customer_Grid, I extend now Mage_Adminhtml_Block_Widget_Grid. The problem here is I need to add all the functions in Mage_Adminhtml_Block_Customer_Grid in my rewritten class.

Please note that this is the same class as Mage_Adminhtml_Block_Customer_Grid, but with only 2 modifications :

addAttributeToSelect in _prepareCollection() function
addColumn in _prepareColumns() function

Like this :

class Mycompany_Mymodule_Block_Adminhtml_Customer_Grid extends Mage_Adminhtml_Block_Widget_Grid
{
public function __construct()
{
    parent::__construct();
    $this->setId('customerGrid');
    $this->setUseAjax(true);
    $this->setDefaultSort('entity_id');
    $this->setSaveParametersInSession(true);
}

protected function _prepareCollection()
{
    $collection = Mage::getResourceModel('customer/customer_collection')
        ->addNameToSelect()
        ->addAttributeToSelect('email')
        ->addAttributeToSelect('created_at')
        ->addAttributeToSelect('group_id')
        ->addAttributeToSelect('company_name')
        ->joinAttribute('billing_postcode', 'customer_address/postcode', 'default_billing', null, 'left')
        ->joinAttribute('billing_city', 'customer_address/city', 'default_billing', null, 'left')
        ->joinAttribute('billing_telephone', 'customer_address/telephone', 'default_billing', null, 'left')
        ->joinAttribute('billing_region', 'customer_address/region', 'default_billing', null, 'left')
        ->joinAttribute('billing_country_id', 'customer_address/country_id', 'default_billing', null, 'left');

    $this->setCollection($collection);

    return parent::_prepareCollection();
}

protected function _prepareColumns()
{
    $this->addColumn('entity_id', array(
        'header'    => Mage::helper('customer')->__('ID'),
        'width'     => '50px',
        'index'     => 'entity_id',
        'type'  => 'number',
    ));
    /*$this->addColumn('firstname', array(
        'header'    => Mage::helper('customer')->__('First Name'),
        'index'     => 'firstname'
    ));
    $this->addColumn('lastname', array(
        'header'    => Mage::helper('customer')->__('Last Name'),
        'index'     => 'lastname'
    ));*/
    $this->addColumn('name', array(
        'header'    => Mage::helper('customer')->__('Name'),
        'index'     => 'name'
    ));
    $this->addColumn('email', array(
        'header'    => Mage::helper('customer')->__('Email'),
        'width'     => '150',
        'index'     => 'email'
    ));

    $this->addColumn('company_name', array(
        'header' => 'Company Name',
        'type' => 'text',
        'index' => 'company_name',
    ));

    $groups = Mage::getResourceModel('customer/group_collection')
        ->addFieldToFilter('customer_group_id', array('gt'=> 0))
        ->load()
        ->toOptionHash();

    $this->addColumn('group', array(
        'header'    =>  Mage::helper('customer')->__('Group'),
        'width'     =>  '100',
        'index'     =>  'group_id',
        'type'      =>  'options',
        'options'   =>  $groups,
    ));

    $this->addColumn('Telephone', array(
        'header'    => Mage::helper('customer')->__('Telephone'),
        'width'     => '100',
        'index'     => 'billing_telephone'
    ));

    $this->addColumn('billing_postcode', array(
        'header'    => Mage::helper('customer')->__('ZIP'),
        'width'     => '90',
        'index'     => 'billing_postcode',
    ));

    $this->addColumn('billing_country_id', array(
        'header'    => Mage::helper('customer')->__('Country'),
        'width'     => '100',
        'type'      => 'country',
        'index'     => 'billing_country_id',
    ));

    $this->addColumn('billing_region', array(
        'header'    => Mage::helper('customer')->__('State/Province'),
        'width'     => '100',
        'index'     => 'billing_region',
    ));

    $this->addColumn('customer_since', array(
        'header'    => Mage::helper('customer')->__('Customer Since'),
        'type'      => 'datetime',
        'align'     => 'center',
        'index'     => 'created_at',
        'gmtoffset' => true
    ));

    if (!Mage::app()->isSingleStoreMode()) {
        $this->addColumn('website_id', array(
            'header'    => Mage::helper('customer')->__('Website'),
            'align'     => 'center',
            'width'     => '80px',
            'type'      => 'options',
            'options'   => Mage::getSingleton('adminhtml/system_store')->getWebsiteOptionHash(true),
            'index'     => 'website_id',
        ));
    }

    $this->addColumn('action',
        array(
            'header'    =>  Mage::helper('customer')->__('Action'),
            'width'     => '100',
            'type'      => 'action',
            'getter'    => 'getId',
            'actions'   => array(
                array(
                    'caption'   => Mage::helper('customer')->__('Edit'),
                    'url'       => array('base'=> '*/*/edit'),
                    'field'     => 'id'
                )
            ),
            'filter'    => false,
            'sortable'  => false,
            'index'     => 'stores',
            'is_system' => true,
    ));

    $this->addExportType('*/*/exportCsv', Mage::helper('customer')->__('CSV'));
    $this->addExportType('*/*/exportXml', Mage::helper('customer')->__('Excel XML'));
    return parent::_prepareColumns();
}

protected function _prepareMassaction()
{
    $this->setMassactionIdField('entity_id');
    $this->getMassactionBlock()->setFormFieldName('customer');

    $this->getMassactionBlock()->addItem('delete', array(
         'label'    => Mage::helper('customer')->__('Delete'),
         'url'      => $this->getUrl('*/*/massDelete'),
         'confirm'  => Mage::helper('customer')->__('Are you sure?')
    ));

    $this->getMassactionBlock()->addItem('newsletter_subscribe', array(
         'label'    => Mage::helper('customer')->__('Subscribe to Newsletter'),
         'url'      => $this->getUrl('*/*/massSubscribe')
    ));

    $this->getMassactionBlock()->addItem('newsletter_unsubscribe', array(
         'label'    => Mage::helper('customer')->__('Unsubscribe from Newsletter'),
         'url'      => $this->getUrl('*/*/massUnsubscribe')
    ));

    $groups = $this->helper('customer')->getGroups()->toOptionArray();

    array_unshift($groups, array('label'=> '', 'value'=> ''));
    $this->getMassactionBlock()->addItem('assign_group', array(
         'label'        => Mage::helper('customer')->__('Assign a Customer Group'),
         'url'          => $this->getUrl('*/*/massAssignGroup'),
         'additional'   => array(
            'visibility'    => array(
                 'name'     => 'group',
                 'type'     => 'select',
                 'class'    => 'required-entry',
                 'label'    => Mage::helper('customer')->__('Group'),
                 'values'   => $groups
             )
        )
    ));

    return $this;
}

public function getGridUrl()
{
    return $this->getUrl('*/*/grid', array('_current'=> true));
}

public function getRowUrl($row)
{
    return $this->getUrl('*/*/edit', array('id'=>$row->getId()));
}
}

Cannot Sort Joined Column in Magento Grid

I have founded the answered after a few days. The solution for this kind of problem is added this function to grid: (overwrite _setCollectionOrder in parent grid class).

protected function _setCollectionOrder($column)
  {
    $collection = $this->getCollection();
    if ($collection) {
      $columnIndex = $column->getFilterIndex() ? $column->getFilterIndex() : $column->getIndex();
      if($columnIndex == 'pages_with_number_of_views.order_count')
      {
        $columnIndex = 'order_count';
        $collection->getSelect()->order($columnIndex.' '.strtoupper($column->getDir()));
      }
      if($columnIndex == 'total_sales'){
        $collection->getSelect()->order($columnIndex.' '.strtoupper($column->getDir()));
      }
      else{
        $collection->setOrder($columnIndex, strtoupper($column->getDir()));
      }
    }
    return $this;
  }

Best Answer

Related Solutions

Magento 1.6.2.0 – Display New Column in Customer Grid When Sorting

Cannot Sort Joined Column in Magento Grid

Related Topic