Fancytree not visible has class ui-helper-hidden

I have just started with fancytree 2.6.0 and I am populating it from a web service request.

My problem is that all the nodes are present but are made invisible by the ui-helper-hidden class. I have put in a temporary fix with: $(rootNode.ul).removeClass(‘ui-helper-hidden’); but I am sure I am missing something.

  • Fancytree jQuery plugin - select node
  • FancyTree load all nested children on select
  • How to set parent of children if the property `parent` is null
  • Fancytree remove blue border when selected
  • The scripts and css:

    <link href="Scripts/jquery-plugins/fancytree-2.6.0/src/skin-themeroller/ui.fancytree.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.11.1/jquery-1.11.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.11.1/jquery-migrate-1.2.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.11.2/jquery-ui.js" type="text/javascript"></script>
    <script src="Scripts/jquery-plugins/fancytree-2.6.0/src/jquery.fancytree.js" type="text/javascript"> </script>
    <script src="Scripts/jquery-plugins/fancytree-2.6.0/src/jquery.fancytree.themeroller.js" type="text/javascript"> </script>
    

    The code:

    $('#selectedClausesDiv').fancytree();
    
    $.when(
        $.getJSON("Handlers/GetQuotationHandler.ashx?jsoncallback=?", { quoteReference: quoteReference, quoteVersion: quoteVersion })
    ).then(function (data) {
        if (data.ErrorCode == 0 && data.Quotation != null) {
            var rootNode = $("#selectedClausesDiv").fancytree("getRootNode");
            $.each(data.Quotation.Covers, function (index, item) {
                addCover(rootNode, item);
            });
    
            // FIXME: why is this necessary ??
            // $(rootNode.ul).removeClass('ui-helper-hidden');
        }
    });
    
    function addCover(rootNode, cover) {
        var coverId = 'selected_' + cover.BusinessClassId + '_' + cover.CoverId;
    
        var coverNode = rootNode.addChildren({
            title: cover.Name,
            tooltip: "This folder and all child nodes were added programmatically.",
            folder: true
        });
    }
    

    The generated html:

    <div class="grid_13 alpha omega" id="selectedClausesDiv">
        <ul class="ui-fancytree fancytree-container ui-fancytree-source ui-helper-hidden" tabindex="0">
            <li class="">
                <span class="fancytree-node fancytree-folder fancytree-exp-n fancytree-ico-cf">
                    <span class="fancytree-expander"/>
                    <span class="fancytree-icon"/>
                    <span title="This folder and all child nodes were added programmatically." class="fancytree-title">P&amp;I Owned</span>
                </span>
            </li>
            <li class="fancytree-lastsib">
                <span class="fancytree-node fancytree-folder fancytree-lastsib fancytree-exp-nl fancytree-ico-cf">
                    <span class="fancytree-expander"/>
                    <span class="fancytree-icon"/>
                    <span title="This folder and all child nodes were added programmatically." class="fancytree-title">P&amp;I Extended Cargo</span>
                </span>
            </li>
        </ul>
    </div>
    

  • How to set parent of children if the property `parent` is null
  • Fancytree remove blue border when selected
  • FancyTree load all nested children on select
  • Fancytree jQuery plugin - select node
  • One Solution collect form web for “Fancytree not visible has class ui-helper-hidden”

    Fancytree will automatically hide the root element if no data source is provided.

    If you are adding data using the API and no initial source, providing a blank source option will prevent Fancytree from hiding the root element.

    $("#tree").fancytree({
        source: []
    });