Using customized function in the grid

[walker1234Participant]

Right now I am doing something like this in my grid:

var cellclass = function (row, columnfield, value) {
                if (value == 'A') {
                    return 'blue';
                }
                else if (value == 'B'){
                  return 'yellow';
                }
                else return 'green';
            }

And passing this cellclass variable with cellclassname parameter to aply the desired colors on a particular column.

I am wondering, if I have to do something like this which is picked up from this post:

function wordInString(s, word){
  return new RegExp( '\\b' + word + '\\b', 'i').test(s);
}

wordInString('did you, or did you not, get why?', 'you')  // true

How should I go about it? The cellclass variable above is taking row,column field and value as the parameter and the above function is taking s and word as the parameter. Basically, I have a JSON response parameter and it’s content is a sentence from where I need to match a particular word and hence I am planning to use above function to that if that word exists then I can highlight something in my grid.

[ChristopherParticipant]

Hi walker1234,

Define the “wordInString” function somewhere in the beginning of your code( as a global function) and call it in your “cellclass” function to check if the value of the row contains the keyword you’re looking for. If it contains it, return the color you want to apply to that cell. For example:

var cellclass = function (row, columnfield, value) {
var flag = wordInString(value, 'you');
                if (flag === true) {
                    return 'blue';
                }
            }

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[walker1234Participant]

Hi Christopher,

Thanks. I have a followup question. Please consider the following code:

$("#myPanel").jqxGrid({
            source: newAdapter,
            width: '600',
            height: '170',
            columnsResize: true,
            columns: [
            {
                text: 'First Value',
                datafield: 'first_value',
                width: 75
                
            },

            {
                text: 'Second Value',
                datafield: 'second_value',
                width: 85,
                editable: false,
                cellclassname: cellclass
            },
            
            {
                text: 'Third Value',
                datafield: 'third_value',
                cellsformat: 'd'

            }

As can be seen above, the color thing will be applied to the Second Value column because it has cellclass variable defined in it. I am wondering if there is a way to apply color thing to different column based on another column. For example, the word thing in the sentence that my function is searching is available in third_value datafield, however, based on the finding of the word in the sentence, I want to highlight the corresponding cell of the Second Value column. Is it possible to do that?

[ChristopherParticipant]

Hi walker1234,

Yes you can apply a style ot any column depending on whatever value of the jqxGrid you like. The cellclassname should be set to the column that you want to apply color to. In that function you can check for other field’s values in other columns. For example, using the getrowdata function by passing the “row” number that you already have in the “cellclass” function, you can check every single value of the current row.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts