How do i get a folder icon on all the parent nodes

Question

I want to get icons before the nodes of the Parent node and the child nodes. For parent nodes it should be icomoon-icon-folder-plus and for child nodes it should be 'icomoon-icon-folder'.

function treeView() {
  var treeMenu = new kendo.data.HierarchicalDataSource({
    template: kendo.template($("#treeview-template").html()),
    schema: {
      model: {
        id: "id",
        expanded: false,
        hasChildren: "HasChildren"
      }
    },
    transport: {
      read: {
        url: "/getTreeDetails",
        contentType: "application/json; charset=utf-8",
        type: "POST",
        datatype: "json",
      },
    }
  });
  $("#treeview").kendoTreeView({
    dataSource: treeMenu,
    dataValueField: "id",
    dataTextField: ['LABEL'],
    template: kendo.template($("#treeview-template").html())
  });
}
$(document).ready(function() {
  treeView();
});

Script: icon is comming for all nodes on the right hand side.

<script id="treeview-template" type="text/kendo-ui-template">
        <span id='treeLabel' style='font-weight:bold;' data-id='#=item.id #'></span>
        #: item.LABEL #
       # if (item.hasChildren) { #
     <a href='\#'><span class='icomoon-icon-folder-plus'></span></a>
# } #
    </script>

HTML:

    <ul class="k-group k-treeview-lines" role="tree">
   <li class="k-item k-first" aria-selected="false " data-uid="3-72f2c45e0d7d" role="treeitem" aria-expanded="false" id="treeview_tv_active">
     <div class="k-top">
       <span class="k-icon k-plus" role="presentation"></span>
       <span class="k-in">
          <span id="treeLabel" data-id="64" style="font-weight:bold;">Team</span>
               </span>
          </div></li>
   <li class="k-item" aria-selected="false " data-uid="41d2-9e3c-69b6c8938c1d" role="treeitem"></li>
    <li class="k-item" aria-selected="false " data-uid="4546-b88b-f38f4b2e32e4" role="treeitem"></li>
    <li class="k-item" aria-selected="false " data-uid="44fa-8784-9c40a7b8ecf7" role="treeitem"></li>
    <li class="k-item k-last" aria-selected="false " data-uid="413f-b429-581cf6b58ee7" role="treeitem"></li>
    </ul>

Answer 1

You can look at the list-style-image CSS property.

ul {
  list-style-image: url('sqpurple.gif');
}

See examples and more information here - http://www.w3schools.com/cssref/pr_list-style-image.asp

Answer 2

Created a template instead a datasource.

 # if (item.type= "true") { #

}

Answer 3

Not entirely sure what do you want to achieve, but from the question i grasp that you wanted to

1. "get icons before the nodes" Does it mean place/put icon before the node ? i assumed yes cmiiw
2. and for parent node which have hasChildren attribute you want to put icomoon-icon-folder-plus, on the child node to put icomoon-icon-folder

So here i go

1. If you wanted to put it before the node instead of using template, i need to use the databound function.
2. From databound function you look through all <li></li> then loop through all of them and create conditional if(hasChildren){ logic } else { logic}

I haven't been able to use the template for such a purpose so this is the best way i could achieve it. and here is the jsFiddle