To initialize dataselect, you need to

1. include related js and css files
2. place container for the dataselect on a page
3. run dataselect initialiation

There are five files that need to be included

<script src="../../codebase/dhtmlxdataview.js" type="text/javascript"></script>
<script src="../../codebase/ext/linkpanel.js" type="text/javascript"></script>
<script src="../../codebase/ext/dhtmlx/dataselect.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxdataview.css"> 
<link rel="STYLESHEET" type="text/css" href="../../codebase/ext/dhtmlxdataselect.css">

There is no need to set sizes for HTML container of the DataSelect. The size will be set automatically, depending on width and height of the DataView item.

    <div id="select_container"></div>

To initilize DataSelect you need to pass an object with “container” and “view” elements. The other elements are not obligatory.

    var selector =  new dhtmlXDataSelect({
        empty : "click here to select value",
        value : "#id#",
        template: "<span class='dhx_strong'>#Maintainer#</span>",	
        container:"select_container",
        view:{
	    type:{
		template:"<span class='dhx_strong'>#Maintainer#</span>#Package# <span class='dhx_light'>#Version#</span>",
	    	height:35
	    }
	}
   });

Elements of the dhtmlXDataSelect constructor:

• container - the id of HTML container for the component;
• view - the object for DataView initialization;
• template - the template for the selected value
• empty - the value that is shown when no data is selected;
• value - the template for the value in the hidden input (the value for submit)

DataView object is accessible by selector.config.view. So, data can be loaded using load method of the DataView:

   selector.config.view.load("../common/data.xml");

• attachEvent - attaches handler for the custom event;
• select - selects object from the DataView by its ID;
• getSelected - returns ID of the selected object;
• clear - clears selection (if the “empty” is set, this value will be displayed);
• toggle - opens or closes DataView depending on its visible state;
• open - opens drop-down DataView;
• close - closes drop-down DataView

• onOpen - occurs after the DataView is opened;
• onBeforeChange - the event is fired before a value is changed;
• onAfterChange - called after value change;