CODEWITHSUNDEEP
javascriptdojowidget
user1383163
user1383163

Reputation: 597

dojo data grid in custom widget is not rendering

hi all i have created a custom widget which in the future will contain more than a data grid however i have had considerable difficulty trying to get the data grid to render.

I have no errors and all the following seems to be being called as i suspect; perhaps it is an asynch issue?

Any help on this would be great, my code as followed.

AssetGridWidget.js

define([
"dojo/_base/declare",
"dojo/_base/fx",
"dojo/_base/lang",
"dojo/dom-style",
"dojo/mouse",
"dojo/on",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!./templates/AssetGridWidget.html",
"dojox/grid/DataGrid",
"dojo/data/ItemFileWriteStore",
"dojo/store/Memory", 
"dojo/data/ObjectStore"]
, function(declare, baseFx, lang, domStyle, mouse, on, _WidgetBase, _TemplatedMixin, template,      DataGrid,ifilereadstore, Memory, ObjectStore){
return declare([_WidgetBase, _TemplatedMixin], {
    widgetInTemplate : true,
    templateString: template,

postCreate: function(){

     this.layout =
            [
                { name: 'Name', field: 'name', width: '100px' },
                { name: 'Color', field: 'color', width: '100px' }
            ];
     this.data = {
                data :
                {items :[
                { name : 'John Doe', color: 'green' },
                { name : 'Jane Doe', color: 'red' }
                ],
                label:'name',
                identifier:'color'
                }
            };

            this._employeeStore = new Memory({data: this.data, idProperty: "name"});
            this._dataStore = ObjectStore({objectStore: this._employeeStore});
      this.grid = new DataGrid
        (
            {
            noDataMessage: "Hazza",
            store: this._dataStore,
             query: { id: "*" },
            autoRender : true,
            structure: this.layout
            },
            "grid" 
        );
    this.inherited(arguments);

},

startup: function() {
            this.grid.startup();
        }

});
});

my template is as follows:

AssetGrididget.html

<div>

    <div data-dojo-attach-point="grid" style="width: 800px; height: 800px;"></div>

</div>

finally the page i am calling it from

Index.html

<head>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
</head>

<body>

<div id="gridContainer" style="width: 300px; height: 300px;"></div>

<script>
require(["dojo/request", "dojo/dom", "dojo/_base/array", "tartarus/widget/AssetGridWidget", "dojo/domReady!"],
function(request, dom, arrayUtil, AssetGridWidget){

 var gridly = new AssetGridWidget();
 gridly.placeAt("gridContainer");
 gridly.startup();
});
</script>

</body>

I have been smacking my head against a brick wall for hours on this so any help is greatly appreciated!

Upvotes: 2

Views: 680

Answers (1)

Ken Franqueiro
Ken Franqueiro

Reputation: 10559

You are passing "grid" as the second argument to the DataGrid constructor. This will attempt to find a DOM node in the document with the ID grid and replace that with the grid.

However, based on your template, it looks like what you're actually intending to do is to replace your grid attach point with the grid instead. Instead of "grid", your second argument to the constructor should be this.grid.

(I might also suggest naming the attach point gridNode instead to distinguish it, since you are immediately assigning the actual grid instance to this.grid thereafter.)

Upvotes: 2

Related Questions