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. <\/p>\n
Features<\/strong><\/p>\n 1) Advanced searching for flexible work with the data. <\/p>\n 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.<\/p>\n 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.<\/p>\n 3) Localization support.<\/p>\n This feature provides the ability to translate buttons and set caption to the window.<\/p>\n Apart from the described features, lost of others can be implemented in dhtmlxDataSelector. We are open to your suggestions.<\/p>\n Usage<\/strong><\/p>\n Use the following instructions to start working with the component. <\/p>\n First you need to include dhtmlx.js\/css and dhtmlxdataselector.js\/css on your page. <\/p>\n Note: dhtmlx js\/css should be inserted before dhtmlxdataselector js\/css.<\/p><\/blockquote>\n Then you need to create an instance of DataSelector:<\/p>\n After you inited DataSelector, you need to attach the onSelect event to handle value selected by the user:<\/p>\n And finally – show dialog window:<\/p>\n And that’s all. Quite easy, isn’t it?<\/p>\n If you’d like to use DataSelector as part of the form, you need the following init:<\/p>\n The package includes example that demonstrates how to get data from database and xml structure.<\/p>\n Download links<\/strong><\/p>\n You may download dhtmlxDataSelector as a separate package<\/a> if you are already using dhtmlxSuite. Follow the instructions given above to include the component.<\/p>\n![\"rich](\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2015\/05\/data-selector.png\")
\n
\n2) Easy integration with dhtmlxForm<\/a>. <\/p>\n![\"Rich](\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2015\/05\/attach-to-form.png\")
<\/p>\n![\"localization](\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2015\/05\/localization-fr.png\")
<\/p>\n
\n <<\/span>link rel=<\/span>"stylesheet"<\/span> type=<\/span>"text\/css"<\/span> href=<\/span>"codebase\/dhtmlx.css"<\/span>\/><\/span>
\n <<\/span>link rel=<\/span>"stylesheet"<\/span> type=<\/span>"text\/css"<\/span> href=<\/span>"codebase\/dhtmlxdataselector.css"<\/span>\/><\/span>
\n <<\/span>script src=<\/span>"codebase\/dhtmlx.js"<\/span>><\/<\/span>script><\/span>
\n <<\/span>script src=<\/span>"codebase\/dhtmlxdataselector.js"<\/span>><\/<\/span>script><\/span>
\n<\/<\/span>head><\/span><\/div><\/div>\n
\n url:<\/span> "data_static.php"<\/span>,<\/span> \/\/ url to get data<\/span>
\n image_path:<\/span> "codebase\/imgs\/"<\/span>,<\/span> \/\/ path for grid images<\/span>
\n icons_path:<\/span> "codebase\/imgs\/"<\/span> \/\/ path to toolbar icons<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
\n \/\/ your code here<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
\n {<\/span>
\n type:<\/span> "dataselector"<\/span>,<\/span>
\n ...,<\/span>
\n url:<\/span> "data_static.php"<\/span>,<\/span>
\n image_path:<\/span> "codebase\/imgs\/"<\/span>,<\/span>
\n icons_path:<\/span> "codebase\/imgs\/"<\/span>
\n }<\/span>,<\/span>
\n ... other<\/span> form items
\n]<\/span>;<\/span>
\nvar<\/span> myForm =<\/span> new<\/span> dhtmlXForm(<\/span>"parentId"<\/span>,<\/span> formData)<\/span>;<\/span><\/div><\/div>\n