CODEWITHSUNDEEP
javascriptdojodgrid
Naci
Naci

Reputation: 231

Dojo widget to display a dgrid

I have been working to create a simple templated widget that contains a dgrid using dojo. Here is my code in plunker:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css" />
</head>
<body class="claro">
  <div id="myContainer"></div>
  <script type="text/javascript">
    var dojoConfig = {
      async: true,
      parseOnLoad: true,
      packages: [{
        name: 'dgrid',
        location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
      }, {
        name: 'myApp',
        location: window.location.href.replace(/\/$/, "")
      }]
    }
  </script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js"></script>
  <script type="text/javascript">
    require(["dojo/dom", "dojo/_base/array", "myApp/SimpleTemplatedGridWidget", "dojo/domReady!"], function(dom, arrayUtil, MyWidget) {
      var widget = new MyWidget.placeAt(myContainer);
    });
  </script>
</body>
</html>

SimpleTemplatedGridWidget.js

define([
     "dijit/registry",
     "dojo/_base/declare",
     "dgrid/OnDemandGrid",
     "dgrid/extensions/DijitRegistry",
     "dijit/_TemplatedMixin",
     "dojo/text!./SimpleTemplate.html"
],
function (registry, declare, Grid, DijitRegistry, _TemplatedMixin, template) {
    return declare([_WidgetBase, _TemplatedMixin], {

        data : [
            { first: 'Bob', last: 'Barker', age: 89 },
            { first: 'Vanna', last: 'White', age: 55 },
            { first: 'Pat', last: 'Sajak', age: 65 }
        ],

        columns : {
            first: 'First Name',
            last: 'Last Name',
            age: 'Age'
        },

        CustomGrid : declare([Grid, DijitRegistry]),

        postCreate: function() {
            myGrid = new CustomGrid({
                columns: columns,
                idProperty: "id"
            }, this.AttachGrid);
            myGrid.renderArray(data);
            myGrid.startup();
        }       
    });
});

SimpleTemplate.html

<div data-dojo-attach-point='AttachGrid'></div>

I am seeing errors I can't decipher both locally and at plunker. What might I be missing?

Upvotes: 1

Views: 304

Answers (1)

Castro Roy
Castro Roy

Reputation: 7823

You have serious errors in your code, some are javascript basics, others of dojo.

Your code 

var widget = new MyWidget.placeAt(myContainer);

Should be 

var widget = new MyWidget().placeAt(myContainer);

Also, myContainer is confusing, to broad, I recommend using dojo/dom that you already included 

var widget = new MyWidget().placeAt(dom.byId('myContainer'));

Now, about your widget, your widget is extending _WidgetBase but it is not included, so 

define([
     "dijit/registry",
     "dojo/_base/declare",
     "dgrid/OnDemandGrid",
     "dgrid/extensions/DijitRegistry",
     "dijit/_WidgetBase", //You are missing this module
     "dijit/_TemplatedMixin",
     "dojo/text!./SimpleTemplate.html"
],
function (
    registry, 
    declare, 
    Grid, 
    DijitRegistry, 
    _WidgetBase, //Also include it here
    _TemplatedMixin, 
    template
    ) {

When extending _TemplatedMixin we need to define the templateString that should be a template loaded with dojo/text!.... or an static template, in your case 

    return declare([_WidgetBase, _TemplatedMixin], {
        templateString: template, //need to add

Now, your postCreate function is referencing a lot of undefined variables, that looking to your code, i'm assuming you want to get the properties of the widget itself, so 

        postCreate: function() {
            myGrid = new this.CustomGrid({
                columns: this.columns,
                idProperty: "id"
            }, this.AttachGrid);
            myGrid.renderArray(this.data);
            myGrid.startup();
        }

note that i've added this. in the front of columns, data and CustomGrid;

This changes solve the most of your issues, just remaining one complaining about an already registered widget that I solved by removing the DijitRegistry module as I don't know what it does and is use to.

I recommend you some links:

Creating Template-based Widgets
Understanding _WidgetBase

Hope it helps

Upvotes: 2

Related Questions