<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> |