cellsrenderer and cellsformat

[TomArcherParticipant]

I’m having trouble marrying the two concepts of cellsrenderer and cellsformat.

I need the cellsrenderer for coloration and font size, and I need the cellsformat for formatting currency.

However, I can’t quite get what I’m looking for:

• All data vertically aligned to center
• Font size of 12
• Blue color if value > 0; otherwise, red color
• Balance column should show in localized currency

                            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                                if (columnfield === "AccountBalance" && value < 0)
                                    return '<span style="margin: 4px; margin-right: 5px; color: red; font-size: 12px; float: ' + columnproperties.cellsalign + ';">' + value + '</span>';
                                else
                                    return '<span style="margin: 4px; margin-right: 5px; color: blue; font-size: 12px; float: ' + columnproperties.cellsalign + ';">' + value + '</span>';
                            }
                            
                            $("#jqxgrid").jqxGrid(
                            {
                                showheader: false,
                                width: '100%',
                                height: '100%',
                                source: dataAdapter,
                                columnsresize: true,
                                columns: [
                                    { datafield: 'AccountName', width: 200, cellsrenderer: cellsrenderer },
                                    { datafield: 'AccountBalance', cellsalign: 'right', cellsrenderer: cellsrenderer, cellsformat: "c2" }
                                ]
                            });

[TomArcherParticipant]

I was able to resolve the issue by implementing an inline renderer as found in another question/answer:

                            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                                if (columnfield === "AccountBalance" && value < 0)
                                    return '<span style="margin: 4px; margin-right: 5px; color: red; font-size: 12px; float: ' + columnproperties.cellsalign + ';">' + value + '</span>';
                                else
                                    return '<span style="margin: 4px; margin-right: 5px; color: blue; font-size: 12px; float: ' + columnproperties.cellsalign + ';">' + value + '</span>';
                            }
                            
                            $("#jqxgrid").jqxGrid(
                            {
                                showheader: false,
                                width: '100%',
                                height: '100%',
                                source: dataAdapter,
                                columnsresize: true,
                                columns: [
                                    { datafield: 'AccountName', width: 200, cellsrenderer: cellsrenderer },
                                    { datafield: 'AccountBalance', cellsalign: 'right', cellsformat: 'c2', 
                                        cellsrenderer: function (row, column, value) {
                                            var column = $("#jqxgrid").jqxGrid('getcolumn', column);
                                            if (column.cellsformat != '') {
                                                if ($.jqx.dataFormat) {
                                                    if ($.jqx.dataFormat.isDate(value)) {
                                                        value = $.jqx.dataFormat.formatdate(value, column.cellsformat);
                                                    }
                                                    else if ($.jqx.dataFormat.isNumber(value)) {
                                                        value = $.jqx.dataFormat.formatnumber(value, column.cellsformat);
                                                        alert(value);
                                                    }
                                                }
                                            }
                                            return '<span style="margin: 4px; margin-right: 5px; color: blue; font-size: 12px; float: ' + column.cellsalign + ';">' + value + '</span>';
                                        }
                                    }
                                ]

[TomArcherParticipant]

Refactored code in case someone stumbles upon this looking for a solution to a similar problem:

                            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                                // Preserve cellsformat of numbers and dates
                                var column = $("#jqxgrid").jqxGrid('getcolumn', columnfield);
                                var formattedValue = value;
                                if (column.cellsformat != '') {
                                    if ($.jqx.dataFormat) {
                                        if ($.jqx.dataFormat.isDate(value)) {
                                            formattedValue = $.jqx.dataFormat.formatdate(value, column.cellsformat);
                                        }
                                        else if ($.jqx.dataFormat.isNumber(value)) {
                                            formattedValue = $.jqx.dataFormat.formatnumber(value, column.cellsformat);
                                        }
                                    }
                                }

                                // Build style                                
                                var style = "margin: 4px; margin-right: 5px; font-size: 12px;";
                                style += "float: " + columnproperties.cellsalign + ";";
                                
                                alert(value);
                                if (columnfield === "AccountBalance" && value < 0)
                                    style = style + "color: red;";
                                else
                                    style = style + "color: blue;";

                                // Build (and return) scan element containing style and value
                                var scan = "<span style='" + style + "'>" + formattedValue + "</span>";
                                return scan;
                            }
                            
                            $("#jqxgrid").jqxGrid(
                            {
                                showheader: false,
                                width: '100%',
                                height: '100%',
                                source: dataAdapter,
                                columnsresize: true,
                                columns: [
                                    { datafield: 'AccountName', width: 200, cellsrenderer: cellsrenderer },
                                    { datafield: 'AccountBalance', cellsalign: 'right', cellsformat: 'c2', cellsrenderer: cellsrenderer } 
                                ]
                            });

[Author]

Posts