5

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

1

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.

  • how to do it from custom module and only set true for customer_listing grid ? – Tiny Dancer Jun 29 '18 at 7:29
  • answer updated with sample code. – subroutines Jul 2 '18 at 3:21
-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'
            ..............
           ]
        );
  • i believe this is for Magento 1, because Magento 2 customer grid is using xml layout – Tiny Dancer Jun 28 '18 at 3:27
  • @TinyDancer Magento 2 is available this action, when you add grid using Block Template extend Widget\Grid\Extended – HoangHieu Sep 13 '18 at 10:41

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.