dhtmlxDataSelector: Macro-Component for Organizing Your Data

| Comments (6)

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.

Features

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. View demo.

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. View demo.

Rich select in form

3) Localization support.

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

localization data selector

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

Usage

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.

<head>
    <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>
</head>

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:

myDataSelector.show();

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.

Comments

  1. cemang May 10, 2015 at 2:49 pm

    Very good

  2. Mike May 11, 2015 at 6:04 pm

    Is there some documentation available?

    • Ivan (DHTMLX team) May 11, 2015 at 7:02 pm

      Hi Mike,

      In general, you may find all the necessary info on how to work with dhtmlxDataSelector in the blog post above. But you may specify what information you need, in case if we have missed something.

  3. Brian May 12, 2015 at 4:49 pm

    Very nice. Now I am really curious for the next mini component!

  4. RIZKA ARIFIANTO May 29, 2015 at 8:14 am

    Great…similar to LOV.
    Is there a searchable function on this object?

    • Ivan (DHTMLX team) May 29, 2015 at 7:59 pm

      Hi Rizka, please clarify what do you mean exactly. We’re waiting for suggestions to extend the functionality of dhtmlxDataSelector. So you’re welcome to share your ideas either here in comments, or contact us at support@dhtmlx.com.

Leave a Reply