3 Answers, 1 is accepted
0
Accepted

John DeVight
Top achievements
Rank 1
answered on 08 Aug 2012, 02:50 PM
Hi Kiya,
Kendo UI Web "out of the box" does not support a treeview in a dropdownlist. However, you can get the two controls to work together to give you the appearance of a treeview in a dropdownlist. I've quickly thrown something together to demonstrate.
I could define the HTML as follows:
And then the JavaScript as this:
I've attached the sample code. If you are interested in pursuing this, let me know, and I can take this concept and make it a more complete solution.
Regards,
John DeVight
Kendo UI Web "out of the box" does not support a treeview in a dropdownlist. However, you can get the two controls to work together to give you the appearance of a treeview in a dropdownlist. I've quickly thrown something together to demonstrate.
I could define the HTML as follows:
<
ul
id
=
"treeview"
>
<
li
data-expanded
=
"true"
>Item 1
<
ul
>
<
li
>Item 1.1</
li
>
<
li
>Item 1.2</
li
>
</
ul
>
</
li
>
<
li
data-expanded
=
"true"
>Item 2
<
ul
>
<
li
>Item 2.1</
li
>
<
li
>Item 2.2</
li
>
</
ul
>
</
li
>
</
ul
>
<
input
id
=
"dropdown"
></
input
>
And then the JavaScript as this:
$(document).ready(
function
() {
var
dropdown = $(
"#dropdown"
).kendoDropDownList({
dataSource: [{ text:
""
, value:
""
}],
dataTextField:
"text"
,
dataValueField:
"value"
,
open:
function
(e) {
// If the treeview is not visible, then make it visible.
if
(!$treeviewRootElem.hasClass(
"k-custom-visible"
)) {
$treeviewRootElem.slideToggle(
'fast'
,
function
() {
dropdown.close();
$treeviewRootElem.addClass(
"k-custom-visible"
);
});
}
}
}).data(
"kendoDropDownList"
);
var
$dropdownRootElem = $(dropdown.element).closest(
"span.k-dropdown"
);
var
treeview = $(
"#treeview"
).kendoTreeView({
select:
function
(e) {
// When a node is selected, display the text for the node in the dropdown and hide the treeview.
$dropdownRootElem.find(
"span.k-input"
).text($(e.node).children(
"div"
).text());
$treeviewRootElem.slideToggle(
'fast'
,
function
() {
$treeviewRootElem.removeClass(
"k-custom-visible"
);
});
}
}).data(
"kendoTreeView"
);
var
$treeviewRootElem = $(treeview.element).closest(
"div.k-treeview"
);
// Hide the treeview.
$treeviewRootElem
.width($dropdownRootElem.width())
.css({
"border"
:
"1px solid grey"
,
"display"
:
"none"
,
"position"
:
"absolute"
});
// Position the treeview so that it is below the dropdown.
$treeviewRootElem
.css({
"top"
: $dropdownRootElem.position().top + $dropdownRootElem.height(),
"left"
: $dropdownRootElem.position().left });
$(document).click(
function
(e) {
// Ignore clicks on the treetriew.
if
($(e.target).closest(
"div.k-treeview"
).length == 0) {
// If visible, then close the treeview.
if
($treeviewRootElem.hasClass(
"k-custom-visible"
)) {
$treeviewRootElem.slideToggle(
'fast'
,
function
() {
$treeviewRootElem.removeClass(
"k-custom-visible"
);
});
}
}
});
});
I've attached the sample code. If you are interested in pursuing this, let me know, and I can take this concept and make it a more complete solution.
Regards,
John DeVight
0

Kiya
Top achievements
Rank 1
answered on 13 Aug 2012, 02:49 AM
Hi, John
I understand it. Thank you very much.
I understand it. Thank you very much.
0

Kim
Top achievements
Rank 1
answered on 04 Dec 2013, 12:20 AM
I tried the solution with my treeview being binded
@(Html.Kendo().TreeView()
.Name("treeviewIterationPath")
.AutoBind(true)
.Events(events => events
.Select("onSelectTreeViewItemDoNothing")
)
.BindTo(ViewBag.TreeViewIterationModel)
//.HtmlAttributes(new {@class="demo-section" })
)
And it didn't work. When i click on my tree view, i got a script error saying that "e" is unidentified.
@(Html.Kendo().TreeView()
.Name("treeviewIterationPath")
.AutoBind(true)
.Events(events => events
.Select("onSelectTreeViewItemDoNothing")
)
.BindTo(ViewBag.TreeViewIterationModel)
//.HtmlAttributes(new {@class="demo-section" })
)
And it didn't work. When i click on my tree view, i got a script error saying that "e" is unidentified.