change row text/background color in gridpanel

[Kurt Schrauwen]

Hai,

I'm trying to change the row text/background color in a gridpanel
depending on the value in a field of the row.

Is there someone who can point me in the right direction or has some example of this ?

thanks,
Kurt

[twosouth]

Hi Kurt,

Suppose you have a grid like so...

var  searchGrid = new Ext.grid.GridPanel({
        store: searchStore,
        view: new Ext.grid.GridView({
            emptyText: 'No results to display.',
            getRowClass: function(row, index) {
               
                    return 'yourCssClassName';
               
            }
        }),

so as searchGrid is loaded, the getRowClass() method gets called for each row, giving you a chance to examine the row being loaded.
You can then, based on your logic, return a specific css class name that Ext will apply to the grid row.

In the above example, the code assumes that each row is to have 'yourCssClassName' applied to it - again you can condition that by examining the contents of the row object.

Here is a 'yourCssClassName' style sheet that would color each row red.

 
<style type="text/css">
      .yourCssClassName{ background-color: #CC6666}
</style>

Hope that helps.
Scott

[twosouth]

oops, meant to include some conditional logic for applying the style

so in the getRowClass...

            getRowClass: function(row, index) {
                if (row.data.someField>5) {
                    return 'yourCssClassName';
                }
            }

[Kurt Schrauwen]

Hai twosouth,

Thanks for the info.

I did what you sugested but I can't get it to work.
If I debug it with firefox he gets to the 'getRowClass' function but he does not go into it. He jumps over it.

What can there be wrong ?

var customGridView = new Ext.grid.GridView({ 
		//forceFit: true,
		emptyText: 'No results to display.',
		getRowClass: function(record, rowIndex, rp, ds) {
			if (record.data.actief == 'N') {
				return 'red-row';
			}
		}
		
	});

var clublijstEditorGrid = new Ext.grid.GridPanel({
		region: 'center',
		id: 'clublijstEditorGrid',
		frame:true,
		header: true,
		iconCls: 'global_grid',
		title: 'Clubs',
		store: ds_clubslist,
		view:customGridView,
		cm: clubslistColumnModel,
		enableColumnMove: true,
		stripeRows: true,
		clicksToEdit:2,
		trackMouseOver: true,
		columnLines: true,
		selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
		plugins:[rowExpander,gridActions],
		tbar: [	{
					text: 'Add Club',
					tooltip: 'Add a new Club',
					iconCls:'global_add',
					handler: addClub
				}
			],
		bbar: new Ext.PagingToolbar({
			pageSize: 50,
			store: ds_clubslist,
			displayInfo:true,
			displayMsg:"Displaying record(s) {0} - {1} of {2}  ",
			emptyMsg: "No records to display",
			plugins: [new Ext.ux.PageSizePlugin({editable:false, forceSelection:true})]
		})
	});

Thanks,
Kurt

[twosouth]

Hi Kurt,

A few questions...

Can you show me the css style that you are using for 'red-row'?

Verify that the style is either inside of <style></style> tags in your html, or in an actual css file that is visible to your js.

When your grid is empty,
is the GridView emptText: 'No results to display' being displayed?
If so, then we know your GridView is working.

Next then, if you set a break point here :
---> if (record.data.actief == 'N') within the getRowClass method
your js should stop at that stm for every record that is loaded into the grid.
Can you verify that that is actually happening?

var customGridView = new Ext.grid.GridView({ 
		//forceFit: true,
		emptyText: 'No results to display.',
		getRowClass: function(record, rowIndex, rp, ds) {
			if (record.data.actief == 'N') {
				return 'red-row';
			}
		}
		
	});

Let me know what you find.

Scott

[Kurt Schrauwen]

Hai Scott,

This is a part of my css file :

/* VVS */

.red-row{ background-color: #F5C0C0 !important; } 
.yellow-row{ background-color: #FBF8BF !important; } 
.green-row{ background-color: #99CC99 !important; }

This file is visible for my js file.

When my grid is empty the 'emptText' is not displayed

when I debug I dodn't get to the part where you sugested to put the breakpoint. It looks like I don't go into the 'getRowClass'


Kurt

[twosouth]

As an experiment,

add the following property to your gridview:

deferEmptyText: true

Also, lets temporarily remove the condition for the style and add an alert.

So for this test, the code should look like this:

var customGridView = new Ext.grid.GridView({ 
		//forceFit: true,
		emptyText: 'No results to display.',
                deferEmptyText: true
		getRowClass: function(record, rowIndex, rp, ds) {
		//	if (record.data.actief == 'N') {
                                Ext.Msg.alert('here now!');
				return 'red-row';
		//	}
		}
		
	});

Finally, make sure that the customGridView object is built prior to the grid definition. with FF debug, hover over the grid definition at this statement...

var clublijstEditorGrid = new Ext.grid.GridPanel({
...
view:customGridView,   <--- Needs to be loaded by now at runtime.
...

customGridView object should be built and you should be able to stop ff while the grid is building and see the properties in this object.

So the goal of these tests are:
1. Verify that the gridView object is already properly built when the Grid is being built.
2. If number 1 is true, the alert (shown above) should fire and a msg box should pop for every record loaded into the grid because we have commented out the conditional control of the css class.

Lets see what you get now.

Scott

[Kurt Schrauwen]

Hai Scott,

I changed the code as you asked.
The customGridView is built just before the GridPanel
When I'm in ff I can see at 'view:customGridView' that the customGridView is loaded

But I don't get to see the alert


Kurt

[twosouth]

Hmm, generally, this is a super simple thing to achieve so I think, as another experiment, we should consider the possibility that there is a conflict between one of the config options on your grid and the gridView object.

So, if this was my code, I would remove many of the grid config settings to determine if there is a conflict.

For the sake of experimentation, I would comment out most of the settings (except of course the gridview object.)

comment out everything except the absolutely essential elements needed to display the grid. Below, I have placed an asterisk next to all the things that you should be able to safely comment out and still render the grid. Somethings are obviously unrelated so you can leave those (region, id, etc.)

If the grid is still able to render and the gridView.getRowClass begins to function (and the alert is fired), start putting the config options back one by one until you find the conflicting option. Assuming there is a conflict, once you determine which config option is the offending setting, you can make a decision as to how you should handle that functionality.

var clublijstEditorGrid = new Ext.grid.GridPanel({
		region: 'center',
		id: 'clublijstEditorGrid',
	*	frame:true,
	*	header: true,
		iconCls: 'global_grid',
		title: 'Clubs',
		store: ds_clubslist,
		view:customGridView,
		cm: clubslistColumnModel,
	*	enableColumnMove: true,
	 	stripeRows: true,
	*	clicksToEdit:2,
	*	trackMouseOver: true,
	*	columnLines: true,
	*	selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
	*	plugins:[rowExpander,gridActions],
	 	tbar: [	{
					text: 'Add Club',
					tooltip: 'Add a new Club',
					iconCls:'global_add',
					handler: addClub
				}
			],
		bbar: new Ext.PagingToolbar({
			pageSize: 50,
			store: ds_clubslist,
			displayInfo:true,
			displayMsg:"Displaying record(s) {0} - {1} of {2}  ",
			emptyMsg: "No records to display",
			plugins: [new Ext.ux.PageSizePlugin({editable:false, forceSelection:true})]
		})
	});

Give that a shot and let me know what happens. If this doesn't help, maybe you can post the entire js.

Scott

[Kurt Schrauwen]

Hai Scott,

My problem was indeed one of the grids settings.
The rowExpander plugin is causing this problem.

Thanks for al the help !

Greetings,
Kurt

[twosouth]

Hi Kurt,

Great. The RowExpander plugin has a getRowClass method too. I missed that in my review of your code.

If you're willing, you can create a copy of the RowExpander and customize it to return a class name that controls color, and have, if effect, a RowExpander that controls color too.

Thanks,
Scott