formatting cell background color based on condition in javascript

Question

i am trying to change cell background color based on condition on particular column, it is not working.please help to me to resolve. this is what i have tried. my php page for your reference. thanks. i found a solution but it doesnt work on my php page. this that solution http://www.ok-soft-gmbh.com/jqGrid/BackgroundColorFormatter.htm

    <?php
$con=mysqli_connect("localhost","user","pass","db");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$val = mysqli_query($con,"select storenm,FA_SOH,FA_CY_QTY,FA_CT_QTY from pr_report");

   $arr=array();
   while ($row = mysqli_fetch_array($val)){
       $arr[] = "["."'".$row['storenm']."'".","."'".$row['FA_SOH']."'".","."'".$row['FA_CY_QTY']."'"."]";
   }
   $assign = implode(',',$arr);

   ?>

    <!DOCTYPE HTML>
    <html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name=viewport content="width=device-width, initial-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>




<meta charset="utf-8">


<!--jQuery dependencies-->
    <link rel="stylesheet" href="jquery-ui.css" />
    <script src="jquery-1.11.0.min.js"></script>    
    <script src="jquery-ui.min.js"></script>
    <script type="text/javascript" src="touch-punch.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="pqgrid.min.css" />
    <script src="pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="themes/office/pqgrid.css" />
<style type="text/css">
        span.cellWithoutBackground
        {
            display:block;
            background-image:none;
            margin-right:-2px;
            margin-left:-2px;
            height:14px;
            padding:4px;
        }
    </style>
<script>
    $(function () {
    var data = [<?PHP echo $assign;?>];
          var obj = { 
          swipeModel: { on : true },
          //scrollModel: { autoFit: true },
            title: "Grid From JSON",
            collapsible: { on: true, collapsed: false },
virtualX: false,
virtualY: false,
        freezeRows: 0,

            freezeCols: 1,
            editable: false,  
            resizable: false,
        width: 400, 
        height: 400, 
        title: "ParamQuery Grid Example"
        };

        obj.colModel = [{ 
        title: "Storenm", width: 100, dataType: "string" },
        { title: "FSOH", width: 200, dataType: "float",align: "center" },
        { title: "FCY", width: 150, dataType: "float",align: "center",
                        formatter: function (cellvalue) {
                            var color;
                            var val = Number(cellvalue);
                            if (val>25) {
                                color = 'red';
                            } else if (val>15) {
                                color = 'yellow';
                            } else {
                                color = 'green';
                            }

                            return '<span class="cellWithoutBackground" style="background-color:' + color + ';">' + cellvalue + '</span>';
                        }
                    }, 
        { title: "Profits ($ millions)", width: 150, dataType: "float", align: "right"}];

        obj.dataModel = {data: data};
        $("#grid_array").pqGrid(obj);

    });

</script>    
</head>
<body>
<div id="grid_array" style="margin:100px;"></div>
</body>

</html>

Thanks.

score 1 · Answer 1 · edited May 23 '17 at 11:46

1

You try to use very old example, which I created for the answer. Later I suggested to include another features: cellattr and rowattr, which I recommend to use instead of usage custom formatters just to set attributes and not the content of the cell. Look at the old answer for an example of usage cellattr. You can use, for example, the formatter: "number" to format the content of the column, and to use cellattr to set class attribute on the cells to change the background color of the cells.

You posted some code, where you don't use jqGrid at all. I suppose, that you wrote some wrapper pqGrid, which use colModel for jqGrid.

In any way, it's important to take in consideration some CSS rules to change the background color. You use currently background-color property to change the color. The default jQuery UI CSS apply background-image on the cells too. To be able to change the background color to red, for example, you can use either both background-color and background-image

background-color: red;
background-image: none;

or to use

background: red;

which reset background-image together with the background-color.

The next problem. If you apply the CSS properties by usage a CSS rule, then the usage of

span.cellWithoutBackground {
    background-image:none;
}

or

.backgroundRed {
    background-color: red;
    background-image: none;
}

will not work because there are exist jQuery UI rules with two selectors, which set background too. To force that your CSS rule will be applied you should use more complex CSS selector. For example

.ui-jqgrid .jqgrow .backgroundRed {
   background-color: red;
   background-image: none;
}

(the classes jqgrow and ui-jqgrid are applied on the outer elements).

edited May 23 '17 at 11:46

Community

1
1

answered Apr 01 '17 at 17:15

Oleg

220,925
34
403
798

thank you sir, i have tried the below, but it is not working. i am new to CSS. this is what i have tried `.pq-grid-cell.cellWithoutBackground{ display:block; background-color: red; background-image:none; margin-right:-2px; margin-left:-2px; height:14px; padding:4px; }` – davidb Apr 01 '17 at 18:13
@davidb: You are welcome! What exactly you tried? Where is your current code or the demo? – Oleg Apr 01 '17 at 18:15
1

@davidb: The rule `.pq-grid-cell.cellWithoutBackground` (without spaces) will be applied on the elemen which have **both** classes `pq-grid-cell` and `.cellWithoutBackground`. I suggested you to use the rule `.ui-jqgrid .jqgrow .cellWithoutBackground`, which means the element with `cellWithoutBackground` class only, but which parent (the row ``) has the class `jqgrow`, which parent (outer `
` used by jqGrid) has the class `.ui-jqgrid`.
– Oleg Apr 01 '17 at 18:19
@davidb: You use [pqgrid](https://paramquery.com/), which has **no relation** with jqGrid, which use [the demo](http://www.ok-soft-gmbh.com/jqGrid/BackgroundColorFormatter.htm), which you referenced and the tags you used in your question. I don't know pqGrid and I can't help you with it. If you want to use jqGrid then I would recommend you [the page](https://free-jqgrid.github.io/getting-started/index.html) as the starting point. – Oleg Apr 01 '17 at 19:31
1

@davidb: It seems that `render` callback function (instead of `formatter`) should be defined in case of usage `pqGrid`. See [The demo page](https://paramquery.com/demos) contains "Rows"/"Conditional formatting" (see [here](https://paramquery.com/demos/render_cells)) describes `render` more detailed. – Oleg Apr 01 '17 at 19:38
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/139674/discussion-between-davidb-and-oleg). – davidb Apr 02 '17 at 09:15
sir can you please help this question http://stackoverflow.com/questions/43199298/uncaught-typeerror-cannot-read-property-replace-of-null-jqgrid – davidb Apr 04 '17 at 11:56

formatting cell background color based on condition in javascript

1 Answers1