Wijmo UI for the Web
Customize Cell

Wijgrid allows you to customize cell contents using the cellFormatter field in the column object. Formatters give you tremendous flexibility since they can be used to customize the content created by the grid, add images or to create new HTML content for each cell.

For example, the script below allows you to add image of the flag in the column Flag according to the country in the column Country.

Script
Copy Code
<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
        $(document).ready(function () {
          // bind the grid
        $("#demo").wijgrid({
        data: getData(5),
       // 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", "50");         // 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" }
                    ]
                });
            });
        });
// get url to flag image
        function getFlagUrl(country) {
            var url = "http://www.geonames.org/flags/m/";
            switch (country) {
                case "USA": return url + "us.png";
                case "UK": return url + "uk.png";
                case "Germany": return url + "de.png";
                case "Italy": return url + "it.png";
                case "Japan": return url + "jp.png";
                case "Brazil": return url + "br.png";
                case "Canada": return url + "ca.png";
            }
            return "";
        }
 //data generators
        function getData(count) {
            var data = [];
            var country = "USA,UK,Germany,Italy,Japan,Brazil,Canada".split(",");
            var name = "Lorem,Ipsum,Dolor,Amet,Consectetur".split(",");
            var suffix = "LLC,Inc".split(",");
            for (var i = 0; i < count; i++) {
                data.push({
                    Country: getString(country),
                    ProductName: getString(name) + " " + getString(suffix),
                    UnitPrice: Math.floor(getNumber(5, 10)),
                    Quantity: Math.floor(getNumber(1, 5)) * 10
                });
            }
            return data;
        }
        function getString(arr) {
            return arr[Math.floor((Math.random() * arr.length))];
        }
        function getNumber(lo, hi) {
            return lo + Math.random() * (hi - lo);
        }
        function getDate(daysAgo) {
           return new Date((new Date()).getTime() - daysAgo * 24 * 3600 * 1000);
        }
</script>