Wijmo grid cell and row formatting

by jwstott

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.9.min.css">
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20132.9.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.9.min.js"></script>
<script src="http://cdn.wijmo.com/wijmo/external/knockout-2.2.0.js"></script>
<script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20132.9.js"></script>
<div class="container">
    <div class="header">
         <h2>Cell and Row Formatting</h2> 
    </div>
    <div class="main demo">
        <!-- Begin demo markup -->
        <table id="demo"></table>
        <!-- End demo markup -->
        <div class="demo-options">
            <!-- Begin options markup -->
            <!-- End options markup -->
        </div>
    </div>
    <div class="footer demo-description">
        <p>This sample shows how to customize cell contents using the <b>cellFormatter</b> option in the column object.</p>
        <p>The <b>cellFormatter</b> option allows you to specify a function that creates the element displayed in each cell. In this sample, the formatter is used to populate the "Flag" column and to format cells with discounts greater than 25% in bold red.</p>
        <p>Formatters give you tremendous flexibility since they can be used to customize the content created by the grid or to create new HTML content for each cell.</p>
    </div>
</div>

CSS

.wijmo-wijgrid .wijmo-wijgrid-innercell img {
    height: auto;
}

JavaScript

$(document).ready(function () {
    var payloadData = ko.observableArray(getData(12));
    ko.applyBindings(payloadData);
    // bind the grid 
    $("#demo").wijgrid({
        data: payloadData(),
        columnsAutogenerationMode: "none",
        columns: [{
            dataKey: "Country",
            headerText: "Country",
            dataType: "string"
        }, {
            dataKey: "Country",
            headerText: "Flag",
            cellFormatter: function (args) {
                if (args.row.type & $.wijmo.wijgrid.rowType.data) { // data row (not group header) 
                    var img = $("<img/>")
                        .attr("src", getFlagUrl(args.row.data.Country)) // flag url 
                    .attr("height", "100"); // image size 
                    args.$container.css("text-align", "center") // center the flag 
                    .empty() // remove original content 
                    .append(img); // add image element 
                    return true; // content has been customized 
                }
            }
        }, {
            dataKey: "ProductName",
            headerText: "Product Name",
            dataType: "string"
        }, {
            dataKey: "UnitPrice",
            headerText: "Unit Price",
            dataType: "currency"
        }, {
            dataKey: "Quantity",
            headerText: "Quantity",
            dataType: "number",
            dataFormatString: "n0"
        }, {
            dataKey: "Discount",
            headerText: "Discount",
            dataType: "number",
            dataFormatString: "p0",
            cellFormatter: function (args) {
                if (args.row.type & $.wijmo.wijgrid.rowType.data) { // data row (not group header) 
                    if (args.row.data.Discount > .25) { // discount > 25%? bold + red! 
                        args.$container.css("font-weight", "bold");
                        args.$container.css("color", "red");
                    }
               ...