Some questions about Combo

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

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]

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!

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”);
}

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.

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]

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!

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