Forum Replies Created

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts

  • TomArcher
    Participant

    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 } 
                                    ]
                                });
    
    • This reply was modified 4 years, 2 months ago by  TomArcher.

    TomArcher
    Participant

    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>';
                                            }
                                        }
                                    ]
    

    TomArcher
    Participant

    Works perfect. Thanks!


    TomArcher
    Participant

    I should add that when I move the following out of the jqxLayout div, the grid works, but of course, the layout is gone:

    
    <div id='jqxgrid' data-container="SolutionExplorerPanel">This is no working</div>
    
Viewing 4 posts - 1 through 4 (of 4 total)