Treetable rendering after pager and pager clone despite order of containers.

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

<div id="pagesExportButtons"></div>
<div class="d-flex">
        <div id="close-all-button"></div>
    <div id="expand-all-button"></div>
</div>
<div id="treePager"></div>
<div class="tree-table py-3" id="pages-tree-table"</div>
<div id="treePagerClone"></div>

Comments

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion