CODEWITHSUNDEEP
jqueryjqgrid
maciek
maciek

Reputation: 21

jqgrid background color when editing

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.sstatic.net/pJewM.png

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

Upvotes: 2

Views: 2187

Answers (3)

maciek
maciek

Reputation: 21

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.

Upvotes: 0

Oleg
Oleg

Reputation: 221997

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.

Upvotes: 1

Justin Ethier
Justin Ethier

Reputation: 134167

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

Upvotes: 1

Related Questions