jQuery UI Widgets Forums Grid CellRenderer with CellsFormat

This topic contains 4 replies, has 2 voices, and was last updated by  Peter Stoev 11 years, 7 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • CellRenderer with CellsFormat #5654

    blinkins0n
    Member

    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.

    • This topic was modified 11 years, 7 months ago by  blinkins0n.
    CellRenderer with CellsFormat #5672

    Peter Stoev
    Keymaster

    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

    CellRenderer with CellsFormat #5683

    blinkins0n
    Member

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

    CellRenderer with CellsFormat #5687

    blinkins0n
    Member

    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.

    CellRenderer with CellsFormat #5691

    Peter Stoev
    Keymaster

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.