New dojo dgrid widget not working & showing in a custom widget - dojo

Question

I am working on a dojo grid, which is the new dojo dgrid but i have the dgrid working by calling the id on a html markup file but i need to create a widget like thing that will have my grid in it and be able to access it via the html using the dojotype.
I have spend like three days working on that, but for some reason my grid wouldn't show if i declare it within a widget i created.
below is my code sample:
require([
"dojo/_base/declare", "dojo/dom-construct", "dojo/parser", "dojo/ready",
"dijit/_WidgetBase", "dijit/_TemplatedMixin", "dgrid/Grid", "dgrid/Keyboard",
"dgrid/Selection","dojo/text!./templates/dumHTML.html", "dojo/domReady!"
], function(declare, domConstruct, parser, ready, _WidgetBase, _TemplatedMixin, Grid, Keyboard, Selection, template) {
declare("Grid", [_WidgetBase, _TemplatedMixin], {
templateString: template,
widgetsInTemplate: true,
postCreate: function() {
var self = this;
this.inherited(arguments);
this._showGrid();
},
_showGrid: function() {
//json data string
var gridData =[
{'id': '10', 'filename':'budget.pdf','icon':'pdf'},
{'id': '20', 'filename':'thevampirediary.avi','icon':'xsl'},
{'id': '30', 'filename':'budget2.xsl','icon':'xsl'},
{'id': '40', 'filename':'budget3.doc','icon':'doc'},
{'id': '50', 'filename':'thevampirediary.avi','icon':'xsl'}
];
// Create a new constructor by mixing in the components
var DGrid = declare([Grid, Keyboard, Selection]);
var grid = new DGrid( {
columns: {
ID: {
label: " ",
field: "id",
hidden: true,
sortable: false,
formatter: function(id) {
return '<div style="visibility: hidden>'+id+' </div>';
}
},
filename: {
field: "filename",
label: "File name",
sortable: true,
formatter: function(filename) {
return '<div style="float:left ">'+filename+' </div>';
}
},
icon: {
field: "icon",
label:" ",
sortable: false,
formatter: function(icon) {
return '<img src="resources/' + icon + '.png" width="20px" hieght="20px"/>';
}
}
},
// for Selection; only select a single row at a time
selectionMode: "single",
// for Keyboard; allow only row-level keyboard navigation
cellNavigation: true
}, "grid");
grid.renderArray(gridData);
}
});
ready( function() {
// Call the parser manually so it runs after our widget is defined,
// and page has finished loading
parser.parse();
});
});

Answer 1

I am just a beginner of dgrid and meet the same problem. After reading this article, I resolve it. https://github.com/SitePen/dgrid/wiki/Working-with-Widgets
The solution is: mix DijitRegistry in Dgrid instance.
Here is my code. Hope it will be helpful for beginners. ModuleWithGuideBar is my custom widget(declared with TemplatedMixin, _WidgetsInTemplateMixin).
define([
"dojo/_base/declare",
"dijit/registry",
"common/widget/ModuleWithGuideBar",
"dgrid/OnDemandGrid",
"dgrid/Keyboard",
"dgrid/Selection",
"dgrid/extensions/DijitRegistry",
"dojo/store/Memory",
"dijit/layout/ContentPane"
], function (declare, registry, ModuleWithGuideBar, OnDemandGrid, Keyboard, Selection, DijitRegistry, Memory, ContentPane) {
return declare("app.management.module.event", [ModuleWithGuideBar], {
class:"module_event",
_grid:null,
postCreate:function () {
this.inherited(arguments);
var gridContainer = new ContentPane({region:'center'});
//add to data-dojo-attach-point
this.moduleContent.addChild(gridContainer);
var memoryStore = new Memory({data:[
{ first:"Bob", last:"Barker", age:89 },
{ first:"Vanna", last:"White", age:55 },
{ first:"Pat", last:"Sajak", age:65 }
]});
this._grid = new declare([OnDemandGrid, Keyboard, Selection, DijitRegistry])({
columns:{
first:{ label:"first" },
last:{ label:"last" },
age:{ label:"age" }
},
store:memoryStore
});
gridContainer.addChild(this._grid);
}
});
});