Donate

How To Change Open And Closed Folder Icons Of jsTree

To change the open and close folder icons, I found the answer here which is to set the 'open' and 'closed' properties of 'types' plugin. On the 'open_node' and 'close_node' events of the tree, set the data.nodes to 'open' and 'closed' respectively. See sample code below.
function InitTreeEmployeesList() {
   $('#jstree').jstree({
      'core': {
         'multiple': false,
         'themes': {
            'dots': true,
            'icons': true
         }
      },
      'types': {
         'default': {
            'icon': '../Content/Employee/Images/emp_default.png'
         },
         'open': {
            'icon': '../Content/Employee/Images/employee_active.png'
         },
         'closed': {
            'icon': '../Content/Employee/Images/emp_default.png'
         }
      },
      'plugins': ['defaults', 'types']
   }).on("select_node.jstree", function (e, data) {
      var href = data.node.a_attr.href;
      if (href === '#')
         return '';
      document.location = href;
   }).on('open_node.jstree', function (event, data) {
      data.instance.set_type(data.node, 'open');
   }).on('close_node.jstree', function (event, data) {
      data.instance.set_type(data.node, 'closed');
   });
}

Comments

Donate

Popular Posts From This Blog

WPF CRUD Application Using DataGrid, MVVM Pattern, Entity Framework, And C#.NET

How To Insert Or Add Emojis In Microsoft Teams Status Message

Pass GUID As Parameter To Action Using ASP.NET MVC ContribGrid