patosai / tree-multiselect.js Goto Github PK

Hey there,
So by default one option within the select list is checked..How do I load the tree so that none of the items are checked?

Thanks in advance

Hi Patosai... This is a nice application... in my program first i will populate tree with some pre selected options and then there is a button like reset, on clicking that i want to refresh my page without any pre selected options....can u please provide any option like refresh?

Sorry for ask that,I am a beginner

<select>
<option selected></option>
<option selected></option>
<option selected></option>
</select>

The tree not checked those items which has selected attribute

I have added scroll bar when the list is big. please update it your application.

div.tree-multiselect {
max-height: 218px;
overflow-y: scroll;
display: inline-block;
}

Hello I got this error "Object doesn't support property or method 'remove' "
using this plugin in internet explorer,
this happened at:

if (node) { node.remove();
at line 579.
I fixed this error by changing this line with:
node.parentNode.removeChild(node);

Thanks,
Tamas

Good Morning,

I am trying to limit the height of the column of selected elements, in order to make it scrollable, I have come to use in the inspector even the element.style selector, forcing the height even with important.

I have not been able to make that listing fit the desired height.

Could you help me?

Thx so much!
Luisfermp

If I have tree like this,

• Parent 1 (value:parent1)
  • Child 1 (value:child1)
  • Child 2(value:child2)
  • Child 3 (value:child3)
• Parent 2
  • Child 4
  • Child 5
  • Child 6

As per your code, when I click Parent 1, whole child 1, child 2 and child 3 will be selected. Thats good. But. How can I check whether is selected parent node or child nodes? Suppose I click Child2, value selected is displaying as child2, and if Parent 1 is selected, values selected are displaying as child1, child2 and child3. instead of displaying all 3, is there any possiblity display only value = parent1 when click Parent1 ?

The plus prefix of a data-section only changes when clicked directly. When you type something search, all the relevant data-sections open themselfes but without changeing the prefix to a minus. When you click the data-section after a search, it does change, but the wrong way around.

The tree is initialized with the parameter startCollapsed: true

Hello,

How i can get all selected nodes by code?
Thanks

Hi @patosai, how to do if I want to have only one option with no child?
example

1.Menu A
- Sub Menu A.1
- Sub Menu A.2
2. Menu B
3. Menu C
4. Menu D
- Sub Menu D.2

I love this control. Recently I came upon a situation where I needed to have cascading dropdowns so a user can navigate a hierarchy down to a single record. I thought perhaps instead of these cascading dropdowns which is hard to navigate I would use your multi-select tree. It works perfect for my needs including searching, the only problem is I want to limit the user to a single selection.

So I'm requesting the ability to include a config property that lets me specify a limit to the number of selected items. That way I could specify 1 for a single select, or 3 for a multi-select with a limit of 3 selected and no more.

I am using the below markup to use your excellent library. It works fine.

But when I select multiple values and submit the form, I get only 1 selected items.

Fore example, if I select "Category 1" and "Category 2-a" and submit the form, the forum values has only "Category 2-a" and not other value.

<select name="itemCategory" id="category" multiple="multiple">
   <option value="1" data-section="Main Categories">Category 1</option>
   <option value="2" data-section="Main Categories">Category 2</option>
   <option value="3" data-section="Main Categories">Category 3</option>
   <option value="4" data-section="Category 2">Category 2-a</option>
</select>

Just implemented tree-multiselect.js. It's a really nifty plugin, however, it would greatly help usability if the text for each checkbox was wrapped in an associated label tag. Then you could click the label text or the checkbox to select the checkbox, instead of just the small textbox target area.

For example, in a section titled "Brooklyn"

<div class="item" data-value="Flatbush" style="display: block;">
    <input type="checkbox">Flatbush
</div>

With some sort of name-spaced generated ID becomes:

<div class="item" data-value="Flatbush" style="display: block;">
    <input type="checkbox" id="tms-brooklyn-flatbush"><label for="tms-brooklyn-flatbush
</div>

What do you think?

When jqOriginalSelect has .val(selected) called on it, the element's change event is not triggered because it's hidden; need to explicitly call .change() after .val(selected).

Hi, I got an error in IE while it tries to remove the nodes.

Fixed it by replacing node.remove(); by $(node).remove();

Also, (and just as a suggestion), the event that can be captured for selectionContainer can be 'click'. In this way, IE will trigger the event even when the checkbox properties indeterminate is true and checked is false.

Great work! and hope this helps to you

Cheers!

Leo

Hi,
I think this is is more of a enhancement than anything . As-is the component works perfectly.
But in one of the business-cases the rendering is quiet slow when the size of data is large.
On my end, the data has 8 levels with around 8000 nodes so loading the data at the begging is a quiet slow.

So, I was thinking of loading first few levels or 1st level of data to start with and then loading the other data using async requests. But looking at the design of the component i'm a bit lost as to how can I achieve that.

Has anyone given a thought to this or have any ideas ? I know this will affect the search and other features drastically, but will give a really nice alternative to showing large data.

PS.. Please feel free to move this post to either enhancement or something.. i'm new to GitHub so don't really know how the tagging thing works.

On IE11 when I uncheck a parent run into an exception.

I want implement radio function, when user click optgroup2's item, optgroup1's items will unchecked.
how can i do this??

I know this is not issue its extra functionality.
Consider Following Tree :

• Section A
  • Node A
  • Node B
  • Node C

If i have selected section A i want to use section A as node and want to add it into right side Stack? Could you (@patosai) please help me on this?

I need to do the same example in the link can u help me..

I included

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

</script>

Hi. Thanks for this component. It works great and it's very usable.

I've come to an scenario that requires the entire tree to be frozen for updates (a tipical crud). So far, I've come to solve the requirement by enclosing the component within a disabled fieldset and then unbinding the events on the span, something like this:

HTML:

<fieldset id="read-only-tree" disabled="disabled">
   <select id="tree" multiselect="multiselect">...</select>
</fieldset>

Javascript:

$(document).ready(function () {
                var options = {
                    allowBatchSelection: false
                };
                $("#tree").treeMultiselect(options);
                $("#read-only-tree span.remove-selected").unbind();
});

However, I find this kind of hackish, so having this functionality would be awesome.

Thanks again.

Locally, I've extended your library to handle option[disabled=true], rendering a disabled, unselectable input checkbox. Haven't gotten around to propagating that up to parent checkboxes, but nonetheless a useful feature imo.

Hello.

Have you considered about registring Tree Multiselect in Bower Registry? It would make the plugin easier to install.

More info here:

https://bower.io/docs/creating-packages/

Thanks!
Miguel.

Hey, I'm using this widget and it's really good. But now I'm wondering, how can I set the value for a parent node? I mean, I have this:

<option data-section="All/Image" value="someValue">HD</option>
<option data-section="All/Image" value="someValue">Series</option>
<option data-section="All/Image/Books" value="someValue">Dutch</option>
<option data-section="All/Image/Books" value="someValue">English</option>

So, its displayed as:
|---All
|-------Image
|-------------HD
|-------------Series
|-------------Books
|-------------------Dutch
|-------------------English

And it's going well until here, but now, How I set a value only for the Image option? when the users select Image I want to send a value for it

Hello,
How i can set my custom selected options after loading the tree?

Thanks

I am trying to add a callbacks to my page but having some issues. Can you give a simple example of the usage. Or direct me to the documentation, thank you.

How can i get tree-multiselect throught bower.

I just got src document.

Thanks

no search?

Hi,
Congrats for your project, it is really helpful.

However I have a question. Would it be possible to construct nested structure, only by giving the parent's node value and not the full path? It would be really helpful in situations where is hard to get the full path.

Thank you in advance.

¡This is not a issue!

Is there any way to disable the pulsation on all the children (of a father and the children of the children)?

Is it possible alternative implantation of closing of selected node for IE9. I have tested in IE 9. I am unable to removed selected not in IE9.

When I try to add dynamically new options and reinitialize the treeview the options appear twice

Hi,

thanks for your great work.

Is there a way that the select will display just the parent option on loading the page ?

Here is the scenario:
A select element is created in JS code like this:

someSelect = $('<select id="someSelect" multiple="multiple"></select>');
for(var key in data.result.somedata){
     group = data.result.somedata[key];
     $.each(group, function() {
          someSelect.append('<option value="' + this +
                 '" data-section="' + key + '">' + this + '</option>');
     });
 }

then later in the code pre-selected options (based on their presence in cols array) are marked and tree-multiselect is created:

$("div#graphDataBox").append(someSelect);
$("select#someSelect option").removeAttr("selected");
$("div.tree-multiselect").remove();
$.each($("select#someSelect option"), function() {
    if(cols.indexOf($(this).val()) > -1) {
        $(this).attr("selected", "selected");
    }
});

$("select#strategies").treeMultiselect({startCollapsed: true});

Everything works like a charm at the first page load.
Once the code retrieves the new set of cols via an Ajax request from the back-end repopulation of the tree-multiselect pre-selections fails. I checked the someSelect options are correwctly mark as selected (done in $.each function) when the data come back from the Ajax call.

What do I miss when cleaning up before rebuilding?

Thank you

Martin

Can select a section without selecting all the child's?

i have this hierarchy:

Drinks
->Whisky
->Irish
->Scotch
->Soda
->Coca Cola

I need to select section "Whisky" without selecting irish and scotch.
Is any option or attribute i can use for this?

Hi i would like to ask if there is possibility to set order of tree nodes... problem is that if i have 3 child nodes and only one has another children this node is pushed to end. Example for better imagination:

This is how i want to sort tree items

• a
  • a1
  • a2
• b
• c

But i always get

• b
• c
• a
  • a1
  • a2

so tree item with children goes always to the end of tree... if all tree items has children, order is ok - this happens only if not all same-level-items has other children

is there some workaround or config or?

Thanks

under the ie8,selected the all，the brower throw the error:stack overflow at line: 2

Hey,
Great job. Have a issue with it http://jsfiddle.net/newzen/nftdvyk4/3/ all checked but just a few are in the source option.

any help will be appreciated, thanks

Hey there,

Great component - I had a simple question.. the component works great on the list that I want converted into a multi-select tree. I have another select list that I do not want converted into a multi-select tree.. so how do I make it so that shows as a normal select drop-down list?

thanks in advance

Hi,

I don't see the selected field at the right side of my browser when the value field is a number.

  <option value="10712" data-section="107">10712</option>
  <option value="10796" data-section="107">10796</option>

Thanks. Cheers,
Damien G.

Great plugin. Thanks. When I type something into the search box, the nodes that contain matching items are expanded and displayed. Then I can select one of the items. But then when I clear the search box, I'm left with all the nodes in the whole tree expanded. I have lots of nodes so that makes it pretty difficult to browse the tree. It would be better if, after clearing the search box, all nodes collapsed again like they are when the page loads. Or, another option might be to have a button to collapse all. Thanks.

All those things worked well at page loading,
but I want to append options from ajax response.
But 'tree-multiselect' div is not reloading/refreshing.
Could you help me to solve this problem or add an example to your site...?

Thanking you,
SAIF

When I load my tree the first element is always 'checked'. Is there a way to load it totally unchecked ?

It would be really helpful to have methods to be able to select all and select none. I tried to achieve this (see below hacky code), but the information doesn't seem to be saved:

$("#btnSelectAll").on('click',function() {
event.preventDefault();
$("#PromptPanel1_treeviewCommentCodes > option").each(function(){
$(this).attr('selected','selected');
});
$(".tree-multiselect input").each(function(){
$(this).attr('checked','checked');
});
});

            $("#btnDeSelectAll").on('click',function() {
                event.preventDefault();
                $("#PromptPanel1_treeviewCommentCodes > option").removeAttr("selected");
                $(".tree-multiselect input:checked").removeAttr("checked");
            });

How can I add data from a json?
Thanks.