Using Dojo widgets in a Custom Templated widget

[IanKramer3]

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

[ZachLiu1 · Accepted solution]

Hi, Ian,

I think only include "_TemplatedMixin" will not tell your Widget to render Dijits within it.
To make your widget rendered successfully, you may need also include "_WidgetsInTemplateMixin" in your declare function.
This mixin tells the template system that your template has other widgets in it and to instantiate them when your widget is instantiated.

Dojo Toolkit has good explanation at the end of this page.

http://dojotoolkit.org/documentation/tutorials/1.9/templated/

Please let me know if that works for you.:)

[IanKramer3]

Hi Zach, that did solve the issue with the buttons and other form dijits.  Thank you!  The TabContainer still does not work with that method, but from what I have read in other forums, this may be a bug in the latest version of Dojo.  I will use another layout instead of the TabContainer.