GIJGO
Examples
Documentation
Report a Bug
Download
Bootstrap 3 Treeview
Bootstrap 4 Treeview
Bootstrap 5 Treeview
Material Design Tree
Bootstrap Checkboxes
Material Checkboxes
Drag And Drop 1
Drag And Drop 2
Lazy Loading
Gijgo.com
Tree
Examples
Bootstrap 5 Treeview
Bootstrap 5 TreeView
The tree is using bootstrap 5
Preview
Front-End Code
Back-End Code
Edit
Download ASP.NET Examples
<html> <head> <meta charset="utf-8" /> <title>Bootstrap 5 TreeView</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script> <link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container-fluid"> <div id="tree"></div> </div> <script type="text/javascript"> $(document).ready(function () { $('#tree').tree({ uiLibrary: 'bootstrap5', dataSource: '/Locations/Get', primaryKey: 'id', imageUrlField: 'flagUrl' }); }); </script> </body> </html>
using Gijgo.Asp.NET.Examples.Models.Entities; using System.Collections.Generic; using System.Linq; using System.Web.Mvc; namespace Gijgo.Asp.NET.Examples.Controllers { public class LocationsController : Controller { public JsonResult Get(string query) { List<Location> locations; List<Models.DTO.Location> records; using (ApplicationDbContext context = new ApplicationDbContext()) { locations = context.Locations.ToList(); if (!string.IsNullOrWhiteSpace(query)) { locations = locations.Where(q => q.Name.Contains(query)).ToList(); } records = locations.Where(l => l.ParentID == null).OrderBy(l => l.OrderNumber) .Select(l => new Models.DTO.Location { id = l.ID, text = l.Name, @checked = l.Checked, population = l.Population, flagUrl = l.FlagUrl, children = GetChildren(locations, l.ID) }).ToList(); } return this.Json(records, JsonRequestBehavior.AllowGet); } public JsonResult LazyGet(int? parentId) { List<Location> locations; List<Models.DTO.Location> records; using (ApplicationDbContext context = new ApplicationDbContext()) { locations = context.Locations.ToList(); records = locations.Where(l => l.ParentID == parentId).OrderBy(l => l.OrderNumber) .Select(l => new Models.DTO.Location { id = l.ID, text = l.Name, @checked = l.Checked, population = l.Population, flagUrl = l.FlagUrl, hasChildren = locations.Any(l2 => l2.ParentID == l.ID) }).ToList(); } return this.Json(records, JsonRequestBehavior.AllowGet); } private List<Models.DTO.Location> GetChildren(List<Location> locations, int parentId) { return locations.Where(l => l.ParentID == parentId).OrderBy(l => l.OrderNumber) .Select(l => new Models.DTO.Location { id = l.ID, text = l.Name, population = l.Population, flagUrl = l.FlagUrl, @checked = l.Checked, children = GetChildren(locations, l.ID) }).ToList(); } [HttpPost] public JsonResult SaveCheckedNodes(List<int> checkedIds) { if (checkedIds == null) { checkedIds = new List<int>(); } using (ApplicationDbContext context = new ApplicationDbContext()) { var locations = context.Locations.ToList(); foreach (var location in locations) { location.Checked = checkedIds.Contains(location.ID); } context.SaveChanges(); } return this.Json(true); } [HttpPost] public JsonResult ChangeNodePosition(int id, int parentId, int orderNumber) { using (ApplicationDbContext context = new ApplicationDbContext()) { var location = context.Locations.First(l => l.ID == id); var newSiblingsBelow = context.Locations.Where(l => l.ParentID == parentId && l.OrderNumber >= orderNumber); foreach (var sibling in newSiblingsBelow) { sibling.OrderNumber = sibling.OrderNumber + 1; } var oldSiblingsBelow = context.Locations.Where(l => l.ParentID == location.ParentID && l.OrderNumber > location.OrderNumber); foreach (var sibling in oldSiblingsBelow) { sibling.OrderNumber = sibling.OrderNumber - 1; } location.ParentID = parentId; location.OrderNumber = orderNumber; context.SaveChanges(); } return this.Json(true); } public JsonResult GetCountries(string query) { List<Models.DTO.Location> records; using (ApplicationDbContext context = new ApplicationDbContext()) { records = context.Locations.Where(l => l.Parent != null && l.Parent.ParentID == null) .Select(l => new Models.DTO.Location { id = l.ID, text = l.Name, @checked = l.Checked, population = l.Population, flagUrl = l.FlagUrl }).ToList(); } return this.Json(records, JsonRequestBehavior.AllowGet); } } }
;