jqgrid background color when editing

Question

I'm able to change color of background for cell based on a value. My problem occurs when I edit rows. The background color is covered by "white" editor (only for editable cells). Please see image on https://i.stack.imgur.com/pJewM.png

How can I make my editable cells look like "Front End" values?

score 1 · Answer 1 · answered Apr 16 '12 at 13:37

1

You need to define a style for the input control. For example, for a column called myColumn you could add the following CSS rule:

input[name="myColumn"] {
    background-color:  green;
}

I tested this successfully using the examples on the jqGrid demo page: http://trirand.com/blog/jqgrid/jqgrid.html

answered Apr 16 '12 at 13:37

Justin Ethier

131,333
52
229
284

it works, but I still have to change color of my cells depending on the value, so I have to change rules dynamically and change background color only for some rows. Any idea how to do that? – maciek Apr 16 '12 at 13:47

score 1 · Answer 2 · answered Apr 16 '12 at 16:14

1

It I understand your problem correctly, you need to implement some kind of validation during the initialization of the input field and probably during the user type in the input field.

You can use dataInit for initializing of the parameters of the edit fields (background color for example) and keyup event handler to monitor the changes. For example, you can define the function

validateElem = function (elem) {
    if (elem.value.length > 4) {
        $(elem).addClass("ui-state-error");
    } else {
        $(elem).removeClass("ui-state-error");
    }
}

which set standard jQuery UI "ui-state-error" class in the field which has more as 4 characters and remove the class for the short inputs. You can call the validateElem functions from both dataInit and keyup:

editoptions: {
    dataInit: function (elem) {
        validateElem(elem);
    },
    dataEvents: [
        {
            type: 'keyup',
            fn: function (e) {
                validateElem(e.target);
            }
        }
    ]
}

On the demo you would see

enter image description here

or

enter image description here

In the same way you can set any other your custom CSS class which define other properties of the cell and use more complex validation rules.

answered Apr 16 '12 at 16:14

Oleg

220,925
34
403
798

thank you for this answer. this piece of code is really great and I actually thought of adding sth like that to my app. But I solved my problem earlier with my own solution using loadComplete function. – maciek Apr 17 '12 at 09:38
@maciek: You are welcome! The code which you posted suppose that somebody set the rows already in inline editing mode **before** for example inside of `gridComplete`. The code contains many constants which depends from the order of the columns and the code like `find("td input").eq(j-4)` instead of `find("td:eq("+(j-4)+") input")` works aditionally only if all the columns in the middle are editable too. Moreover the value `className` can be string with more as one class divided by space. So I would recommend you to improve your code to make in more stable to changes in `colModel`. – Oleg Apr 17 '12 at 10:41
@maciek: At least I recommend you to use column names instead of indexes. Look at `getColumnIndexByName` function (see [the answer](http://stackoverflow.com/a/5017528/315935) for example) which provide simple helper function which you can use. – Oleg Apr 17 '12 at 10:43
thank you for your answer. I improved my code using your advice. – maciek Apr 18 '12 at 09:56

score 0 · Accepted Answer · answered Apr 17 '12 at 09:40

this code works:

    loadComplete: function(data){
                $.each(data.rows,function(i,item){
                    for (var j = 4; j <= 12; j++) {
                        testVal = data.rows[i].cell[j];
                        nTestVal = parseFloat(testVal);

                        if(nTestVal == 5){
                            sClassName = $("#" + data.rows[i].id).find("td").eq(j)[0].childNodes[0].className;
                            if (sClassName == "editable")
                                $("#" + data.rows[i].id).find("td input").eq(j-4).css("background", "#F76541");
                            else
                                $("#" + data.rows[i].id).find("td").eq(j).css("background", "#F76541");
                        }
                        else if(nTestVal > 0){
                            sClassName = $("#" + data.rows[i].id).find("td").eq(j)[0].childNodes[0].className;
                            if (sClassName == "editable")
                                $("#" + data.rows[i].id).find("td input").eq(j-4).css("background", "#54C571");
                            else
                                $("#" + data.rows[i].id).find("td").eq(j).css("background", "#54C571");
                        } 
                    }
                });
            }

I know it's a little bit messy and unclear, so if anybody want to know details just add comment.

jqgrid background color when editing

3 Answers3