DHTMLX Touch documentation

How to attach events & force elements to react on them?

This article covers events (see the related events for the components here).

Common information

To attach any event you need to use the attachEvent() method.

$$("someId").attachEvent("onItemClick", function ())
  • Event names are case-insensitive.
  • You can attach an event to any component but not to its controls.
  • '$$(“someId”)' lets you refer to any component (and its controls). Just set an id.

Example

We'll take a simple example: a toolbar that contains a label, the click on which opens a window.

Our actions:

  1. Define a component ('toolbar').
  2. Specify its id ('bottomBar').
  3. Use the id to attach event ('$$(“bottomBar”).attachEvent()')
  4. Define a function that creates a window ('Open()')
<body>
	<script type="text/javascript" charset="utf-8">
                dhx.ui({
			rows:[{ view:"toolbar", type:"MainBar", id:"bottomBar", data:[ // specifies toolbar and its label							
		                                                        {type:"label", label: "Open a window", align:"center"}]
                        }]
		});
		$$("bottomBar").attachEvent("onItemClick",function Open(){   
			 dhx.ui({
	                    view:"window",
	                    head:{ view:"toolbar", type:"MainBar",data:[{
                                                                         type:"label", label:"Window", align:"left"},
		                                                        {type:"button", label:"Close", align:"right"}]
			    },
			    body:{},
			    top:70,
			    left:50,
			    move:true
                         })
                })
	</script>
</body>
</html>