Programmatic placement of Select Widget destroys Tab Containers

326
1
Jump to solution
09-07-2019 10:03 AM
AnthonyLibetti
New Contributor II

I am currently importing the Select Widget that comes with Arcgis WAB into another custom widget. While using dojo/_base/lang html.place() I have noticed that the selectDijitNode and layerItemsNode were being placed in the custom widget irrespective of the format and tabs that I would put them in. The Select and Clear Selection buttons are placed on top of the other html elements making the view very unattractive. I tried putting a .watch() handler on the tabContainer and hiding the element when not on the correct tab, but when I set the display value from block to hide the tabs get destroyed. Is anyone familiar with a programmatic way to place and populate the node while respecting the tab format?

_initLayersfunction(layerInfoArray) {
      this.layerInfoArray = layerInfoArray;
      this.layerItems = [];
      this.selectionSymbols = {};

      html.empty(this.layerItemsNode);

      array.forEach(
        layerInfoArray,
        lang.hitch(thisfunction(layerInfo) {
          var visible = layerInfo.isShowInMap() && layerInfo.isInScale();

          var item = new SelectableLayerItem({
            layerInfo: layerInfo,
            checked: true,
            layerVisible: visible,
            folderUrl: this.folderUrl,
            allowExport: this.config ? this.config.allowExport : false,
            map: this.map,
            nls: this.nls
          });

          this.own(
            on(item"switchToDetails"lang.hitch(thisthis._switchToDetails))
          );
          this.own(
            on(
              item,
              "stateChange",
              lang.hitch(thisfunction() {
                //this.shelter.show();
                this._getSelectableLayers().then(
                  lang.hitch(thisfunction(layerObjects) {
                    this.selectDijit.setFeatureLayers(layerObjects);
                    //this.shelter.hide();
                  })
                );
              })
            )
          );
         // Note, this is the line referenced above
         html.place(item.domNodethis.layerItemsNode);
          item.startup();

          this.layerItems.push(item);
        })
      );

<div data-dojo-type="dijit/layout/BorderContainer">
   <div style="height: 500px;">
    <div data-dojo-type="dijit/layout/TabContainer" doLayout="true" id="tabContainer">
      <div data-dojo-type="dijit/layout/ContentPane" title="Create Filter" id="filtTab" data-dojo-props="selected:true">
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" title="Select Filter" id="selectTab">
         <div>
          <div class="layer-node" data-dojo-attach-point="layerListNode">
            <div>
              <div id="selectBTN" class="select-dijit-container" data-dojo-attach-point="selectDijitNode" 
                  style="display:block;">
              </div>
              <div class="seperator"></div>
            </div>
            <div class="layer-nodes">
              <div class="layer-items" data-dojo-attach-point="layerItemsNode"></div>
            </div>
          </div>
          <div class="details-node" data-dojo-attach-point="detailsNode">
            <div class="header">
              <div class="switch-back jimu-float-leading" data-dojo-attach-point="switchBackBtn">
                <div class="feature-action" data-dojo-attach-point="switchBackIcon"></div>
              </div>
              <div class="layer-name jimu-ellipsis" data-dojo-attach-point="selectedLayerName"></div>
            </div>
            <div class="content" data-dojo-attach-point="featureContent">
            </div>
          </div>
      </div>
   </div>
</div>
0 Kudos
1 Solution

Accepted Solutions
AnthonyLibetti
New Contributor II

To resolve this issue I set the default HTML display of the selectWidget node to "none". By attaching a watch() method to detect changes between the selected tabs, I was able to set the display of the selectWidget to "block" when the user was on the appropriate tab.

View solution in original post

1 Reply
AnthonyLibetti
New Contributor II

To resolve this issue I set the default HTML display of the selectWidget node to "none". By attaching a watch() method to detect changes between the selected tabs, I was able to set the display of the selectWidget to "block" when the user was on the appropriate tab.