I'm trying to create a grid from json data. Each cell will be editable eventually. One column contains type dependant data and based on the type I want to show either a pair of date pickers (start/end date) or Textarea or some other widget.
I'm using renderCell to attempt to render this type dependent column, but whenever I introduce Textarea to my code I get an error "TypeError: subRows is undefined" & just can't seem to shake it.
I'm quite new to dojo so I think I'm missing something obvious. I've read all the docs and in particular this post which didn't help in my case. Unfortunately many of the docs are slices of code & whatever it is I'm not getting means those code slices are too short to get started with.
Can someone help me out. Textarea is the one I'd like to solve as that seems simple & I've not attempted to configure the DateTextBox properly yet anyway. I figure get the Textarea working & that will explain the rest...
My code is below - whole page posted in case my error is missing a file somewhere;
<html>
<head>
<meta charset="utf-8">
<title>Role assignment</title>
<link rel="stylesheet" href="/library/js/dojo/dojo/resources/dojo.css">
<link rel="stylesheet" href="/library/js/dojo/dgrid/css/dgrid.css">
<link rel="stylesheet" href="/library/js/dojo/dgrid/css/skins/claro.css">
<link rel="stylesheet" href="/library/js/dojo/dijit/themes/dijit.css">
<LINK href="/library/css/custom.css" type="text/css" rel="stylesheet">
<LINK href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<script type="text/javascript" language="javascript" src="/library/js/script_main.js"></script>
</head>
<body class="claro">
<form>
<div id="grid"></div>
</form>
<!-- load Dojo -->
<script src="/library/js/dojo/dojo/dojo.js"></script>
<script>
require([
'dojo/_base/declare',
'dgrid/Grid',
"dgrid/Selection",
"dgrid/editor",
"dgrid/Keyboard",
"dijit/form/Button",
"dijit/form/Textarea",
"dijit/form/DateTextBox",
"dojo/domReady!"
], function (declare, Grid, Selection, editor, Keyboard, Button, Textarea, DateTextBox) {
var renderRoleData = function(object, value, node, options) {
if (object.role_type == "TIME_RANGE") {
return new DateTextBox();
// no attempt to initialise this yet
}
else if (object.role_type == "MULTI_STRING") {
return new Textarea({
name: "myarea",
value: object.role_data.text,
style: "width:200px;"
});
}
//....more types
}
var columns = [
{
field: 'role_name',
label: 'Role name'
},
{
field: 'role_type',
label: 'Role type'
},
{
field: 'role_enabled',
label: 'Role enabled'
},
{
field: 'role_data',
label: 'Role data',
renderCell: renderRoleData
}
];
var grid = new (declare([ Grid, Selection, editor, Keyboard, Textarea, DateTextBox ]))({
columns: columns,
postCreate: function() {
var data = [
{
"role_dn": "some_ldap_dn1,dc=com",
"role_name": "Water Controller",
"role_type": "TIME_RANGE",
"role_enabled" : true,
"role_data" : {"start_date" : "20150601", "end_date" : "20150701"}
}, {
"role_dn": "some_ldap_dn1,dc=com",
"role_name": "Waste Controller",
"role_type": "MULTI_STRING",
"role_enabled" : true,
"role_data" : { "text": "The reason I need this is very long and complicated. The big long reason is just big and long and honestly you wouldn't care if I told you anwyay" }
}
];
this.renderArray(data);
}
}, 'grid');
});
</script>
</body>
</html>
Initially, I notice a few issues which might be causing this problem. Try the following instead:
declarearray that didn't belong in it, which may have been causing the problem.postCreateis now defined in an object passed straight todeclare. This object's properties will be mixed in after the constructors in the array, as opposed to properties of the object passed to the constructor when instantiating, which will simply override those properties straight on the instance. This also gives it access to callthis.inherited(arguments)which will run any previous mixins'postCreatefunction first.