Adding custom js and css to Product grid in Magento 2

Question

Can we add custom JavaScript and CSS to the Product grid. I've created a product_listing.xml within my own module, and it's working, but can we add custom JS and CSS to product_listing.xml like we do for page layouts?

Here's my product_listing.xml located in MyCompany/MyModule/view/adminhtml/ui_component.

<?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">
 <listingToolbar name="listing_top">
 <massaction name="listing_massaction">
 <action name="upload">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="type" xsi:type="string">upload</item>
 <item name="label" xsi:type="string" translate="true">Upload</item>
 <item name="url" xsi:type="url" path="myroute/product/upload"/>
 </item>
 </argument>
 </action>
 <action name="check_import_status">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="type" xsi:type="string">check_import_status</item>
 <item name="label" xsi:type="string" translate="true">Check Source Document Status</item>
 <item name="url" xsi:type="url" path="myroute/product/updatesourcestatus"/>
 </item>
 </argument>
 </action>
 <action name="request_translations">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="type" xsi:type="string">request_translations</item>
 <item name="label" xsi:type="string" translate="true">Request Translations</item>
 <item name="url" xsi:type="url" path="myroute/product/requesttranslations"/>
 </item>
 </argument>
 </action>
 <action name="check_target_status">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="type" xsi:type="string">check_target_status</item>
 <item name="label" xsi:type="string" translate="true">Check Translations Status</item>
 <item name="url" xsi:type="url" path="myroute/product/updatetargetstatus"/>
 </item>
 </argument>
 </action>
 <action name="download_translations">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="type" xsi:type="string">download_translations</item>
 <item name="label" xsi:type="string" translate="true">Download Translations</item>
 <item name="url" xsi:type="url" path="myroute/product/downloadtranslations"/>
 </item>
 </argument>
 </action>
 <action name="disassociate_translations">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="type" xsi:type="string">disassociate_translations</item>
 <item name="label" xsi:type="string" translate="true">Disassociate Translations</item>
 <item name="url" xsi:type="url" path="myroute/product/disassociatetranslations"/>
 </item>
 </argument>
 </action>
 </massaction>
 </listingToolbar>
 <columns name="product_columns" class="Magento\Catalog\Ui\Component\Listing\Columns">
 <column name="source" class="MyCompany\MyModule\Ui\Component\Listing\Columns\SourceIcon">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="filter" xsi:type="string">text</item>
 <item name="component" xsi:type="string">MyCompany_MyModule/js/grid/columns/sourceicon</item>
 <item name="add_field" xsi:type="boolean">true</item>
 <item name="label" xsi:type="string" translate="true">Source</item>
 <item name="sortOrder" xsi:type="number">34</item>
 </item>
 </argument>
 </column>
 <column name="translations" class="MyCompany\MyModule\Ui\Component\Listing\Columns\TargetIcon">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="filter" xsi:type="string">text</item>
 <item name="component" xsi:type="string">MyCompany_MyModule/js/grid/columns/targeticon</item>
 <item name="add_field" xsi:type="boolean">true</item>
 <item name="label" xsi:type="string" translate="true">Translations</item>
 <item name="sortOrder" xsi:type="number">37</item>
 </item>
 </argument>
 </column>
 </columns>
 </listing>

• Mohammad Mujassam: What you want achieve ?
• Prince Patel: Did you get my answer?
• Joseph Hovik: Mohammad, I want to add js and css to a custom icon I've created in each product row.
• Joseph Hovik: Prince Patel, yes thank you for your answer. However I get this error when adding the code you cited at the top of my product_listing.xml file: Exception #0 (Exception): Warning: DOMDocument::loadXML(): Extra content at the end of the document in Entity, line: 6 in /home/username/web/magento2/vendor/magento/framework/View/Element/UiComponent/Config/DomMerger.php on line 324.
• Prince Patel: @JosephHovik. Check my updated answer.

Answer 1

You can add JS and CSS in layout .XML files. The layout file you added product_listing.xml. This is example: .../Namespace_ModuleName/view/adminhtml/layout/modulename_page_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <head> // add custom js and CSS in here
 <css src="css/filename.css"/>
 <script src="js/filename.js"/> 
 </head>
 <body>
 <referenceContainer name="content">
 <uiComponent name="product_listing"/>
 </referenceContainer>
 </body>
</page>

Answer 2

You can add using some XML tags like these below.

CSS:

code / vendorname / modulename / view / frontend(for admin adminhtml) / web /css / filename.css

JS:

code / vendorname / modulename / view / frontend(for admin adminhtml) / web /js / filename.js

XML:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <head>
 <css src="css/filename.css"/>
 <script src="js/filename.js"/> 
 </head>
</page>

• Joseph Hovik: Thanks Rafael again for your answer. I'm still trying to figure out the information you sent me about Magento 2 plugins. :)

Answer 3

You need to add "fieldClass" property to the column configuration:

<column name="column_name">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="fieldClass" xsi:type="string">your-css-class</item>
 </item>
 </argument>
</column>