jqxtree not working with jqxdocking

[fresherParticipant]

Hi I’m using jqxTree with Angular 2 which is working fine , but recently I have added scripts related to jqxdocking and jqxpanel to which jqxtree is not working
<script src=”content/scripts/jqwidgets/jqxdocking.js”></script>
<script src=”content/scripts/jqwidgets/jqxpanel.js”></script>
<script src=”content/scripts/jqwidgets/jqxtree.js”></script>
And other jqwidgets files above is for sequence.
P.S
When we have only jqxtree the Dom structure was
<angulartree>
<div id=”jqxWidgetaded5558″ data-role=”treeview” style=”width: 100%; height: 100%;” tabindex=”1″ class=”jqx-widget jqx-widget-content jqx-tree”>
<ul

When we include jqxdocking and jqxpanel script files loading / rendering of angular 2 is changed, there are more nested divs
<angulartree>
<div id=”jqxWidgetaded5558″ data-role=”treeview” style=”width: 100%; height: 100%;” tabindex=”1″ class=”jqx-widget jqx-widget-content jqx-tree”>
<div style=”background-color: transparent; overflow: hidden; width: 100%; height: 100%;” id=”paneljqxWidget078b6691″ class=””>
<div id=”panelWrapperpaneljqxWidget078b6691″ 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=”panelContentpaneljqxWidget078b6691″ 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: 553px; overflow: visible;” class=”jqx-widget-content”>
<ul

[Peter StoevKeymaster]

You should add additional files for scrollbar, buttons, etc.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[fresherParticipant]

Hi Peter,

I’m using all the below scripts

<script src=”content/scripts/jqwidgets/jqxcore.js”></script>
<script src=”content/scripts/jqwidgets/jqxtabs.js”></script>
<script src=”content/scripts/jqwidgets/jqxdata.js”></script>
<script src=”content/scripts/jqwidgets/jqxbuttons.js”></script>
<script src=”content/scripts/jqwidgets/jqxscrollbar.js”></script>
<script src=”content/scripts/jqwidgets/jqxdocking.js”></script>
<script src=”content/scripts/jqwidgets/jqxpanel.js”></script>
<script src=”content/scripts/jqwidgets/jqxmenu.js”></script>
<script src=”content/scripts/jqwidgets/jqxradiobutton.js”></script>
<script src=”content/scripts/jqwidgets/jqxcheckbox.js”></script>
<script src=”content/scripts/jqwidgets/jqxlistbox.js”></script>
<script src=”content/scripts/jqwidgets/jqxcombobox.js”></script>
<script src=”content/scripts/jqwidgets/jqxdropdownlist.js”></script>
<script src=”content/scripts/jqwidgets/jqxtextarea.js”></script>
<script src=”content/scripts/jqwidgets/jqxexpander.js”></script>
<script src=”content/scripts/jqwidgets/jqxtagcloud.js”></script>

<script src=”content/scripts/jqwidgets/jqxinput.js”></script>
<script src=”content/scripts/jqwidgets/jqxdatetimeinput.js”></script>
<script src=”content/scripts/jqwidgets/jqxcalendar.js”></script>
<script src=”content/scripts/jqwidgets/jqxtooltip.js”></script>
<script src=”content/scripts/jqwidgets/jqxprogressbar.js”></script>
<script src=”content/scripts/jqwidgets/globalization/globalize.js”></script>
<script src=”content/scripts/jqwidgets/jqxgrid.js”></script>
<script src=”content/scripts/jqwidgets/jqxtree.js”></script>
<script src=”content/scripts/jqwidgets/jqxgrid.sort.js”></script>
<script src=”content/scripts/jqwidgets/jqxgrid.pager.js”></script>
<script src=”content/scripts/jqwidgets/jqxgrid.selection.js”></script>
<script src=”content/scripts/jqwidgets/jqxgrid.edit.js”></script>
<script src=”content/scripts/jqwidgets/jqxgrid.filter.js”></script>
<script src=”content/scripts/jqwidgets/jqxgrid.columnsresize.js”></script>
<script src=”content/scripts/jqwidgets/jqxgrid.columnsreorder.js”></script>
<script src=”content/scripts/jqwidgets/jqxgrid.aggregates.js”></script>
<script src=”content/scripts/jqwidgets/jqxgrid.grouping.js”></script>
<script src=”content/scripts/bootstrap/bootstrap.min.js”></script>
<script src=”content/scripts/jqwidgets/jqxexpander.js”></script>
<script src=”content/scripts/other/polyfill.min.js”></script>
<script src=”content/scripts/jqwidgets/jqxeditor.js”></script>
<script src=”content/scripts/jqwidgets/jqxmaskedinput.js”></script>
<script src=”content/scripts/jqwidgets/jqxdropdownbutton.js”></script>
<script src=”content/scripts/jqwidgets/jqxrating.js”></script>
<script src=”content/scripts/jqwidgets/jqxwindow.js”></script>
<script src=”content/scripts/jqwidgets/jqxpasswordinput.js”></script>

Kindly check the question once it was working without jqxdocking and jqxpanel scripts.
Please check the post script I have added differnece in rendering of angular tree after adding jqxpanel scripts

[Peter StoevKeymaster]

Hi fresher,

Please, share a full plunkr or jsfiddle.net sample.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts