how can I change the color of footer data of jqgrid?

Question

I have a jqgrid and on footer there are total values displaying. I want to convert the color of negative values to red. How can I do that?

Flagman

which footer and summary you mean? Do you use grouping of you use just footerrow: true? How you fill the footer tow? Do you use userDataOnFooter: true option and calculates summary on the server or you use userData directly in the input? Probably you use footerData explicitly and makes some calculation with respect of getCol method? In any way you should describe more clear what you do. – Indeliberate

yes i use footerrow: true and $("#gridId").jqGrid("footerData","set",dataArray); or $("#gridId").footerData("set",dataArray,true); to set my dataArray to footer. then I want to color minus values on red color in footer data. – Flagman

Answer 1

If you use false as the last parameter of footerData the data will be not formatted by jqGrid. So you can use HTML fragments like <span style="color:red">...</span> to change the color of displayed data. Alternatively you can use jQuery CSS Framework classes like ui-state-error to hightlight the text (see the answer).

If you need still format the summary value you can use $.fmatter.util.NumberFormat (see the answer or this one) or use formatter method like in the demo

which uses

footerrow: true,
loadComplete: function () {
    var $self = $(this),
        sum = $self.jqGrid("getCol", "amount", false, "sum"),
        i,
        iCol = $("#" + $.jgrid.jqID(this.id) + "_" + "amount")[0].cellIndex, // get index of "amount" column
        sumFormatted = this.formatter("", sum, iCol);

    $self.jqGrid(
        "footerData",
        "set",
        {
            invdate: "Total:",
            amount: sum < 0 ? "<span style='color:red'>" + sumFormatted + "</span>": sum
        },
        false
    );
}

Indeliberate

Thanks for the answer. But I already have data array which is consist with all the column totals. What I want is, color minus total values using this $("#gridId").jqGrid("footerData","set",dataArray,false);. Is there a way to do that.? – Flagman

@DilanG: You are welcome! The data in dataArray can be HTML fragments. So you need just includes color formatting in the values of some properties of dataArray. I do the same in the demo which I posted in my answer. – Indeliberate

sorry for disturbing you.But I didn't get u. In this demo u calculate the total of the in the function. But I already have calculated totals in array.The array structure is, dataArray={"column1":total1,"colomn2":total2,....} like wise... then how can I do this? can you show me please? – Flagman

@DilanG: You should modify dataArray in the columns where you need have red color: dataArray={"column1":total1 ? "<span style='color:red'>" + total1 + "</span>": total1,"colomn2":total2,....} – Indeliberate