Some questions about Combo

Suite and Optimus Suite 5
#1

Hello, this is my first post and I would like to initiate it with a big thank you for developing such great code! Great job!

Now, to the reason why I took my time to register on this forum.

I am using the dhtmlxCombo for a intranet solution I am developing.
I have a multiple select which I have transformed into a dhtmlxCombo using:

var dhtmlxCombo__frm_accounttype = dhtmlXComboFromSelect("frm_accounttype");

dhtmlxCombo__frm_group.enableFilteringMode(false);
dhtmlxCombo__frm_group.enableOptionAutoHeight(true, 100);
dhtmlxCombo__frm_group.readonly(true);

This I do in order for the user to be able to select multiple options from a select list.

Now, to my questions:

QUESTION #1:
Can I make a “dummy” option to always be displayed at the top, and always visible when select loses focus?

Please select groups below Group 1 Group 2

There should be checkboxes (since I am using opt_type=“checkbox”) for all options EXCEPT the first one (in this example named as “dummy”). The first one is more like a header.

The dummy option should also be the only one visible when the select is closed:

[ Please select groups below ]
[ ( ) Group 1 ]
[ ( ) Group 2 ]

If user selects eg. “Group 2” and then clicks outside the select, it should always display the “Please select groups below”.

QUESTION #2:
Right now, you must actively click on the checkboxes in order to select/deselect them.
Can you make it so that the checkboxes are selected/deselected by pressing the entire text value? In my example, if I would press “Group 1” or “Group 2”, I want it to toggle the checkboxes selected/not selected.

Thank you very much in advance!

Kind regards,
Nick

#2

Hello,

You need to use private properties to achieve the described functionality:

[code]/hides header checkebox/
dhtmlxCombo__frm_group.DOMelem_checkbox.style.display=“none”;
/hides checkbox for the “dummy” options/
dhtmlxCombo__frm_group.getOption(“dummy”).content.firstChild.style.display=“none”;

/the new “onclick” event handlers for all options/
var options = dhtmlxCombo__frm_group.optionsArr;
for(var i=0; i<options.length; i++){
options[i].content.onclick = function(e){
(e||event).cancelBubble=true;
dhtmlxCombo__frm_group.DOMelem_input.focus();
this.firstChild.checked = !this.firstChild.checked;
}
}[/code]

#3

Thank you for the prompt reply Alexandra. I really appreciate the support!

While testing the new functionality out, I also found another thing that I want to accomplish.

#1: Hide the “dummy” option from the dropdown menu once opened
I do only want to show the “dummy” option as the selected value, it should never be rendered
inside the menu that opens once you press the combo menu.

[ DUMMY/HEADER ]
[ ( ) First option ]
[ ( ) Second option ]

I accomplised this by adding this code to your example:

dhtmlxCombo__frm_group.getOption("dummy").content.style.display = "none";

#2: Do not change value of selected option using arrow keys
If you toggle inside the values of the combo with your arrow keys, you will also change the
header/selected option to the one you are currently focusing on with your arrow keys.
I only want to be able to toggle between the values in the dropdown with the keys and allow
the checkboxes to be checked/unchecked by pressing space, but the header should always
remain the “dummy” option value.

[ DUMMY/HEADER ]
[ ( ) First option ]
[ ( ) Second option ]

When using the arrow keys, it becomes like this:

[ Second option ] <<< This one should remain “DUMMY/HEADER” at all time.
[ ( ) First option ]
[ ( ) Second option ]

[ DUMMY/HEADER ]
[ ( ) First option ] <<<<<< You should be able to press Space to toggle checkbox
[ ( ) Second option ] <<<<<< You should be able to press Space to toggle checkbox

Please assist on this one. After this I think I have the combo as I want it for this case.

Thank you once again in advance!

#4

Hide the “dummy” option from the dropdown menu once opened

In this case there is no need to add “dummy” option:

Group 1 Group 2

You may place the “Please select groups below” into the header using setComboText method:

var dhtmlxCombo__frm_accounttype = dhtmlXComboFromSelect(“frm_accounttype”);
dhtmlxCombo__frm_accounttype.setComboText(“Please select groups below”);

This one should remain “DUMMY/HEADER” at all time.

try using combo events:

dhtmlxCombo__frm_group.attachEvent(“onSelectionChange”,setHeaderText);
dhtmlxCombo__frm_group.attachEvent(“onChange”,setHeaderText);

function setHeaderText(){
dhtmlxCombo__frm_group.setComboText(“Please select groups below”);
}

#5

Hello and thank you for your reply.

Still, the header is not kept while changing values. I am using the code below:

         function dhtmlxCombo_setHeaderText(dhtmlxComboObj, headertext){
              dhtmlxComboObj.setComboText(headertext);
         }

         var dhtmlxCombo__frm_group = dhtmlXComboFromSelect("frm_group");

         dhtmlxCombo__frm_group.enableFilteringMode(false);
         dhtmlxCombo__frm_group.enableOptionAutoHeight(true, 100);
         dhtmlxCombo__frm_group.readonly(true);

         dhtmlxCombo__frm_group.DOMelem_checkbox.style.display = "none";
         dhtmlxCombo__frm_group.setComboText("Please select groups below:");
         dhtmlxCombo__frm_group.attachEvent("onSelectionChange", dhtmlxCombo_setHeaderText(dhtmlxCombo__frm_group, "Please select groups below:"));
         dhtmlxCombo__frm_group.attachEvent("onChange", dhtmlxCombo_setHeaderText(dhtmlxCombo__frm_group, "Please select groups below:"));

Please assist. It seems like the

dhtmlxCombo_setHeaderText(dhtmlxCombo__frm_group, "Please select groups below:"));
         dhtmlxCombo__frm_group.attachEvent("onChange", dhtmlxCombo_setHeaderText(dhtmlxCombo__frm_group, "Please select groups below:"));

is only called upon page load, and then never again, even though I am actually changing the value of the combo using either my mouse or arrows keys.

Thank you in advance.

#6

You have incorrectly set event handlers - check my previous reply. Moreover, these handlers do not take any parameters:

[code]function dhtmlxCombo_setHeaderText(){
dhtmlxCombo__frm_group.setComboText(“Please select groups below:”);
}

dhtmlxCombo__frm_group.attachEvent(“onSelectionChange”, dhtmlxCombo_setHeaderText);
dhtmlxCombo__frm_group.attachEvent(“onChange”, dhtmlxCombo_setHeaderText);[/code]

#7

Allright, thanks for the information.
I’ve made a dummy function to call my real function which relies in a external js file. Now its working as supposed.

Another issue is that you cannot toggle the checkbox of the currently focused option with your space key. Do you have a solution for that as well? That will really make my day!

Thank you in advance!

#8

Another issue is that you cannot toggle the checkbox of the currently focused option with your space key. Do you have a solution for that as well?

There is not such a solution