jsTree how can I open file?

Question

I am new to jsTree. I show all folder and files of particular server directory within my asp.net mvc application. I generate jsTree but when I click on file in jsTree nothing happend. If I put li outside jsTree object than file is opened in new tab.

my model:

public class JsTreeModel
{
    public string id;
    public string text;
    public string icon;
    public JsTreeAttribute a_attr;
    public string type;
    public JsTreeState state;
    public List<JsTreeModel> children;
}

public class JsTreeAttribute
{
    public string href;
    public string target;
}

public class JsTreeState
{
    public bool opened;
    public bool disabled;
    public bool selected;
}

my controller:

    public JsonResult GetTreeData()
    {
        if (AlreadyPopulated == false)
        {
            JsTreeModel rootNode = new JsTreeModel();
            rootNode.a_attr = new JsTreeAttribute();
            rootNode.state = new JsTreeState();
            rootNode.state.opened = true;

            rootNode.text = "Downloadbare Artikel";
            string rootPath = Request.MapPath("~/Content/Files/Presentation/");
            rootNode.id = rootPath;
            PopulateTree(rootPath, rootNode);
            AlreadyPopulated = true;
            return Json(rootNode);
        }
    }

    public void PopulateTree(string dir, JsTreeModel node)
    {
        if (node.children == null)
        {
            node.children = new List<JsTreeModel>();
        }
        // get the information of the directory
        DirectoryInfo directory = new DirectoryInfo(dir);
        if (directory.Exists == false)
        {
            node.text = "No Downloadable Products";
            return;
        }

        // loop through each subdirectory
        foreach (DirectoryInfo d in directory.GetDirectories())
        {
            // create a new node
            JsTreeModel t = new JsTreeModel();
            t.id = d.FullName;
            t.text = d.Name.ToString();
            // populate the new node recursively
            PopulateTree(d.FullName, t);
            node.children.Add(t); // add the node to the "master" node
        }
        // loop through each file in the directory, and add these as nodes
        foreach (FileInfo f in directory.GetFiles())
        {
            // create a new node
            JsTreeModel t = new JsTreeModel();
            t.a_attr = new JsTreeAttribute();
            t.id = f.FullName;
            t.text = f.Name.ToString();
            string abb = Path.GetExtension(f.FullName).Replace(".", "");
            if (abb == "pdf" || abb == "jpg" || abb == "mp4" || abb.ToLower() == "wmv" || abb == "eps")
            {
                t.icon = System.Web.VirtualPathUtility.ToAbsolute("~/Content/Images/" + abb + "Icon.png");
                t.type = "file";
                int index = f.DirectoryName.IndexOf("Content");
                t.a_attr.href = "http://" + System.Web.HttpContext.Current.Request.Url.Authority + "/" + f.DirectoryName.Substring(index).Replace("\\","/") + "/" + f.Name;
                t.a_attr.target = "_blank";
            }
            // add it to the "master"
            node.children.Add(t);
        }
    }

my View:

<div id="jsTree"></div>
<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            cache: false,
            type: 'POST',
            url: '@Url.Action("GetTreeData", "Customer")',
            dataType: 'json',
            success: function(data) {
                $('#jsTree').jstree({
                    'core': {
                        'data': data
                    }
                });
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert('Failed to generate jsTree object');
            }
        });
    });
</script>

Browser render item like this:

<li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="C:\inetpub\wwwroot\WebshopHallmann\Content\Files\Presentation\AT\ALL170005_POS-Katalog_DE_v16_screen.pdf_anchor" id="C:\inetpub\wwwroot\WebshopHallmann\Content\Files\Presentation\AT\ALL170005_POS-Katalog_DE_v16_screen.pdf" class="jstree-node  jstree-leaf">
    <i class="jstree-icon jstree-ocl" role="presentation"></i>
    <a class="jstree-anchor" href="http://server-domain/Content/Files/Presentation/AT/ALL170005_POS-Katalog_DE_v16_screen.pdf" tabindex="-1" target="_blank" id="C:\inetpub\wwwroot\WebshopHallmann\Content\Files\Presentation\AT\ALL170005_POS-Katalog_DE_v16_screen.pdf_anchor">
        <i class="jstree-icon jstree-themeicon jstree-themeicon-custom" role="presentation" style="background-image: url(&quot;/Content/Images/pdfIcon.png&quot;); background-position: center center; background-size: auto;"></i>
        ALL170005_POS-Katalog_DE_v16_screen.pdf
    </a>
</li>

Inside jsTree nothing happen on click, but when I put it outside then on click file is opened in new tab. What is wrong inside jsTree that I not get the same result?

Answer 1

You will have to put a listener on the tree for jstree events.The select_node.jstree event is fired when a node is selected. Inside this you could write your logic for opening a file.

var oTree = $('#jsTree');
oTree.on("select_node.jstree", function (e, data) {
    //Open file here using data.node
})