Magento 2 – How to Override Adminhtml JS Components

adminhtmlmagento2magento2.2overridesrequirejs

Basically I want to override grid.js component file in Magento 2
Require config

view/adminhtml/require-config.js

Require config code.

var config = {
    map: {
        '*': {
            customScript:'Acx_Grid/js/custom'
        }
    }
};

I want to know process how to override J's component in backend.

Best Answer

You can change grid.js in 2 ways:

  1. Override via requirejs-config.js :

    • It will replace the grid.js file in whole Magento.

    • Create a file at MyVendor/MyModule/view/adminhtml/requirejs-config.js with the following content: 

    
var config = {
    map: {
        "*": {
            "mage/adminhtml/grid": "MyVendor_MyModule/js/grid"
        }
    }
}

  2. For a specific grid only, you can change the phtml file which call the grid js.

    • Override the phtml in your Grid block as below. 
      
class Grid extends \Magento\Backend\Block\Widget\Grid\Extended
{
    protected $_template = 'MyVendor_MyModule::widget/grid/extended.phtml';
}
    • Copy the phtml file from the core form vendor/magento/module-backend/view/adminhtml/templates/widget/grid/extended.phtml into your own module at MyVendor/MyModule/view/adminhtml/template/widget/grid/extended.phtml.
    • Replace line 256 with your own js deps.push('mage/adminhtml/grid'); to deps.push('MyVendor_MyModule/js/grid');
Related Topic