Hi!
I have the following code:
<div id="main-section-header" class="row">
<h2 id="team-efficiency" class="col-xs-3">Security Groupings</h2>
<div style="clear:both;"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
});
function addClick(e) {
e.preventDefault();
var dialog = $("#addGrouping").data("kendoWindow");
dialog.center();
dialog.open();
}
function getSelectedIndex() {
var selectedIndex = $("#securityGroupings").data('kendoDropDownList').select();
if (selectedIndex == -1)
selectedIndex = 0;
alert("blablabla")
var expandedNode = $('#expandedNode').val();
return { selectedGroup: selectedIndex, selectedNode : expandedNode}
}
function onDropDownChanged(e) {
var treeView = $('#treeView').data('kendoTreeView');
treeView.dataSource.read();
alert('treeview refreshed');
}
function onDataBound(e) {
var dropDown = $("#securityGroupings").data('kendoDropDownList');
var selected = dropDown.select();
alert('onDataBoundCalled: ' + selected);
if (dropDown.select() == -1)
{
this.select(0);
this.trigger("change");
}
}
function onExpanded(e) {
var tree = $('#treeView').data('kendoTreeView');
var data = tree.dataItem(e.node);
$("#expandedNode").val(data.id);
}
</script>
<div class="panel panel-default">
<h1> Select a security grouping</h1>
<p>
@(Html.Kendo().Button()
.Name("addButton")
.Content("<i class='fa fa-plus rd-k-med-icon'></i> Add")
.Events(e => e.Click("addClick")))
@(Html.Kendo().DropDownList()
.Name("securityGroupings")
.DataTextField("Name")
.DataValueField("Id")
.SelectedIndex(0)
.Events(e => e.Change("onDropDownChanged"))
.Events(e => e.DataBound(("onDataBound")))
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetSecurityGroupings", "SecurityGrouping");
});
})
.HtmlAttributes(new {style = "width: 50%"})
)
</p>
@Html.Hidden("expandedNode")
@(Html.Kendo().TreeView()
.Name("treeView")
.DataTextField("Name")
.Events(e => e.Expand("onExpanded"))
.DataSource(dataSource => dataSource
.Read(read => read
.Action("GetRootGrouping", "SecurityGrouping").Data("getSelectedIndex")
)
)
.Checkboxes(checkboxes => checkboxes
.Name("checkedFiles")
.CheckChildren(false))
)
</div>
@(Html.Kendo().Window()
.Name("addGrouping")
.Title("Security Grouping")
.Actions(a => a.Clear())
.LoadContentFrom("OpenNewGrouping"))
I am populating the contents of a TreeView with the contents of a DropDownList. The function onDropdownChanged works as expected if the TreeView is at the root level but if a node is expanded then it just returns the children of the old root and ignores the newly selected root.
Any help is appreciated :)