jQuery Grid Plugin - jqGridForum

Topic RSS

changing row color or font conditionally

18/12/2009
20:32

ihamouda

New Member

Members

Forum Posts: 2

Member Since:
18/12/2009

Offline

Hello

is there a way to change the background colour or the font-weight of a row conditionally, according to the data of a column in it?

20/12/2009
09:44

ihamouda

New Member

Members

Forum Posts: 2

Member Since:
18/12/2009

Offline

I can see the forum is very much active.

so I'm wondering why nobody is answering my very simple question.

Any help is really appreciated.

21/12/2009
15:16

Jason

Guest

Guests

I am also looking for a solution with this. I have had a request to change not only the row color depending on a value of a certain field within the dataset, but also to have a grouping of columns be one color and another grouping be another color going top-down.

22/12/2009
10:10

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

The reason that is not answerd is that this requirmend is discussed many times here and you can find them using the search button.

Any way you can use afterInsertRow event (do not forget to set gridview mode to false in this case)

You can find more about this event here:

http://www.trirand.com/jqgridw.....iki:events

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

22/12/2009
15:18

Jason

Guest

Guests

Tony:

When you say "inserted row", does this account for each row returned from my JSON request? Or only when a bran new record is created via the Add method?

26/12/2009
12:10

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

It work on both cases - from the request and when you add a row with addRowData.

Best Regsrds

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

28/12/2009
19:04

newperson

Member

Members

Forum Posts: 27

Member Since:
28/12/2009

Offline

tony said:

Hello,

It work on both cases – from the request [Image Can Not Be Found][Image Can Not Be Found][Image Can Not Be Found]and when you add a row with addRowData.

Best Regsrds

Tony

Thank you for the reply.

In my situation I don't need to edit fields. However I would like to highlight fields of a column that are less than an integer value that equals 600

28/12/2009
19:29

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

use a custom formatter for this purpose - here is example

http://www.trirand.com/jqgridw.....er#example

Reagrds

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

30/12/2009
22:09

Jason

Guest

Guests

Tony,

Re: afterInsertRow

I currently have gridview: true for the grid in question and need that on due to the size of the cols and records returned.

Is there any other way to change a row's color based on something found in the SQL?

Jason

31/12/2009
03:00

newperson

Member

Members

Forum Posts: 27

Member Since:
28/12/2009

Offline

Jason said:

Tony,

Re: afterInsertRow

I currently have gridview: true for the grid in question and need that on due to the size of the cols and records returned.

Is there any other way to change a row's color based on something found in the SQL?

Jason

Jason,

Yes there is a way and it seems to be rather easy if you know jquery and a little about css.

If you look at this post Custom fonts and colors for cells I have the javascript required for looking at a cell in Colmodel which is populated by mysql, I then use a function to make changes if the value in each cell is less than 600 return the original content plus the modification. In this case I have not been able to apply a color yet as I don't exactly how to apply a color to it but the most difficult part has been accomplished.

PS: I think Tony is the only one who answers questions and I think he might be off or something, haven't seen anything from him in the last 2 days.

31/12/2009
16:02

Jason

Guest

Guests

Thanks 😉

I can get it to work using jQuery. I was hoping for something more built-in rather than bolted on. But, there is not an obvious solution out so I may just have to bolt it. When I parse the data back from my DB, I will perfom my conditional statement in that loop. If it needs to change colors I will set a hidden field with a certain value, then when the grid is complete, I will use a custom function to check that value and modify that entire row to a color if required.

01/01/2010
05:48

newperson

Member

Members

Forum Posts: 27

Member Since:
28/12/2009

Offline

Figured out how to change the color on the cell, anyone know how to do it on the entire row?

...

colModel:[
{name:'SKU Count',index:'item_count', width:80,align:"right",searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}, formatter:highlight},

...

function highlight (cellValue, options, rowObject) {

               var color = (parseInt(cellValue) < 10000) ? "red" : "green";
               var cellHtml = "<span style='color:" + color + "' originalValue='" + cellValue + "'>" + cellValue + "</span>";

               return cellHtml;

}

...

03/01/2010
19:10

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Look here

http://www.trirand.com/blog/?p.....-for-cells

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.