javascript array not binding

[AkapParticipant]

I’ve been able to populate a javascript array with the proper properties to bind to the jqxTree. The tree populates the array, but it doesn’t bind the label properties accordingly. I get an blank ‘Item’ displayed in place of each listed item. I’ve tried numerous other methods of binding like the dataAdapter, but that’s confusing. Did I misspell something? Did I not do soemthing? Can someone please help?

[HTML]

<div data-bind="customTree:{source: $data.dataCategoryItem }" id="jqxWidgetb3f55b6b" role="tree" data-role="treeview" tabindex="1" class="jqx-widget jqx-widget-energyblue jqx-widget-content jqx-widget-content-energyblue jqx-tree jqx-tree-energyblue" style="width: 175px;"><div style="overflow: hidden; width: 175px; height: 53px; background-color: transparent;" id="paneljqxWidgetb3f55b6b" class=""><div id="panelWrapperpaneljqxWidgetb3f55b6b" style="overflow: hidden; width: 100%; height: 100%; background-color: transparent; -webkit-appearance: none; outline: none; align:left; border: 0px; padding: 0px; margin: 0px; left: 0px; top: 0px; valign:top; position: relative;"><div id="panelContentpaneljqxWidgetb3f55b6b" style="-webkit-appearance: none; box-sizing: border-box; width: 100%; height: 100%; outline: none; border: none; padding: 0px; position: absolute; margin: 0px; left: 0px; top: 0px; max-width: 1e+07px; overflow: visible;" class="jqx-widget-content jqx-widget-content-energyblue">

<ul class="jqx-tree-dropdown-root jqx-tree-dropdown-root-energyblue" style="width: 83px; min-width: 145px;">
<li id="jqxWidgetbb7c906e" role="treeitem" class="jqx-tree-item-li jqx-tree-item-li-energyblue" style="margin-left: 16px;">
<div style="display: inline-block;" class="draggable jqx-rc-all jqx-rc-all-energyblue jqx-tree-item jqx-tree-item-energyblue jqx-item jqx-item-energyblue">Item</div></li></ul>

