Change Sort Order of Edit Action Customer Grid Column
-
16-01-2021 - |
Question
I want to move edit action column beside customer name programmatically in customer grid like this:
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
Solution
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.
OTHER TIPS
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'
..............
]
);