dynamically add treeview nodes in jQuery MVC 5

dynamically add treeview nodes in jQuery MVC 5

Hello everyone, I am going to share the code sample for how to dynamically add treeview nodes using jQuery.

The code sample as given below.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
(function() {
  
    $(".collapsible").live("click", function (e) {
        e.preventDefault();
  
        //This is get curent clicked items.
        var self = $(this);
         
        //Check current data already loaded or not?
        var isLoaded = $(self).attr('dataLoaded');
         
         // If return true, data is already loaded then write below code.
         // If return false, data not loaded then write below code.
        if (isLoaded) {
            $(self).toggleClass("collapse expand");
            $(self).closest('li').children('ul').slideToggle();
        }
        else {          
            $(self).addClass("loadingParent");
            $(self).removeClass("collapse");
  
            // Now Load Data Here
            $.ajax({
                url: "API/treeview/GetTreeSubMenu",
                type: "GET",
                data: { ParentId : $(this).attr('ParentId')},
                success: function (data) {
                    $(self).removeClass("loadingParent");
  
                    if ( data !== undefined && data.length > 0) {
                        var $ul = $("<ul></ul>");
                         
                        $.each(data, function (key, val) {
                            //append each chield node.
                            $ul.append($("<li></li>").
                                       append("<span class='collapse collapsible' dataLoaded='false' pid='"+
                                             val.ChieldMenu_Id+"'></span>" + "<span><a href='"+
                                             val.ChieldMenu_URL+"'>"+
                                             val.ChieldMenu_Name+"</a></span>"));
                        });
  
                        $(self).parent().append($ul);
                        $(self).addClass('collapse');
                        $(self).toggleClass('collapse expand');
                        $(self).closest('li').children('ul').slideDown();
                    }
                    else {
                        //That meanse here is no SubMenu.
                        $(self).css({'dispaly':'inline-block'});
                    }
  
                    //This is show the data is loded.
                    $(self).attr('dataLoaded', true);
                },
                error: function () {
                    console.log("Error on api call!!");
                }
            });
        }
  
    });
});
(function() {
 
    $(".collapsible").live("click", function (e) {
        e.preventDefault();
 
        //This is get curent clicked items.
        var self = $(this);
        
        //Check current data already loaded or not?
        var isLoaded = $(self).attr('dataLoaded'); 
        
         // If return true, data is already loaded then write below code.
         // If return false, data not loaded then write below code.
        if (isLoaded) {
            $(self).toggleClass("collapse expand");
            $(self).closest('li').children('ul').slideToggle();
        }
        else {           
            $(self).addClass("loadingParent"); 
            $(self).removeClass("collapse");
 
            // Now Load Data Here
            $.ajax({
                url: "API/treeview/GetTreeSubMenu",
                type: "GET",
                data: { ParentId : $(this).attr('ParentId')},
                success: function (data) {
                    $(self).removeClass("loadingParent");
 
                    if ( data !== undefined && data.length > 0) { 
                        var $ul = $("<ul></ul>");
                        
                        $.each(data, function (key, val) {
                            //append each chield node.
                            $ul.append($("<li></li>").
                                       append("<span class='collapse collapsible' dataLoaded='false' pid='"+ 
                                             val.ChieldMenu_Id+"'></span>" + "<span><a href='"+
                                             val.ChieldMenu_URL+"'>"+
                                             val.ChieldMenu_Name+"</a></span>"));
                        });
 
                        $(self).parent().append($ul);
                        $(self).addClass('collapse');
                        $(self).toggleClass('collapse expand');
                        $(self).closest('li').children('ul').slideDown();
                    }
                    else {
                        //That meanse here is no SubMenu.
                        $(self).css({'dispaly':'inline-block'});
                    }
 
                    //This is show the data is loded.
                    $(self).attr('dataLoaded', true);
                },
                error: function () {
                    console.log("Error on api call!!");
                }
            });
        }
 
    });
});
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.