</div><div id="paneljqxWidgetb3f55b6bverticalScrollBar" style="left: 156px; top: 0px; position: absolute; visibility: hidden; width: 15px; height: 51px;" class="jqx-scrollbar jqx-scrollbar-energyblue jqx-widget jqx-widget-energyblue jqx-widget-content jqx-widget-content-energyblue jqx-rc-all jqx-rc-all-energyblue"><div id="jqxScrollOuterWrappaneljqxWidgetb3f55b6bverticalScrollBar" style="box-sizing: content-box; width:100%; height: 100%; align:left; border: 0px; valign:top; position: relative;" class="jqx-reset jqx-reset-energyblue"><div id="jqxScrollWrappaneljqxWidgetb3f55b6bverticalScrollBar" style="box-sizing: content-box; width: 17px; height: 100%; left: 0px; top: 0px; position: absolute;" class="jqx-reset jqx-reset-energyblue jqx-scrollbar-state-normal jqx-scrollbar-state-normal-energyblue"><div id="jqxScrollBtnUppaneljqxWidgetb3f55b6bverticalScrollBar" style="box-sizing: content-box; left: 0px; top: 0px; position: absolute; width: 15px; height: 15px;" class="jqx-scrollbar-button-state-normal jqx-scrollbar-button-state-normal-energyblue jqx-rc-t jqx-rc-t-energyblue"><div class="jqx-reset jqx-reset-energyblue jqx-icon-arrow-up jqx-icon-arrow-up-energyblue"></div></div><div id="jqxScrollAreaUppaneljqxWidgetb3f55b6bverticalScrollBar" style="box-sizing: content-box; left: 0px; top: 17px; position: absolute; height: 0px; width: 15px;" class="jqx-reset jqx-reset-energyblue"></div><div id="jqxScrollThumbpaneljqxWidgetb3f55b6bverticalScrollBar" style="box-sizing: content-box; left: 0px; top: 17px; position: absolute; width: 15px; height: 10px; visibility: inherit;" class="jqx-scrollbar-thumb-state-normal jqx-scrollbar-thumb-state-normal-energyblue jqx-fill-state-normal jqx-fill-state-normal-energyblue jqx-rc-all jqx-rc-all-energyblue"></div><div id="jqxScrollAreaDownpaneljqxWidgetb3f55b6bverticalScrollBar" style="box-sizing: content-box; left: 0px; top: 27px; position: absolute; height: 5px; width: 15px;" class="jqx-reset jqx-reset-energyblue"></div><div id="jqxScrollBtnDownpaneljqxWidgetb3f55b6bverticalScrollBar" style="box-sizing: content-box; left: 0px; top: 34px; position: absolute; width: 15px; height: 15px;" class="jqx-scrollbar-button-state-normal jqx-scrollbar-button-state-normal-energyblue jqx-rc-b jqx-rc-b-energyblue"><div class="jqx-reset jqx-reset-energyblue jqx-icon-arrow-down jqx-icon-arrow-down-energyblue"></div></div></div></div></div><div id="paneljqxWidgetb3f55b6bhorizontalScrollBar" style="left: 0px; top: 34px; position: absolute; visibility: hidden; height: 15px; width: 173px;" class="jqx-scrollbar jqx-scrollbar-energyblue jqx-widget jqx-widget-energyblue jqx-widget-content jqx-widget-content-energyblue jqx-rc-all jqx-rc-all-energyblue"><div id="jqxScrollOuterWrappaneljqxWidgetb3f55b6bhorizontalScrollBar" style="box-sizing: content-box; width:100%; height: 100%; align:left; border: 0px; valign:top; position: relative;" class="jqx-reset jqx-reset-energyblue"><div id="jqxScrollWrappaneljqxWidgetb3f55b6bhorizontalScrollBar" style="box-sizing: content-box; width: 100%; height: 17px; left: 0px; top: 0px; position: absolute;" class="jqx-reset jqx-reset-energyblue jqx-scrollbar-state-normal jqx-scrollbar-state-normal-energyblue"><div id="jqxScrollBtnUppaneljqxWidgetb3f55b6bhorizontalScrollBar" style="box-sizing: content-box; left: 0px; top: 0px; position: absolute; width: 15px; height: 15px;" class="jqx-scrollbar-button-state-normal jqx-scrollbar-button-state-normal-energyblue jqx-rc-l jqx-rc-l-energyblue"><div class="jqx-reset jqx-reset-energyblue jqx-icon-arrow-left jqx-icon-arrow-left-energyblue"></div></div><div id="jqxScrollAreaUppaneljqxWidgetb3f55b6bhorizontalScrollBar" style="box-sizing: content-box; left: 17px; top: 0px; position: absolute; height: 15px;" class="jqx-reset jqx-reset-energyblue"></div><div id="jqxScrollThumbpaneljqxWidgetb3f55b6bhorizontalScrollBar" style="box-sizing: content-box; left: 17px; top: 0px; position: absolute; width: 18px; height: 15px; visibility: inherit;" class="jqx-scrollbar-thumb-state-normal-horizontal jqx-scrollbar-thumb-state-normal-horizontal-energyblue jqx-fill-state-normal jqx-fill-state-normal-energyblue jqx-rc-all jqx-rc-all-energyblue"></div><div id="jqxScrollAreaDownpaneljqxWidgetb3f55b6bhorizontalScrollBar" style="box-sizing: content-box; left: 37px; top: 0px; position: absolute; width: 119px; height: 15px;" class="jqx-reset jqx-reset-energyblue"></div><div id="jqxScrollBtnDownpaneljqxWidgetb3f55b6bhorizontalScrollBar" style="box-sizing: content-box; left: 156px; top: 0px; position: absolute; width: 15px; height: 15px;" class="jqx-scrollbar-button-state-normal jqx-scrollbar-button-state-normal-energyblue jqx-rc-r jqx-rc-r-energyblue"><div class="jqx-reset jqx-reset-energyblue jqx-icon-arrow-right jqx-icon-arrow-right-energyblue"></div></div></div></div></div><div id="bottomRightpaneljqxWidgetb3f55b6b" style="left: 0px; top: 0px; position: absolute; visibility: hidden;" class="jqx-panel-bottomright jqx-panel-bottomright-energyblue jqx-scrollbar-state-normal jqx-scrollbar-state-normal-energyblue"></div></div></div><input type="hidden" value=""></div>

[JAVASCRIPT]

TreeItem2 = (function (_super) {
    function obj(item) {
        var self = this;
        //_super.call(self, item);
        self.label = item.name || '';
        self.value = item.id || '';
        self.html = item.html || '';
        self.disabled = item.disabled || false;
        self.checked = item.checked || false;
        self.expanded = item.expanded || false;
        self.selected = item.selected || false;
        self.icon = item.icon || '';
        self.iconsize = item.iconsize || '25';
        self.items = [];
        if (item.primary1) {
            ko.utils.arrayForEach(item.primary1, function (value) {
                self.items.push(new TreeItem2(value));
                self.items.sort(function (a, b) { return a.name - b.name; });
            });
        }
    }
    obj.prototype = {};
    return obj;
})();

[KNOCKOUT BINDING]

ko.bindingHandlers.customTree = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var $el = $(element);
        var options = ko.unwrap(valueAccessor());
        var $el = $el.jqxTree({ source: options.source, width: '175px', theme: 'energyblue' });
        var $btn = $('<div />').jqxDropDownButton({ width: '175px', theme: 'energyblue' }).html();
        //$el.wrap($btn);
        ko.utils.domNodeDisposal.addDisposeCallback($el, function () { $el.jqxTree("destroy"); });
        ko.utils.domNodeDisposal.addDisposeCallback($btn, function () { $btn.jqxDropDownButton('destroy'); });
    }
};

[AkapParticipant]

nevermind… I’ve solved the problem that was explained in a earlier post.

[Author]

Posts