how can two separate webcomponents communicate ?

Hi All ,

I have two separate webcomponent - one is button and another is context menu . My objective is to show the context menu on the click of the button . But what it is happening is , the context menu is showing throughout the screen on the right click . Please find the code below :

Context Menu Js :

 $scope.api.show = function(Id , contextMenuVisible) {
    		
			 $scope.Id = Id;
			 $scope.contextMenuVisible = contextMenuVisible;
			 
			 $scope.contextMenuOptions = {
	    		  
	    		  dataSource: contextMenuItems,
	    		    width: 200,
	    		    position: {
	    		    	at: 'bottom left'
				    },
				    target: "#" + Id,
				    showEvent: "",
			        bindingOptions: {
			            visible: $scope.contextMenuVisible
			        },
					onItemClick: function(e){
						if (!e.itemData.items) {
				        	DevExpress.ui.notify("The \"" + e.itemData.text + "\" item was clicked", "success", 1500);
				        	$scope.handlers.onActionMethodID(e.itemData.text);
				        }
				    }   
							    
	    	  }	
			 
			  
		}

Please find the servoy code on the on action of the button :

elements.Context_Menu_1.show(elements.Button_1.getMarkupId() , true);

Please provide some suggestions.

You must do this through the server. Using properties, methods or events. You should never make webcomponents talk to each other clientside.

Hi ,

Please provide some suggestions . Please share how can I can achieve this.

Please provide some help .

Thanks solved using binding options.