Programmatic placement of Select Widget destroys Tab Containers

AnthonyLibetti — Sat, 07 Sep 2019 17:03:10 GMT

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?

_initLayers: function(layerInfoArray) {

this.layerInfoArray = layerInfoArray;

this.layerItems = [];

this.selectionSymbols = {};

html.empty(this.layerItemsNode);

array.forEach(

layerInfoArray,

lang.hitch(this, function(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(this, this._switchToDetails))

);

this.own(

on(

item,

"stateChange",

lang.hitch(this, function() {

//this.shelter.show();

this._getSelectableLayers().then(

lang.hitch(this, function(layerObjects) {

this.selectDijit.setFeatureLayers(layerObjects);

//this.shelter.hide();

})

);

})

)

);

// Note, this is the line referenced above

html.place(item.domNode, this.layerItemsNode);

item.startup();

this.layerItems.push(item);

})

);

</div>

<div>

<div>

<div id="selectBTN" class="select-dijit-container" data-dojo-attach-point="selectDijitNode"

style="display:block;">

</div>

</div>

</div>

</div>

</div>

</div>

Re: Programmatic placement of Select Widget destroys Tab Containers

AnthonyLibetti — Tue, 24 Sep 2019 14:59:25 GMT

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.

topic Re: Programmatic placement of Select Widget destroys Tab Containers in ArcGIS JavaScript Maps SDK Questions

Programmatic placement of Select Widget destroys Tab Containers

Re: Programmatic placement of Select Widget destroys Tab Containers