Custom Expand/Collpase icon for WijTree

DESCRIPTION

WijTree like all other Wijmo widgets supports different kinds of customizations. As we know, the expand/collapse operation in a tree structure is one of its main features. However with WijTree, we can take it to a next level and use our own custom images to act like the expand/collapse icon. Not only this, but we can also decide the position where we want to make them to appear. The inbuilt expand/collapse icons in WijTree are present on the left side of each parent node. So in this blog we will learn to change them and make them appear on the right side of each parent node, using a custom icon. Here is a quick preview of what we will end up implementing:

IMPLEMENTATION

The first thing we need to do is to hide the default expand/collapse icons. This can be done by setting the display of the corresponding class to none. Also to add the custom icon, we will loop through all the _li_ elements and will append an image only if it contains a _ul_ tag. Since the icon also need to toggle upon click, we will handle the click event of the image and replace the image source accordingly. So the code will look like this:

  $("#tree").wijtree();  

       $(".wijmo-wijtree-list li").each(function (n) {  
           $(this).has('ul').append('img class="img-swap" src="Icons/Collapse.png" /);  
       });  

       $("img").on('click', function () {  
           $(this).parent().find('ul').first().slideToggle();  
           if ($(this).attr("class") == "img-swap") {  
               this.src = this.src.replace("Icons/Collapse.png", "Icons/Expand.png");  
           } else {  
               this.src = this.src.replace("Icons/Expand.png", "Icons/Collapse.png");  
           }  
           $(this).toggleClass("on");  
       });

Please note that due to formatting issues in the blog, I have skipped the < and > symbols for the img tag in the code above. In addition to this, a minor tweaking would be required in the CSS as it can be done like this:

   .img-swap  
   {  
       margin-top: 6px !important;  
   }  
   .wijmo-wijtree-node .ui-icon-triangle-1-e  
   {  
       display: none !important;  
   }

So its all done. Add this code to your HTML page and you are good to go. A sample application demonstrating this implementation can be downloaded using the link provided below. Download Sample