CellRenderer with CellsFormat

[blinkins0nMember]

Hi,

Is it possible to use cellsformat and cellsalign with cellrendering.

Ive seen an example with cellsalign by passing in the columnsproperties and the then setting float + columnproperties.cellsalign but no example with cellsformat!

var columnrenderer = function (value) { return '
' + value + '
'; }
            
var col_cellsrenderer = function (row, column, value, columnproperties) {                              
                if (value < 0) {
                         return '
' + value + '
';
                } else {
                        return '
' + value + '
';
                }
            }

Before: Text would format to currency and aligned right.

{ text: 'Revenue' datafield: 'JanRevenue', width: 125, cellsformat: 'c2', render: columnrenderer, cellsalign: 'right' }

After: text would align left and lose currency formatting.

{ text: 'Revenue', dataField: 'JanRevenue', width: 125, cellsformat: 'c2', renderer: columnrenderer, cellsalign: 'right', cellsrenderer: col_cellsrenderer },

Any help would be appreciated.

Thanks.

[Peter StoevKeymaster]

Hi blinkinsOn,

I’ve prepared a sample cellsrenderer function which takes into account column’s cellsaging and cellsformat.

         { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', cellsformat: 'f2',
                      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);
                                  }
                              }
                          }
                          return '<span style="margin: 4px; float: ' + column.cellsalign + ';">' + value + '</span>';
                      }
                  },

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[blinkins0nMember]

Thats perfect, thank you very much. Love the grid.

[blinkins0nMember]

Worked a treat with but have a small issue now.

I have a localization object setup

var localizationobj = $("#jqxgrid").jqxGrid('gridlocalization');
localizationobj.currencysymbol = "€";
localizationobj.currencysymbolposition = "before";
localizationobj.decimalseparator = ".";
localizationobj.thousandsseparator = ",";
localizationobj.percentsymbol = "%";


When applying the cellsformat with ‘c2’ it reverts back to ‘$’ sign.

Also does the ‘p’ work to format the number as a percenatge while adding the % to the end of the number or does it just format the number and we have to append the % sign

Thanks again.

[Peter StoevKeymaster]

Hi blinkins0n,

The cellsrendering returns the HTML that you want to return and renders it in the Grid Cell. To use your localization object, pass it as a third parameter to the formatnumber and formatdate functions.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts