0

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?

DilanG
  • 1,197
  • 1
  • 26
  • 42
  • 1
    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. – Oleg Oct 08 '13 at 07:54
  • 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. – DilanG Oct 08 '13 at 09:13

1 Answers1

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

enter image description here

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
    );
}
Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • 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.? – DilanG Oct 08 '13 at 10:23
  • @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. – Oleg Oct 08 '13 at 10:36
  • 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? – DilanG Oct 08 '13 at 11:00
  • @DilanG: You should modify `dataArray` in the columns where you need have red color: `dataArray={"column1":total1 ? "" + total1 + "": total1,"colomn2":total2,....}` – Oleg Oct 08 '13 at 11:02