DHTMLX Docs & Samples Explorer

Index
dhtmlxDataView

## DataSelect

### Initialization

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");

### API

- 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

### Events

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