Question

Recently answered this question with a change to a core file:

Approach on changing row color on orders grid in admin

There is one file that needed updating to answer this question: js/mage/adminhtml/grid.js

What I would like to know is how to do this properly, i.e. without editing the core file.

Edit

This is what worked:

in app/design/adminhtml/default/default/layout/local.xml:

<?xml version="1.0"?>
<layout version="0.1.0">
  <default>
    <reference name="head">
        <action method="removeItem"><type>js</type><name>mage/adminhtml/grid.js</name></action>
        <action method="addItem"><type>js</type><name>colors/adminhtml/grid.js</name></action> 
    </reference>
  </default>
</layout>

Then I put a new directory + subdirectory and file in js/colors/adminhtml/grid.js

And many thanks to Alan for giving me the ‘courage’ to do it properly…

Answer 1

1. Add a Javascript Block to the Page, using events, the adminhtml application’s local.xml, or a custom module layout xml file

2. Add a Prototype dom:loaded event listener to the page

3. Using Prototype’s $$ method, search the dom for the order status HTML DOM nodes. If possible, use an ID in there to ensure you’re getting the right nodes.

4. Use Prototype’s addClassName method to add a css class to the nodes from #3.

5. Add a CSS file to the page, using events, the adminhtml application’s local.xml, or a custom module layout xml file. In this CSS file add style definitions to get the colors you want.