Using css with Jqxgrid

1

Hi,

I successfully followed the JqxGrid example shown on this site.
I put the CSS code shown in the top right corner (colour info) on that site in the NSB project CSS.

Instead of having fixed CSS, i need to be able to change colours based on what the user selects. Is there a way to do this? Such as store the colours in an array to then be used as required?

Thanks

2

Do you want to change the color of an individual cell, or the css definition which applies to the cell?

3

Essentially, i need to change the colour of the individual cell. With the website sample, they set the cell colours using:

var cellclass = function(row, columnfield, value) {
if (value < 3) {
return ‘red’;
} else if (value >= 3 && value < 8) {
return ‘yellow’;
} else return ‘green’;
};

Then the CSS is as follows:

.green {
color: black !important;
background-color: #b6ff00 !important;
}

.yellow {
color: black !important;
background-color: yellow !important;
}

.red {
color: black !important;
background-color: #e83636 !important;
}

I made it work in NSB by putting the CSS above in the project CSS. However, i need to be able to change the colours at runtime and that is what i am not sure about.
Can the colour be defined in a variable at runtime then applied that way instead of putting it in project css?

Thanks

4

The class gives the name of the css definition to use, so adding "red’ as a class to a cell will cause

.red {
color: black !important;
background-color: #e83636 !important;
}

to be applied to the cell. (Remember to remove whatever color class was there before, so you only define one color at a time)

5

Thanks for your reply.

2 things:

  1. With your example code, can #e83636 be replaced with a variable?
  2. Instead of having below:

var cellclass = function(row, columnfield, value) {
if (value < 3) {
return ‘red’;
}
…
};

Instead of calling ‘red’, can this be replaced like below?

var cellclass = function(row, columnfield, value) {
if (value < 3) {
return “background-color: #e83636 !important”;
}
…
};

The user is going to select their own colours from a color picker so the colours will always be different.

Thanks

6
  1. No.
  2. Also no. That function is returning a class name. You’re changing it to return css styles.

You may be able to do what you need by setting the style attribute of the cell directly.

7

Thanks.

Is it possible to create many classes at runtime that stores the different colours and then delete them when no longer required?

8

I came up with a solution.

Instead of using the colorpicker, i put 25 buttons on a form and each of them has a different colour, and associated class that i put in CSS.

When each row of the grid array is filled, i have another array that only stores the colour class for that row. When the cellclass is called, i know the row number so from the colour array, i know the class and return the colour.