Author Topic: Setting a Grid Row Color  (Read 229 times)

pbassey

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 48
    • View Profile
Setting a Grid Row Color
« on: January 30, 2025, 02:19:32 am »
I have the following popup Grid logic below:

    dataModelTransaction=  {
    location: "remote",
    dataType: "jsonp",
    method: "GET",
    url: "/CCRSearch/Reports/[email protected]",
    }
    colModelTransaction = [
        { title: "FAS Activity", width: 120, dataIndx: "FASActivity" },
        { title: "TRAN_TYPE", hidden: true, width: 100, dataIndx: "TRAN_TYPE" },
        { title: "Source", width: 40, dataIndx: "Source" },
        { title: "Account Code", width: 40, dataIndx: "ACCNT_CODE" },
        { title: "Date", width: 40, dataIndx: "JCDATE" },
        { title: "Description", width: 150, dataIndx: "FASDesc" },
                  {
            title: "Amount", width: 85, align: "right", dataIndx: "AMOUNT",
            cellClass: function (ui) {
                return ui.cellData < 0 ? "red-cell" : "";
            }
        }

    ]

    function OpenTranWindow(Activity) {
        $.post("/CCRSearch/Reports/GetTransactions?=", { "ActivityId": Activity}, function (data) {
            $("#Transactiondetails").html(data);
            $("#grid_transactions").pqGrid({
                height: 450,
                scrollModel: { autoFit: true },
                dataModel: dataModelTransaction,
                colModel: colModelTransaction,
                pageModel: { type: "local", rPP: 1000, strRpp: "" },
                numberCell: { show: false },
                title: "Transaction Details",
                resizable: true,
                 rowClass: function (ui) {
                    if (ui.rowData.TRAN_TYPE == "B") {
                        return "red-row";                                    // Apply a custom CSS class
                    }
                }

            });
            modal1.show();
        });
    }

I also have this style section in the html code above the javascript code:
<style>
    .red-row {
        background-color: red !important;
        color: white !important;
    }
    .red-cell {
        background-color: red !important;
        color: white !important;
    }
</style>
I am trying to set the entire row Red, if the hidden column, TRAN_TYPE = "B".  I am also trying to set the Amount column to Red if it is a negative value.

Can you tell me what I am doing wrong?


paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6352
    • View Profile
Re: Setting a Grid Row Color
« Reply #1 on: January 30, 2025, 03:12:29 pm »
Please check this example on applying conditional styles:

https://paramquery.com/pro/demos/condition_style

Also pqgrid supports spreadsheet format syntax to apply conditional color to -ve values.

Code: [Select]
format: '@;[Red]@',
« Last Edit: January 30, 2025, 03:17:40 pm by paramvir »