jQWidgets Forums

jQuery UI Widgets Forums Grid Cell Rendering issue with Cell Formatting

This topic contains 2 replies, has 2 voices, and was last updated by  Peter Stoev 12 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • DavidSimmons
    Participant

    I have a cell that the value is float and the cellsalign: ‘right’, cellsformat: ‘c2’. I need to add a cellsrenderer to it that changes the color base on the value as shown in your example.

    var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
    if (value < 20) {
    return '‘ + value + ”;
    }
    else {
    return ‘‘ + value + ‘‘;
    }
    }

    When I add the cellsrenderer, the cellsformat no longer takes place.


    DavidSimmons
    Participant

    Here is your example modified. The format is not correct….

    Grid with custom cells rendering.

    $(document).ready(function () {
    // prepare the data
    var data = new Array();
    var firstNames =
    [
    “Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
    ];
    var lastNames =
    [
    “Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”
    ];
    var productNames =
    [
    “Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Cramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
    ];
    var priceValues =
    [
    “2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”
    ];
    for (var i = 0; i < 100; i++) {
    var row = {};
    var productindex = Math.floor(Math.random() * productNames.length);
    var price = parseFloat(priceValues[productindex]);
    var quantity = 1 + Math.round(Math.random() * 10);
    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
    row["productname"] = productNames[productindex];
    row["price"] = price;
    row["quantity"] = quantity;
    row["total"] = price * quantity;
    data[i] = row;
    }
    var source =
    {
    localdata: data,
    datatype: "array"
    };
    var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
    if (value < 20) {
    return '‘ + value + ”;
    }
    else {
    return ‘‘ + value + ‘‘;
    }
    }

    var cellsrendererTotal = function (row, columnfield, value, defaulthtml, columnproperties) {
    if (value < 20.00) {
    return '‘ + value + ”;
    }
    else {
    return ‘‘ + value + ‘‘;
    }
    }

    $(“#jqxgrid”).jqxGrid(
    {
    width: 670,
    source: source,
    pageable: true,
    autoheight: true,
    columns: [
    { text: ‘First Name’, datafield: ‘firstname’, width: 100 },
    { text: ‘Last Name’, datafield: ‘lastname’, width: 100 },
    { text: ‘Product’, datafield: ‘productname’, width: 180 },
    { text: ‘Quantity’, datafield: ‘quantity’, width: 80, cellsalign: ‘right’, cellsformat: ‘f2’, cellsrenderer: cellsrenderer },
    { text: ‘Unit Price’, datafield: ‘price’, width: 90, cellsalign: ‘right’, cellsformat: ‘c2’, cellsrenderer: cellsrenderer },
    { text: ‘Total’, datafield: ‘total’, cellsalign: ‘right’, cellsformat: ‘c2’, cellsrenderer: cellsrendererTotal }
    ]
    });
    });


    Peter Stoev
    Keymaster

    Hi David,

    1. Cells Rendering overrides the default rendering built in the Grid – This function expects HTML String as result and the Grid displays the HTML String in the cell instead of the default value. So as you may return any HTML String, the Grid will not try to format values returned by the Cells Renderer function. That is not an issue and is by design. If you want to format the values returned by the Cells Renderer, then you should implement that in the CellsRenderer callback associated to your column.

    2. For Formatting your Code when posting in the Forum, please take a look at this topic: http://www.jqwidgets.com/community/topic/code-formatting/

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.