Ah I thought I said that. My mistake!I've not used renderCell much. I prefer using get() and formatter() together for rendering HTML within cells (images in particular). It lets you check/pass values of other cells on that row as well.According to the documentation: (https://github.com/SitePen/dgrid/wiki/Grid)(Note: if formatter is specified, renderCell is ignored.)^ This makes sense, because they really do the same thing. Formatter is more friendly with raw HTML I believe, so you might want to use that.The workflow is basically... 1) get() has access to the row in object form.2) Whatever you return from the get() function is passed to formatter()3) formatter() returns the actual text/image etc to be rendered in that cell.Here is a working JSFiddle that checks the value of col3 using an if statement and either returns a green div, or a red image, or the default value of that cell. http://jsfiddle.net/sxQ3m/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dynamic dgrid columns</title>
<link rel="stylesheet" href="https://community.esri.com//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dgrid/css/dgrid.css">
<style type="text/css">
body, html{
margin:0;
padding:0;
height:100%;
width:100%;
}
#grid{
border:0px;
width:100%;
height:100%;
}
</style>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.8/"></script>
<script>
var data = [{"id":0,"col1":"normal","col2":false,"col3":"new","col4":"But are not followed by two hexadecimal","col5":29.91,"col6":10,"col7":false},{"id":1,"col1":"important","col2":false,"col3":"new","col4":"Because a % sign always indicates","col5":9.33,"col6":-5,"col7":false},{"id":2,"col1":"important","col2":false,"col3":"read","col4":"Signs can be selectively","col5":19.34,"col6":0,"col7":true},{"id":3,"col1":"note","col2":false,"col3":"read","col4":"However the reserved characters","col5":15.63,"col6":0,"col7":true},{"id":4,"col1":"normal","col2":false,"col3":"replied","col4":"It is therefore necessary","col5":24.22,"col6":5.5,"col7":true},{"id":5,"col1":"important","col2":false,"col3":"replied","col4":"To problems of corruption by","col5":9.12,"col6":-3,"col7":true},{"id":6,"col1":"note","col2":false,"col3":"replied","col4":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris","col5":12.15,"col6":-4,"col7":false},{"id":7,"col1":"normal","col2":false,"col3":"new","col4":"But are not followed by two hexadecimal","col5":29.91,"col6":10,"col7":false},{"id":8,"col1":"important","col2":false,"col3":"new","col4":"Because a % sign always indicates","col5":9.33,"col6":-5,"col7":false},{"id":9,"col1":"important","col2":false,"col3":"read","col4":"Signs can be selectively","col5":19.34,"col6":0,"col7":true},{"id":10,"col1":"note","col2":false,"col3":"read","col4":"However the reserved characters","col5":15.63,"col6":0,"col7":true},{"id":11,"col1":"normal","col2":false,"col3":"replied","col4":"It is therefore necessary","col5":24.22,"col6":5.5,"col7":true},{"id":12,"col1":"important","col2":false,"col3":"replied","col4":"To problems of corruption by","col5":9.12,"col6":-3,"col7":true},{"id":13,"col1":"note","col2":false,"col3":"replied","col4":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris","col5":12.15,"col6":-4,"col7":false},{"id":14,"col1":"normal","col2":false,"col3":"new","col4":"But are not followed by two hexadecimal","col5":29.91,"col6":10,"col7":false},{"id":15,"col1":"important","col2":false,"col3":"new","col4":"Because a % sign always indicates","col5":9.33,"col6":-5,"col7":false},{"id":16,"col1":"important","col2":false,"col3":"read","col4":"Signs can be selectively","col5":19.34,"col6":0,"col7":true},{"id":17,"col1":"note","col2":false,"col3":"read","col4":"However the reserved characters","col5":15.63,"col6":0,"col7":true},{"id":18,"col1":"normal","col2":false,"col3":"replied","col4":"It is therefore necessary","col5":24.22,"col6":5.5,"col7":true},{"id":19,"col1":"important","col2":false,"col3":"replied","col4":"To problems of corruption by","col5":9.12,"col6":-3,"col7":true},{"id":20,"col1":"note","col2":false,"col3":"replied","col4":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris","col5":12.15,"col6":-4,"col7":false},{"id":21,"col1":"normal","col2":false,"col3":"new","col4":"But are not followed by two hexadecimal","col5":29.91,"col6":10,"col7":false}];
require([
"dojo/_base/declare",
"dgrid/OnDemandGrid",
"dojo/ready",
"dojo/store/Memory",
],
function(declare, OnDemandGrid, ready, Memory){
ready(function () {
var dataStore;
var CustomGrid = declare([ OnDemandGrid]);
var grid = new CustomGrid({
bufferRows: Infinity,
cellNavigation: false,
escapeHTMLInData: false,
noDataMessage: "NO DATA",
loadingMessage: "LOADING",
selectionMode: "single",
}, "grid");
var columnExample1 = [
{
"field": "col1",
"label" : "col1"
},
{
"field": "col2",
"label" : "col2"
},
{
// You can reuse field values to create compound columns
"field": "col2",
"label" : "SUPER COLUMN",
"formatter" : function (value) {
return "col1: " +value[0] + " ... col2: " + value[1];
},
"get" : function (obj) {
// obj represnts the the whole row... you can access different cells by their field
// E.G. obj.col1 or obj.col3
return [obj.col1, obj.col2];
}
},
{
"field": "col3",
"label" : "col3",
"formatter" : function (value) {
return value;
},
"get" : function (obj) {
if(obj.col3 === "new"){
return "<div style='width:15px; height:15px; background-color:green;'></div>";
}else if(obj.col3 === "read"){
return "<img src='http://upload.wikimedia.org/wikipedia/commons/5/52/Small_red_circle.png' />";
}
return obj.col3;
}
},
{
"field": "col4",
"label" : "col4",
"formatter" : function (value) {
return value;
},
"get" : function (obj) {
return obj.col4;
}
}
];
// Set Columns
grid.setColumns(columnExample1);
// If you use a store...
dataStore = new Memory ({"data": data});
grid.set("store", dataStore);
grid.startup();
});
});
</script>
</head>
<body class="tundra"></body>
</html>
.png "JonathanUihlein"){kind=avatar}
