[RESOLVED]jQuery jstree

Hi

I’ve got this working beautifully…in my visual studio.

I’m really struggling to show my image…how do the image thing work with the url to upload on this forum?

Anycase, in my iis I don’t see the folder image and all is showing. I want to show the images but I can’t even seem to upload those. Yuck.

Please help.

 

Thanks

Hi sunettew1,

Did you give proper and exact path locations of your image?

Are you getting a frame with the correct tool tip in your rendered image or just a blank?

Hi

Okay, let me try and upload the images:

How do I get the upload working to show what is happening with my jstree?

I tried putting this in the image url: file:///C:/vsjstree.JPG

file:///C:/iisjstree.JPG

Not working…ugg..please help so that I can show my issue I’m having with jstree.

Hi,

Can you share some code and did you try to debug your jquery using F12 button and breakpoints?

I can. It works perfectly in visual studio. Get the same tree in iis but without the nice graphics. Meaning there is no folder icon to click to expand the nodes. Its all open. Thats why I want to upload the pics to show the difference. The formatting is
missing in iis but all the tree structure is there. Just all expanded looking linke hyperlinks.

My Index view:

<td id="TreeView">
               <%=Html.Action("ObjectTree", "tbObject", null)%>
 </td>

My ObjectTree:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<HCCWebTemplate.Models.tbObjectTree>>" %>

    <link href="../../Scripts/jstree/themes/default/style.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jstree/libs/jquery.js" type="text/javascript"></script>
    <script src="../../Scripts/jstree/jstree.js" type="text/javascript"></script>


    <div id="divtree">
  
        <%foreach (var item in Model) %>
<%{ %>
  <ul id="tree">
    <%  if (item != null) %>
    <%   { %>
    <li><a href="#" class="usr">
        <%: item.ObjectName %> 
        <label style="display:none"><%: item.ObjectGuid %></label>
         </a> 
        <% if (item.tbObjectTrees.Count > 0)%>
        <%{ %>
            <%=Html.Action("ObjectTreeChildren", "tbObject", new {myObjectList = item })%>
        <%} %>
    </li>
    <%} %>
</ul>
<%} %>

    
    </div>
    <script type="text/javascript">
        $(function () {
            $("#divtree").jstree();
        });
    </script>

My ObjectTreeChildren:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<HCCWebTemplate.Models.tbObjectTree>" %>

    <%foreach (var item in Model.tbObjectTrees) %>
<%{ %>
<ul>
    <%  if (item != null) %>
    <%   { %>
    <li ><a href="#" class="usr">
        <%: item.ObjectName%>
        <label style="display:none"><%: item.ObjectGuid %></label>
        </a>
        <% if (item.tbObjectTrees.Count > 0)%>
        <%{ %>
            <%=Html.Action("ObjectTreeChildren", "tbObject", new { myObjectList = item })%>
        <%} %>
    </li>
    <%} %>
</ul>
<%} %>

My code in my controller:

  /// <summary>
        /// The object tree selection
        /// </summary>
        /// <returns>Returns the object tree for all objects for selection</returns>
        public ActionResult ObjectTree()
        {
            List<tbObjectTree> objectList = new List<tbObjectTree>();
            List<tbObjectTree> myObjectList = new List<tbObjectTree>();

            objectList = ObjectRepository.GetObjectTree();

            //get distinct list to see how many parent root i.e. projects there are
            var getdistinctProject = objectList.Where(x => x.ParentGuid == null).Distinct();

            var project = objectList.Where(x => x.ParentGuid == null).FirstOrDefault();

            if (getdistinctProject.Count() > 1)
            {
                foreach (var item in getdistinctProject)
                {
                    project = objectList.Where(x => x.ObjectGuid == item.ObjectGuid).SingleOrDefault();
                    SetChildren(project, objectList);
                    myObjectList.Add(project);
                }
            }
            else
            {
                 project = objectList.Where(x => x.ParentGuid == null).SingleOrDefault();
                 SetChildren(project, objectList);
                 myObjectList.Add(project);
            }



            return View(myObjectList);
        }

        /// <summary>
        /// The object tree selection
        /// </summary>
        /// <returns>Returns the object tree for all objects for selection</returns>
        [HttpPost]
        public ActionResult ObjectTree(FormCollection frmValues)
        {
            return View(frmValues);
        }

        /// <summary>
        /// Get the children for the object model
        /// </summary>
        /// <returns>Returns the childrens view for the projects</returns>
        public ActionResult ObjectTreeChildren(tbObjectTree myObjectList)
        {
                return View(myObjectList);
        }

        /// <summary>
        /// Set the children nodes for the tree view
        /// </summary>
        /// <param name="model">Type tbObjectTree</param>
        /// <param name="objectList">the Objectlist of the selected object tree</param>
        private void SetChildren(tbObjectTree model, List<tbObjectTree> objectList)
        {
            var childs = objectList.Where(x => x.ParentGuid == model.ObjectGuid).ToList();

            if (childs.Count > 0)
            {
                foreach (var child in childs)
                {
                    SetChildren(child, objectList);
                    model.tbObjectTrees.Add(child);
                }
            }
        }

Still not getting the images inserted here – the image insert / edit doesn’t work!!! Unless there is a trick to the whole url thing that I don’t know about…

 

 

Hi sunettew1,

Thank you post the issue to our forum.

Based on your description, I see you want to use the jquery plugin "jstree". And the icon of tree nodes not show proper.

For this issue, I think you should make sure the icons exist in your application folder, then the nodes image tag can refer to it

correctly. Check your "jstree" folder or download the complete plugin files again.

Best Regards,

Fuxiang

Leave a Reply