1

As the question title describes , I want a dropdown which contains a tree inside it , the tree should be a checkboxed tree and i can multi select tree nodes from there. There's a Telerik control which provides exactly the same functionality.

https://demos.telerik.com/aspnet-ajax/dropdowntree/examples/functionality/checkboxes/defaultcs.aspx

I want this kind of control in jquery. Is there a one for me ?

There's this thread

JSF Tree in a dropdown

which points to the same kind of issue and there's a solution for it with "optgroup" but that is not a multiselect dropdown. I want that same thing but which is multi selectable and selecting the root node selects all the child nodes automatically.

Improve this question
5
  • This is not a code writing service. Please try to do what you want and if you have issues, come back with specific questions and we can help. Commented Jan 17, 2018 at 8:29
  • Mr Darren Sweeney i am asking for a jquery plugin if there's one available , what kind of code you expect from me ? .. Commented Jan 17, 2018 at 8:32
  • stackoverflow.com/questions/4214365/jsf-tree-in-a-dropdown check this question , it got 11 upvotes , have you got any sense ? .. Commented Jan 17, 2018 at 8:42
  • This question is very off topic at SO. Please visit the help center - point 4 to see why Commented Jan 17, 2018 at 9:14
  • @umer : I've added answer. Commented Jan 17, 2018 at 9:48

1 Answer 1

Reset to default
1

Working example of https://josephskh.github.io/repos/dropdowntree/ here.

$(function() { var arr4=[ {title:"A",href:"#1",dataAttrs:[{title:"dataattr1",data:"value1"},{title:"dataattr2",data:"value2"},{title:"dataattr3",data:"value3"}]} , {title:"B",href:"#2",dataAttrs:[{title:"dataattr4",data:"value4"},{title:"dataattr5",data:"value5"},{title:"dataattr6",data:"value6"}]} , {title:"C",href:"#3",dataAttrs:[{title:"dataattr7",data:"value7"},{title:"dataattr8",data:"value8"},{title:"dataattr9",data:"value9"}]} ]; var arr3=[ {title:"P",href:"#1",dataAttrs:[{title:"dataattr1",data:"value1"},{title:"dataattr2",data:"value2"},{title:"dataattr3",data:"value3"}]} , {title:"Q",href:"#2",dataAttrs:[{title:"dataattr4",data:"value4"},{title:"dataattr5",data:"value5"},{title:"dataattr6",data:"value6"}],data:arr4} , {title:"R",href:"#3",dataAttrs:[{title:"dataattr7",data:"value7"},{title:"dataattr8",data:"value8"},{title:"dataattr9",data:"value9"}]} ]; var options2 = { title: "Select", data: arr3, maxHeight: 3000, clickHandler: function(element) { //gets clicked element parents $("#firstDropDownTree2").SetTitle($(element).find("a").first().text()); }, closedArrow: '<i class="fa fa-caret-right" aria-hidden="true"></i>', openedArrow: '<i class="fa fa-caret-down" aria-hidden="true"></i>', multiSelect: true, selectChildren: true } $("#firstDropDownTree").DropDownTree(options2); });
.dropdown-tree>ul { overflow-y: auto; overflow-x: hidden; white-space: nowrap; } .dropdown-tree li { list-style: none } .dropdown-tree li>i { margin-left: 10px; } .dropdown-tree li:hover { background: #eee; } .dropdown-tree li:hover ul { background: white; } .dropdown-tree li:hover ul li:hover { background: #eee; } .dropdown-tree a { display: inline-block !important; padding: 3px 20px; clear: both; font-weight: 400; line-height: 1.42857143; color: #333; white-space: nowrap; text-decoration: none; background: transparent !important; position: relative; } .dropdown-tree .arrow { position: absolute; margin-left: -15px; top: 50%; transform: translateY(-50%); } /*RTL CSS*/ .rtl-dropdown-tree { direction: rtl !important } .rtl-dropdown-tree>ul { right: 0; left: unset; text-align: right } .rtl-dropdown-tree .arrow { right: 6px } .rtl-dropdown-tree li>i { margin-left: 0; margin-right: 10px; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <script src="https://josephskh.github.io/repos/dropdowntree/dropdowntree.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <div class="dropdown dropdown-tree" id="firstDropDownTree">

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.