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?
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.
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.
3) Localization support.
This feature provides the ability to translate buttons and set caption to the window. View demo.
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"/>
Then you need to create an instance of DataSelector:
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:
// 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:
... other form items
var myForm = new dhtmlXForm("parentId", formData);
The package includes example that demonstrates how to get data from database and xml structure.
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.