CODEWITHSUNDEEP
javascriptc#jqueryasp.net-mvctreeview
francisco Mc Manus
francisco Mc Manus

Reputation: 123

Bootstrap treeview don't show tree

I'm stuck trying to kick out bootstrap treeview (https://github.com/jonmiles/bootstrap-treeview). I am new at this. I think I do everything right, but it does not work for me.

I think I put everything I needed to understand the problem.

Thanks for the help.

I have the following code taken from another question, but it does not work.

In ASP NET:

private static List<RoleViewModel> roles = new List<RoleViewModel>();
        public static RoleViewModel ChildrenOf(RoleViewModel rol)
        {

            foreach (RoleViewModel child in roles.Where(x => x.ParentId == rol.Id))
            {
                rol.ChildRoles.Add(ChildrenOf(child));
            }

            return rol;
        }

        public ActionResult GetProgresoGlobalTreeData()
        {
            roles = new List<RoleViewModel>
            {
                new RoleViewModel { Id = 1, ParentId = null, text = "ED" },
                new RoleViewModel { Id = 2, ParentId = 1, text = "CPD" },
                new RoleViewModel { Id = 3, ParentId = 2 ,text = "Center Manager" },
                new RoleViewModel { Id = 4 , ParentId = 3, text = "Manager" },
                new RoleViewModel { Id = 5 , ParentId = 4, text = "Tech Head" },
                new RoleViewModel { Id = 6 , ParentId = 5, text = "Individual" }
            };

            RoleViewModel role = new RoleViewModel();
            role = ChildrenOf(roles[0]);
            var json = JsonConvert.SerializeObject(new[] { role });
            JsonResult ret = Json(json, JsonRequestBehavior.AllowGet);
            return ret;

        }

Html:

 @{
    Layout = "~/Views/Shared/_Layout.cshtml";

}

<div class="panel panel-primary">
        <div class="panel-heading">
            @MQWEB.Resources.Textos.InformesDeProgreso
        </div>
    </div>

    <div id="tree">

    </div>

    @section scripts
    {
        <script>
            $(document).ready(function () {

                $('#tree').treeview({ data: getTree() });

            });

            function getTree() {

                var tree = null;

                $.getJSON('@Url.Action("GetProgresoGlobalTreeData")', function (result) {
                  var tree = JSON.parse(result);


                });

                return tree;
            }

        </script>
    }

In layout I have everything I need to make it work.

    <head>
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="~/Content/font-awesome.min.css">

        <link href="~/Content/DataTables/css/jquery.dataTables.css" rel="stylesheet">

        <link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
        <link href="~/Content/jquery-ui-timepicker-addon.min.css" rel="stylesheet" />
        <link href="~/Content/bootstrap-select.min.css" rel="stylesheet" />
        <link href="~/Content/bootstrap-treeview.min.css" rel="stylesheet" />


    </head>

    <body>
     <script src="~/Scripts/jquery-3.3.1.min.js"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
        <script src="~/Scripts/jquery.validate.min.js"></script>

        <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
        <script src="~/Scripts/notify.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/Scripts/modernizr-2.8.3.js"></script>
        <script src="~/Scripts/pdfobject.js"></script>
        <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
        <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
        <script src="~/Scripts/jquery-ui-timepicker-addon.min.js"></script>
        <script src="~/Scripts/bootstrap-select.min.js"></script>
        <script src="~/Scripts/moment.min.js"></script>
        <script src="~/Scripts/datetime-moment.js"></script>
        <script src="~/Scripts/bootstrap-treeview.min.js"></script>
    </body>
    </html>

@RenderSection("scripts", required: false)

This is the data that browser display (json returned) after GetProgresoGlobalTreeData() is called:

"[{\"text\":\"ED\",\"nodes\":[{\"text\":\"CPD\",\"nodes\":[{\"text\":\"Center Manager\",\"nodes\":[{\"text\":\"Manager\",\"nodes\":[{\"text\":\"Tech Head\",\"nodes\":[{\"text\":\"Individual\",\"nodes\":[]}]}]}]}]}]}]"

I forgot the class, I'm using Newtonsoft.Json:

public class RoleViewModel
    {

        public RoleViewModel()
        {
            this.ChildRoles = new List<RoleViewModel>();
        }

        public string text { get; set; }

        //public string icon { get { return "glyphicon glyphicon-user"; } }
        [JsonIgnore]
        public int Id { get; set; }
        [JsonIgnore]
        public int? ParentId { get; set; }

        [JsonProperty("nodes")]
        public List<RoleViewModel> ChildRoles { get; set; }
    }

Upvotes: 0

Views: 1746

Answers (2)

francisco Mc Manus
francisco Mc Manus

Reputation: 123

Thanks to everyone for your ideas. The solution was to change the js to:

 $(document).ready(function () {

            $.getJSON('@Url.Action("GetProgresoGlobalTreeData")', function (result) {

                $('#tree').treeview({ data: result });

            });

        });

and it works!

Thanks

Upvotes: 0

Bio
Bio

Reputation: 11

You do not need to serialize the object, remove the following:

var json = JsonConvert.SerializeObject(new[] { role });

Do this instead:

return Json(new[] { role }, JsonRequestBehavior.AllowGet);

EDIT: I forgot to mention that you don't need to parse the return in JS and simply return the Json object receveid from the controller

function getTree() {
    var tree = null;
    $.getJSON('@Url.Action("GetProgresoGlobalTreeData")', function (result) {
        tree = result
    });

    return tree;
}

Upvotes: 1

Related Questions