Kendo Treeview DropDown

HTML

<link rel="stylesheet" href="//cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<script src="//cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<!--<div id="test_locationSelector" class="locationSelector">
    <ul class="locationSelectorMenu"></ul>
</div>-->

<div id="dropDownTreeView" class="locationSelector">
    <ul class="locationSelectorMenu"></ul>
</div>

CSS

/* General */

.k-ext-required {
    background-color: pink;
}


/* ExtSplitter */

.k-ext-layout-header {
    margin-top:0px;
    position: relative;
}

.k-ext-layout-title {
    font-size:14px;
    font-weight:bold;
}

.k-ext-vertical-layout-title {
    position: absolute; 
    top: 30px !important;
    text-align: center;
    width: 14px;
	margin-left: 3px;
}

.k-ext-arrows-left, .k-ext-arrows-right, .k-ext-arrows-up, .k-ext-arrows-down {
	overflow: hidden;
	width: 16px;
	height: 16px;
	cursor: pointer;
	background-color: transparent;
	background-repeat: no-repeat;
	background-image: url('./Images/small-sprites.gif') !important;
	margin: 0;
}

.k-ext-arrows-left {
	background-position: 0 -16px;
}

.k-ext-arrows-right {
	background-position: -16px -16px;
}

.k-ext-arrows-up {
	background-position: 0 0;
}

.k-ext-arrows-down {
	background-position: -16px 0;
}


/* ExtDialog */

.k-ext-information, .k-ext-question, .k-ext-warning, .k-ext-error {
	overflow: hidden;
	width: 32px;
	height: 32px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-image: url('./Images/medium-sprites.png');
	margin: 0;
}

.k-ext-information {
	background-position: 0 0;
}

.k-ext-question {
	background-position: -32px 0;
}

.k-ext-warning {
	background-position: -64px 0;
}

.k-ext-error {
	background-position: -96px 0;
}

.k-ext-wait {
	overflow: hidden;
	width: 30px;
	height: 30px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-image: url('./Images/medium-wait.gif');
	margin: 0;
}


/* ExtBorderLayout */

.k-ext-inner-splitter-contents {
    overflow: hidden !important;
}


/* ExtTextBox */

.k-ext-textbox {
	display:inline-block;
	position:relative;
	height:2.2em;
}

	.k-ext-textbox span {
		position:absolute;
		top:0;
		left:0;
		color:gray;
		z-index:99; 
		padding:0.178em 0; 
		height:1.6em; 
		line-height:1.6em; 
		text-indent:4px;
	}

	.k-ext-textbox input {
		position:absolute...

JavaScript

var data = [];

data = $.map(data, parseNavData);
console.table(data);
var testData = new kendo.data.HierarchicalDataSource({ data: data.items });

        function parseNavData(i) {
            var newItem = {
                text: ""
            };
            
            if (i.Location) {
                newItem.text = i.RecapLevel + " " + i.Location;
            }

            if (i.ManagerName) {
                if (newItem.text) {
                    newItem.text += " - ";
                }
                newItem.text += i.ManagerName;
            }

            newItem.employeeId = i.EmployeeId;
            if (i.Links) {
                newItem.items = $.map(i.Links, parseNavData);
            }

            return newItem;
        }


(function ($) {
    var kendo = window.kendo,
        ExtDropDownTreeView = kendo.ui.Widget.extend({
        _uid: null,
        _treeview: null,
        _dropdown: null,

        init: function (element, options) {
            var that = this;

            kendo.ui.Widget.fn.init.call(that, element, options);

            that._uid = new Date().getTime();

            $(element).append(kendo.format("<input id='extDropDown{0}' class='k-ext-dropdown'/>", that._uid));
            $(element).append(kendo.format("<div id='extTreeView{0}' class='k-ext-treeview' style='z-index:1;'/>", that._uid));

            // Create the dropdown.
            that._dropdown = $(kendo.format("#extDropDown{0}", that._uid)).kendoDropDownList({
                dataSource: [{ text: "", value: "" }],
                dataTextField: "text",
                dataValueField: "value",
                open: function (e) {
                    //to prevent the dropdown from opening or closing. A bug was found when clicking on the dropdown to 
                    //"close" it. The default dropdown was visible after the treeview had closed.
                    e.preventDefault();
                    // If the treeview is not visible, then make it visible.
  ...