I'm using Robert's eSearch Widget. If the widget is maximized, I'd like the user to be able to click (or touch) a graphic and have the result list in the widget scroll to the record (or list item) that corresponds to the graphic. Has anyone done anything similar with scrolling a list in the WAB that might get me started?
Solved! Go to Solution.
Sebastian,
Great Idea. I will add this in the next release.Here are the needed changes:
Widget,js (lines 6-10)
_searchResultListByOID: function (OID) { for (var i = 0; i < this.list.items.length; i++) { var item = this.list.items; var point = item.centerpoint; if (item.OID === OID) { var itemDom = dojo.byId("uniqname_0_1" + item.id); if(itemDom){ itemDom.scrollIntoView(false); } this.list.setSelectedItem("uniqname_0_1" + item.id); if (this.map.infoWindow && this.config.enablePopupsOnResultClick) { this.map.infoWindow.setFeatures([item.graphic]); if (this.map.infoWindow.reposition) { this.map.infoWindow.reposition(); } this.map.infoWindow.show(point); } } } },
List.js (add this new function)
setSelectedItem: function(id) { var item = this._getItemById(id); if (!item) { return; } domClass.replace(id, this._itemSelectedCSS, ((item.alt) ? this._itemAltCSS:this._itemCSS)); if (this._selectedNode) { domClass.replace(this._selectedNode, ((item.alt)? this._itemAltCSS:this._itemCSS), this._itemSelectedCSS); } this._selectedNode = id; }
Sebastian,
Great Idea. I will add this in the next release.Here are the needed changes:
Widget,js (lines 6-10)
_searchResultListByOID: function (OID) { for (var i = 0; i < this.list.items.length; i++) { var item = this.list.items; var point = item.centerpoint; if (item.OID === OID) { var itemDom = dojo.byId("uniqname_0_1" + item.id); if(itemDom){ itemDom.scrollIntoView(false); } this.list.setSelectedItem("uniqname_0_1" + item.id); if (this.map.infoWindow && this.config.enablePopupsOnResultClick) { this.map.infoWindow.setFeatures([item.graphic]); if (this.map.infoWindow.reposition) { this.map.infoWindow.reposition(); } this.map.infoWindow.show(point); } } } },
List.js (add this new function)
setSelectedItem: function(id) { var item = this._getItemById(id); if (!item) { return; } domClass.replace(id, this._itemSelectedCSS, ((item.alt) ? this._itemAltCSS:this._itemCSS)); if (this._selectedNode) { domClass.replace(this._selectedNode, ((item.alt)? this._itemAltCSS:this._itemCSS), this._itemSelectedCSS); } this._selectedNode = id; }
Robert,
Works splendidly. Once again you've saved me a good number of hours!
One minor change. In Robert's sample code, replace the two instances of:
"uniqname_0_1"
with:
this.list.id.toLowerCase()
I found that if you have more than one widget that uses a list, then depending on which widget is created first, the unique name may be "uniqname_0_1" or "uniqname_0_2" for the list.