I am using jstree to create a tree without checkboxes. In such a tree a click selects one node of the tree and deselects all others. To select multiple nodes one has to do ctrl + click (as examplified by the jstree demo). Is there a way to change this default to the more similar to checkbox default, which is click to select, click again to deselect?
If you're ok with using checkboxes and your only reservation is the dependence on one another, try using the checkboxes plugin but set "three_state" to false.
From JSTree:
$.jstree.defaults.checkbox.three_state: a boolean indicating if checkboxes should cascade down and have an undetermined state. Defaults to true.
Related
I need to show a tree where user can select specific nodes.
When click a checkbox, it should NOT automatically select all it's ancestors and decedents but only check the checkbox on which user has clicked.
Update
Example
When I select Cell Phones, it should not select all it's ancestors as you see in the image. Same way assume it has 3 children iPhone, Nokia, Samsung then they also should not be affected by whether I select Cell Phone or not.
There are couple of option we need to set for that.
'keep_selected_style': false,
'three_state': false,
'cascade': ''
Here is a fiddle to achieve the effect I mentioned.
http://jsfiddle.net/m83gjxvr/
I have a list of radio buttons that I update programmatically based upon a user's selection from a different list. This code properly finds the radio button that matches the selected item and selects it, but it doesn't deselect the previously selected radio button.
$('#major_groups input[type=radio]').each(function(){
if($(this).attr("value") == group_name){
$(this).prop("checked",true).checkboxradio('refresh');
}
});
All of the radio buttons in the major_groups div have the same name, so I thought selecting one would unselect the others. I got it to work by looping through the buttons again and refreshing all of them, but this seems inefficient.
Also, will .prop("checked",true) fire the change event?
What about just triggering a click event on the radio button, something like this:
$('#major_groups input[type=radio]').each(function(){
if($(this).attr("value") == group_name){
$(this).click();
}
});
Your each loop will only call refresh on the radio with specific value, and will not be called on others in the same group. The actual inputs of the group will be automatically unchecked but your plugin won't recognize the ones that are deselected unless you refresh them too.
Try this:
var $radios=$('#major_groups input[type=radio]');
/* first check the appropriate radio*/
var $radioToUpate=$radios.filter(function(){
return this.value=group_name;
}).prop("checked",true);
/* then refresh all radios with same name*/
$radios.filter('[name="'+ $radioToUpate.attr('name') +'"]').checkboxradio('refresh');
A link to the plugin docs might be helpful to see if plugin has methods to handle the property change that might take care of the whole group
So I'm using the pretty nice jQuery plugin, Chosen; http://harvesthq.github.com/chosen/
What I'm doing is actually working with TWO Chosen style dropdowns in an 'either/or' fashion, ie the user needs to select an option from one OR the other.
So when the user selects one of the dropdowns, the other one (via javascript) gets set back to its default disabled value.
Both dropdowns are backed by ONE hidden parameter to actually hold the selected value, no matter which dropdown it came from. This is populated by having listeners on both dropdown's on the .chosen().change() event.
The only problem is, it doesn't appear to fire a "change" event when the user selects one of the first options in either dropdown, I guess as this appears to be the already selected option and is therefore not a "change". But both dropdowns actual first option (ie in the jsp) is a disabled option with the normal "Please select" text.
Is there a way to fire the change event even if the option selected was already selected? Or is there just a "select" event that fires even if there hasn't been a change?
you can use .trigger("change"), or .change() on your jquery object to manually trigger the change event.
This worked for me:
//Get the dynamic id given to your select by Chosen
var selId = $('your_select').attr('id');
//Use that id to remove the dynamically created div (the foe select box Chosen creates)
$('#'+ selId +'_chzn').remove();
//Change the value of your select, trigger the change event, remove the chzn-done class, and restart chosen for that select
$('#'+selId).val('your_new_value').change().removeClass('chzn-done').chosen();
In a nutshell you are hard reseting chosen for your select. There might be an easier way than this, but this worked for me.
I just had the same problem using Select2 plugin (remake of Chosen plugin).
I forgot the line "allowClear: true" when I 've declared the Combobox as a select2 one.
$('#selectLabelMap').select2({
placeholder: "Sélectionner un label",
allowClear: true // <= don't forget "allowClear: true (re-init the comboBox)
}
Trigger the change first time when (DOM) is ready.
jQuery(function ($) {
$('#myselect').trigger("change");
});
I'm using jQuery to listen to changes to a <select multiple> element. Is there some way of determining, from the event I'm given, which options in the select have changed (been selected or de-selected)?
I know I can loop over the select's children to figure out which are selected, but I specifically need to know which ones have just been changed when the event comes in.
So, for example, if the select contains the options { A, B, C }, I need to be able to tell when the user control-clicks to add B to the selection, or when the user clicks normally to change the selection from { A, B } to C alone.
Well, AFAIK you cannot do it by any simple way. As user can select multiple options by draging or using keyboard etc. However you can store the default state of the SELECT into an array of selected options/IDs and compare/update it whenever onchange event is fired.
You can get the selected option by accessing event.target (FF) and event.srcElement(IE). And at any given point you can find what are all the selected options using jQuery -
$('id of the element').find(':selected')
I would like to implement windows style multi-selection:
when user holds CTRL key and selects several nodes of the tree.
Dynatree (from here http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html) by default has checkboxes for node selection which my client doesn't seem to like.
My question is, is it possible to implement what I need using provided set of callbacks?
also, curently, when I hold CTRL key and click on the node, it opens a new window.
Is there any way to suppress this functionality? i am guess I would have to do through CSS?
Have a look at the sample and source code here
http://wwwendt.de/tech/dynatree/doc/sample-select.html
The last example on that page uses the checkbox: false tree option to hide the checkboxes.
The onClick handler calls dtnode.toggleSelection().
This could be replaced by something like
if not CTRL pressed:
deselect all nodes
toggle selection
Desecting all nodes could be done like this:
tree.visit(function(dtnode) {
dtnode.select(false);
});