dhtmlxDataSelector: Macro-Component for Organizing Your Data

Our team has developed several macro-components that won’t be officially included in the dhtmlxSuite package, but they represent some interesting and useful solutions that you can use in your apps. And today we are glad to introduce the first macro-component – dhtmlxDataSelector.

What is dhtmlxDataSelector?

dhtmlxDataSelector is a JavaScript component that will help you to overcome the limits of information that can be placed in the combobox. It represents rich select functionality with ability to get large sets of data out of the database, group and structure these data.


1) Advanced searching for flexible work with the data.

This feature is really convenient if you have the database with a huge number of employees, their addresses and some other details. Based on your needs you can group the data and set any nesting level.

rich select javascript

2) Easy integration with dhtmlxForm.

This ability increases the number of possible usage options of this component. You can easily integrate it in your app and start using it right now.

Rich select in form

3) Localization support.

This feature provides the ability to translate buttons and set caption to the window.

localization data selector

Apart from the described features, lost of others can be implemented in dhtmlxDataSelector. We are open to your suggestions.


Use the following instructions to start working with the component.

First you need to include dhtmlx.js/css and dhtmlxdataselector.js/css on your page.

Note: dhtmlx js/css should be inserted before dhtmlxdataselector js/css.

    <link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css"/>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxdataselector.css"/>
    <script src="codebase/dhtmlx.js"></script>
    <script src="codebase/dhtmlxdataselector.js"></script>

Then you need to create an instance of DataSelector:

var myDataSelector = new dhtmlXDataSelector({
    url:        "data_static.php",  // url to get data
    image_path: "codebase/imgs/",   // path for grid images
    icons_path: "codebase/imgs/"    // path to toolbar icons

After you inited DataSelector, you need to attach the onSelect event to handle value selected by the user:

var myDataSelector.attachEvent("onSelect", function(id, value){
    // your code here

And finally – show dialog window:


And that’s all. Quite easy, isn’t it?

If you’d like to use DataSelector as part of the form, you need the following init:

var formData = [
     type: "dataselector",
     url: "data_static.php",
     image_path: "codebase/imgs/",
     icons_path: "codebase/imgs/"
    ... other form items
var myForm = new dhtmlXForm("parentId", formData);

The package includes example that demonstrates how to get data from database and xml structure.

Download links

You may download dhtmlxDataSelector as a separate package if you are already using dhtmlxSuite. Follow the instructions given above to include the component.

Note: to make dhtmlxDataSelector work, you need dhtmlxSuite anyway. So, if you’d like to try a new component, you can download the package that contains dhtmlxSuite library together with dhtmlxDataSelector.

Advance your web development with DHTMLX

Gantt chart
Event calendar
Diagram library
30+ other JS components