Kendo Custom Widget returning null instance

Question

Creating a custom Widget in kendo my js file looks like

(function(kendo, $) {
    var ui = kendo.ui,
        Widget = ui.Widget
    kendo.generateUUID = function() {
        var d = new Date().getTime();
        if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
            d += performance.now(); //use high-precision timer if available
        }
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = (d + Math.random() * 16) % 16 | 0;
            d = Math.floor(d / 16);
            return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
        });
    }


    var ArcDropDownTreeView = kendo.ui.Widget.extend({
        _treeView: null,
        _uid: null,
        _dropdown: null,
        init: function(element, options) {
            var that = this;
            kendo.ui.Widget.fn.init.call(that, element, options);
            //  Widget.fn.init.call(this.element, options);

            var newDivId,
                treeElementId,
                treeElement,
                treeview,
                dropDownElementId,
                dropDownElement,
                dropdown
            uid = kendo.generateUUID();
            newDivId = ("treeDropDown{0}").replace("{0}", uid);
            treeElementId = ("treeViewElement{0}").replace("{0}", uid);
            dropDownElementId = ("dropDownElement{0}").replace("{0}", uid);
            var newDiv = $("<div></div>").prop("id", newDivId);
            dropDownElement = $("<input/>").prop("id", dropDownElementId);
            treeElement = $(element).clone().prop("id", treeElementId);
            $(newDiv).append(dropDownElement).change();
            $(newDiv).append(treeElement).change();
            $(element).append(newDiv).change();
            dropdown = $(dropDownElement).kendoDropDownList({
                dataSource: [{
                    text: "",
                    value: ""
                }],
                dataTextField: "text",
                dataValueField: "value",

            }).data("kendoDropDownList");
            dropdown.bind("open", function(e) {
                e.preventDefault();
                // 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");
                    });
                }
            });


            var $dropdownRootElem = $(dropDownElement).closest("span.k-dropdown");
            treeview = $(treeElement).kendoTreeView(options.treeview).data("kendoTreeView");
            treeview.bind("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");
                });
            });
            var $treeviewRootElem = $(treeElement).closest("div.k-treeview");
            // Hide the treeview.
            var listBackgroundCss = dropdown.list.css("background-color");
            $treeviewRootElem
                .width($dropdownRootElem.width())
                .css({
                    "border": "1px solid grey",
                    "display": "none",
                    "position": "absolute",
                    "background-color": listBackgroundCss,
                    "z-index": "999"
                });


            $(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");
                        });
                    }
                }
            });
            that._treeView = treeview;
            that._dropdown = dropdown;
            that._uid = uid;
        },
        treeView: function() {
            console.log("Request for treeview");
            return this._treeView;
        },
        dropDown: function() {
            return this._dropdown;
        },
        dataSource: function() {
            return this.treeview.datasource;
        },
        selectElement: function(id) {
            this._treeView.select(id);

        },
        options: {
            name: "ArcDropDownTreeView"
        }
    });
    ui.plugin(ArcDropDownTreeView);


})(window.kendo, window.kendo.jQuery);

When I execute this code

var dropDownTreeView = $("#treeview").kendoArcDropDownTreeView({
    treeview: {
        dataTextField: "Name",
        dataValueField: "ID",
        loadOnDemand: true,
        dataSource: new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    url: '/Inventory/GetInventoryLocation',
                    dataType: "json",
                    data: rootData(),
                    contentType: 'application/json; charset=utf-8'
                }
            },
            schema: {
                model: {
                    id: "ID",
                    name: "Name",
                    hasChildren: "hasChildren"
                }
            }
        })
    }
});
var instance = dropDownTreeView.data("ArcDropDownTreeView");
instance.selectElement(258);

I get a null error on instance.selectElement(258); it seems dropDownTreeView.data("ArcDropDownTreeView") is returning an undefined instance, what am I missing?. pulling my hair out, any new widgets I create have the same behavior but all the widget frameworks are based on https://github.com/jsExtensions/kendoui-extended-api, which will run.

Answer 1

1. For some reason in the code somewhere you change the element id become treeViewElement13080b8d-5b18-45ec-bb1f-254701a05b5e (that random guid)
2. Well you cant even select the element now, how do you expect to get the reference to the widget if you cant even select the element?
3. we can actually get the reference but with the correct id, when i tried to explore it and check this out.

furthermore youre dom looks like this now (perhaps this is causing the issue as well)

Note : you can select the widget reference using the id marked with blue line. I know this is not the answer, i just wanted to point out some directions in case you still want to continue your widget. i case somebody else want to help him more on this please use this dojo