<\/strong><\/em>
1. Add the reference to set of aciTree JavaScript and CSS file
<\/strong>
a. aciTree.css
b. jquery.min.js version should be >= 1.11.1
c. jquery.aciPlugin.min.js
d. jquery.aciTree.dom.js
e. jquery.aciTree.core.js (Optional)
f. jquery.aciTree.selectable.js (Optional)
g. jquery.aciTree.checkbox.js
h. jquery.aciTree.radio.js
i. jquery.aciTree.min.js<\/p>\n\n\n\n
2. Declare the search box if search functionality is required 3. Declare div with id and CSS classes 4. Call the WEB-API method for data and it should be return in JSON format 5. If we need checkbox, radio button at node level then set checkbox: true , radio: true $(function () {<\/p>\n\n\n\n \/\/ init the tree \/\/ our custom filter\/search var api = $(\u2018#tree\u2019).aciTree(\u2018api\u2019);<\/p>\n\n\n\n $(\u2018#search\u2019).val(\u201d) JSON data format public class TreeNode public int? parent { get; set; }<\/p>\n\n\n\n public string label { get; set; } public string myurl { get; set; } \/\/ this is for setting URL for navigation public TreeNode() 2. Need to return data in JSON format to view (Controller method) \/\/Controller method with sample data \/\/it\u2019s an extension method for filling the Treende class<\/p>\n\n\n\n TreeNode tree = list.ToTree(); \/\/this method is for filling data in class<\/p>\n\n\n\n List<TreeNode> lstTreeNode = new List<TreeNode>(); return lstTreeNode; PopulateChildren(root, list);<\/p>\n\n\n\n return root; private static void PopulateChildren(TreeNode node, List<TreeNode> all) foreach (var item in childs) foreach (var item in childs) foreach (var item in childs) Sample output<\/strong><\/p>\n\n\n\n The code can be downloaded from here<\/a>.<\/strong><\/p>\n\n\n\n You can access the portal here<\/a> for a deep dive into all of the areas mentioned above.<\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/strong>
Search: <input id=\u201dsearch\u201d type=\u201dtext\u201d value=\u201d\u201d name=\u201dsearch\u201d><\/p>\n\n\n\n
<\/strong>
<div id=\u201dtree\u201d class=\u201daciTree\u201d><\/div><\/p>\n\n\n\n
<\/strong>
$(\u2018#tree\u2019).aciTree({
ajax: {
\/\/Calling controller method
url: \u2018\/Home\/GetTreeView\u2019
}<\/p>\n\n\n\n
<\/strong>
Complete code for search, checkbox, radio button and link at leaf node
<\/strong>
<script class=\u201dcode\u201d type=\u201dtext\/javascript\u201d><\/p>\n\n\n\n
$(\u2018#tree\u2019).aciTree({
ajax: {
\/\/Calling controller method
url: \u2018\/Home\/GetTreeView\u2019
},
\/\/this code is for making leafe lavel node as link
itemHook: function (parent, item, itemData, level) {
if (!itemData.inode) {
\/\/ a custom item implementation to show a link
this.setLabel(item, {
label: \u2018<a href=\u201d\u2018 + itemData[\u2018myurl\u2019] + \u2018\u201d target=\u201d_blank\u201d title=\u201dClick to open \u2018 + itemData[\u2018myurl\u2019] + \u2018\u201d>\u2019 + itemData.label + \u2018<\/a>\u2019
});
}
},
\/\/if we need check box then just set it as true
checkbox: true,
radio: true,<\/p>\n\n\n\n
filterHook: function (item, search, regexp) {
if (search.length) {
\/\/ try to get the parent
var parent = this.parent(item);
if (parent.length) {
\/\/ get parent label
var label = this.getLabel(parent);
if (regexp.test(String(label))) {
\/\/ all direct childrens match
return true;
}
}
\/\/ match the item
return regexp.test(String(this.getLabel(item)));
} else {
\/\/ empty search, all matches
return true;
}
},
});<\/p>\n\n\n\n
var last = \u201d;
\/\/its for searching the information
$(\u2018#search\u2019).keyup(function () {
if ($(this).val() == last) {
return;
}
last = $(this).val();
api.filter(null, {
search: $(this).val(),
success: function (item, options) {
if (!options.first) {
alert(\u2018No results found!\u2019);
}
}
});
});
});
<\/script><\/p>\n\n\n\n
<\/strong>
1. Need to create a model class for n level tree with following properties<\/strong><\/p>\n\n\n\n
{
public int id { get; set; }<\/p>\n\n\n\n
public bool inode { get; set; } \/\/this if for if node have any child node
public bool open { get; set; } \/\/this is for opening the node by default
public bool checkbox { get; set; } \/\/ this is for displaying checkbox at node
public bool radio { get; set; } \/\/this is for displaying radio button at node<\/p>\n\n\n\n
public List<TreeNode> branch { get; set; } \/\/ this is for child nodes<\/p>\n\n\n\n
{
branch = new List<TreeNode>();
}
}<\/p>\n\n\n\n
<\/strong>
public JsonResult GetTreeView()
{
var result = GetAllNodes();
return Json(result, JsonRequestBehavior.AllowGet);
}<\/p>\n\n\n\n
public List<TreeNode> GetAllNodes()
{
var list = new List<TreeNode>
{
new TreeNode{ id = 1, label = \u201cRoot\u201d ,checkbox=true, inode=true, radio=false, open=true },
new TreeNode{ id = 2, parent= 1, label = \u201cNode-1.1\u201d, checkbox=false, inode=true, radio=true, open=true },
new TreeNode{ id = 3, parent= 2, label = \u201cNode-1.1.1\u2033 , checkbox=false,inode=false, radio=false, open=true ,myurl=\u201dhttp:\/\/google.com\u201d},
new TreeNode{ id = 4, parent= 2, label = \u201cNode-1.1.2\u2033 , checkbox=false,inode=false, radio=false, open=true ,myurl=\u201dhttp:\/\/facebook.com\u201d},
new TreeNode{ id = 5, parent= 1, label = \u201cNode-1.2\u201d , checkbox=true,inode=true, radio=false, open=true },
new TreeNode{ id = 6, parent= 5, label = \u201cNode-1.2.1\u201d , checkbox=true,inode=false, radio=false, open=true },
new TreeNode{ id = 7, parent= 5, label = \u201cNode-1.2.2\u201d, checkbox=true,inode=false, radio=false, open=true },
new TreeNode{ id = 8, parent= 5, label = \u201cNode-1.2.3\u201d , checkbox=false,inode=true, radio=false, open=true },
new TreeNode{ id = 9, parent= 8, label = \u201cNode-1.2.3.1\u201d, checkbox=false,inode=true, radio=false, open=true },
new TreeNode{ id = 10, parent= 9, label = \u201cNode-1.2.3.1.1\u201d , checkbox=false,inode=false, radio=true, open=true }
};<\/p>\n\n\n\n
lstTreeNode.Add(tree);<\/p>\n\n\n\n
}
Extension class for filling treenode class (its optional you can implement on your own)
public static class TreeNodeExtensions
{
public static TreeNode ToTree(this List<TreeNode> list)
{
if (list == null) throw new ArgumentNullException(\u201clist\u201d);
var root = list.SingleOrDefault(x => x.parent == null);
if (root == null) throw new InvalidOperationException(\u201croot == null\u201d);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
{
var childs = all.Where(x => x.parent.Equals(node.id)).ToList();<\/p>\n\n\n\n
{
node.open = true;
\/\/node.leaf = false;
node.branch.Add(item);
}<\/p>\n\n\n\n
all.Remove(item);<\/p>\n\n\n\n
PopulateChildren(item, all);
}
}<\/p>\n\n\n\n![\"\"](\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/pawan-300x270-1.webp\")
<\/figure>\n\n\n\n