AnsweredAssumed Answered

Using Dojo widgets in a Custom Templated widget

Question asked by kramer_usc on Aug 28, 2013
Latest reply on Aug 28, 2013 by kramer_usc
Hi all,
Would somebody be willing to post a sample of declaring Dojo widgets (e.g. button, tabcontainer, etc.) inside a HTML template for a custom widget?  From what I read, this is possible and it seems that some of the out-of-the-box Esri widgets use them as well.  I have tried many examples from the Dojo site, but they are not rendering in my custom widget.  For example, the tab container does not even show up and the button does not get rendered as a Dojo button.  I am using Esri JS API 3.6.

My template file looks like this: 

<div data-dojo-attach-point="containerNode" style="margin: auto;">
<div id="siteListView" data-dojo-attach-point="siteListView" style="margin: 5px auto 10px auto;">
  <h3 data-dojo-attach-point="nameNode">${name}</h3>
  <button data-dojo-attach-event='onclick: showAddSite' style="margin: 5px auto 10px auto;">Add Site</button>
  <div data-dojo-attach-point="gridDiv" id="gridDiv"></div>
</div>
<div id="itemView" data-dojo-attach-point="itemView" style="margin: 5px auto 10px auto; visibility: hidden; display:none;">
        <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="myButton">MyButton</button>
</div>
    </div>

I can get the Dojo button to work, if I create it programmatically in the startup() function and then replace the DIV in the template file, but I can't get it to work by declaring it directly in the HTML file.  The TabContainer does not work using either method. 

Here is the code for top part of my Custom Widget JS file:

define([
    "dojo/_base/declare",
    "dojo/_base/connect",
    "dojo/_base/array",
    "dojo/_base/lang",
    "dojo/_base/event",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!./templates/EditSite.html",
"dojo/dom-style",
"dojo/_base/fx",
"dojo/on",
"dojo/mouse",
    "dijit/Dialog",
    "esri/toolbars/draw",
    "esri/layers/FeatureLayer",
    "esri/tasks/QueryTask",
    "esri/tasks/query",
    "esri/request",
    "esri/graphic",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/SimpleLineSymbol",
    "dojo/_base/Color",
    "dijit/layout/TabContainer",
    "dijit/layout/ContentPane",
    "dijit/form/Button",
    "dijit/form/CheckBox",
    "dijit/form/RadioButton"
],
function (declare, connect, arr, lang, event, _WidgetBase, _TemplatedMixin, template, domStyle, baseFx, on, mouse, Dialog, Draw,
    FeatureLayer, QueryTask, Query, esriRequest, Graphic, SimpleFillSymbol, SimpleLineSymbol, Color, TabContainer, ContentPane, Button, CheckBox, RadioButton) {
    var Widget = declare("modules.edit.EditSite", [_WidgetBase, _TemplatedMixin], {
        constructor: function (options) {
            var _self = this;

// Our template - important!
            this.templateString = template;

            this.widgetsInTemplate = true;

....

Thanks!

Ian

Outcomes