6

I want to move edit action column beside customer name programmatically in customer grid like this:

enter image description here

how to do it from custom module?

i've tried this, but still not working

app/code/Namespace/Module/view/adminhtml/ui_component/customer_listing.xml

<?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">
    <columns name="customer_columns">
        <actionsColumn name="actions">
          <argument name="data" xsi:type="array">
              <item name="config" xsi:type="array">
                  <item name="sortOrder" xsi:type="number">3</item>
              </item>
          </argument>
        </actionsColumn>
    </columns>
</listing>

and i change the content with this, but still not working

<?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"> 
    <columns name="customer_columns"> 
        <actionsColumn name="actions" class="Magento\Customer\Ui\Component\Listing\Column\Actions" sortOrder="2">
            <settings>
                <indexField>entity_id</indexField>
            </settings>
        </actionsColumn>
    </columns>
</listing>

i already delete the customer_listing in ui_bookmark table, clean+flush cache, run setup:upgrade & di:compile, but still not working

5

2 Answers 2

3

It doesn't look like sortOrder option is applicable to the Action column.

The Action column uses ActionsColumn ui component that has a configuration option called draggable, which is defaulted to false. You can extend its js script app/code/Magento/Ui/view/base/web/js/grid/columns/actions.js and set draggable to true. This will enable the column to be dragged to any position you want. More info can be found in devDocs

In your case, first create a requirejs-config.js under app/code/Namespace/Module/view/adminhtml/ with the below code:

var config = {
    map: {
        '*': {
            'Magento_Ui/js/grid/columns/actions': 'Namespace_Module/js/actions',
            uiGridColumnsActions: 'Magento_Ui/js/grid/columns/actions'
        }
    }
};

Then create a custom js file actions.js under app/code/Namespace/Module/view/adminhtml/web/js/ with the below code to set draggable to true:

define([
    "jquery",
    'uiGridColumnsActions'
], function($, actions){
    'use strict';

    //make it draggable on customer listing page only
    if($( 'body' ).hasClass( 'customer-index-index' )){
        return actions.extend({
            defaults: {
                draggable: true
            }
        });
    }else{
        return actions;
    }
});

Clear static files and cache afterwards.

3
  • how to do it from custom module and only set true for customer_listing grid ? Commented Jun 29, 2018 at 7:29
  • answer updated with sample code. Commented Jul 2, 2018 at 3:21
  • Work perfectly in 2.3.3 Thanks!
    – wjp_bill
    Commented Apr 4, 2020 at 17:03
-1

very easy, in the function _prepareColumns of the grid. Move the code that add "Action" column beside the code that add "Name" column Example:

$this->addColumn(
            'Name',
            [
                'header' => __('Name'),
                'index' => 'name'
            ]
        );

  $this->addColumn(
            'edit',
           [
            'header' => __('Edit'),
            'type' => 'action'
            ..............
           ]
        );
2
  • i believe this is for Magento 1, because Magento 2 customer grid is using xml layout Commented Jun 28, 2018 at 3:27
  • @TinyDancer Magento 2 is available this action, when you add grid using Block Template extend Widget\Grid\Extended
    – HoangHieu
    Commented Sep 13, 2018 at 10:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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