My treetable is loading on the page after the rest of the associated widgets, out of order with the container elements in my HTML. I have the same layout (minus the expand and close buttons) for a datatable on my site and that is working as expected. Any ideas how I can solve this?
JS File
webix.ready(function() { // Tree table config let tree = webix.ui({ view:"treetable", container: "pages-tree-table", id: "tree-table", css: "mx-auto mb-3", autoheight:true, width: parentPercent, fillspace: true, rowHeight: 60, drag: true, // Subject to change of name pager: "treePager", data: tableData, // for static data columns: columnsConfig
`let treePager = webix.ui({
view: "pager",
id: "treePager",
container: "treePager",
// sets buttons for pager
template: "{common.prev()} {common.pages()} {common.next()}",
css: 'ml-3 my-3',
animate: {
subtype: "out"
},
size: 10,
group: 3
});
// Pager clone
$$('treePager').clone({
container: "treePagerClone",
template: "{common.prev()} {common.pages()} {common.next()}",
css: 'ml-3 my-3',
animate: {
subtype: "out"
}
});
// Toolbar with export buttons
let exportToolbar = webix.ui({
view: "toolbar",
borderless: true,
css: "ml-3",
container: "pagesExportButtons",
cols: [
{
view: "button", type: "iconButton", icon:"mdi mdi-file-pdf", width:50, tooltip: "Export to PDF", click:function() {
webix.toPDF($$("tree-table"), "pages_data");
}
},
{
view: "button", type: 'iconButton', icon: "mdi mdi-file-delimited", width:50, tooltip: "Export to CSV", click:function() {
webix.toCSV($$("tree-table"));
}
},
{
view: "button", type: 'iconButton', icon: "mdi mdi-file-excel", width:50, tooltip: "Export to Excel", click:function() {
webix.toExcel($$("tree-table"), {
filterHtml: true
});
}
}
]
});
// Close All button
webix.ui({
view: "button",
label: "Close All",
container: "close-all-button",
tooltip: "Close all folders",
autoheight: true,
autowidth: true,
click: function() {
tree.closeAll();
}
});
// Expand All button
webix.ui({
view: "button",
label: "Expand All",
container: "expand-all-button",
tooltip: "Expand all folders",
autoheight: true,
autowidth: true,
click: function() {
tree.openAll();
}
});`
HTML
`