Add Images next to Kendo UI treeview items is not working

Question

I have been trying to add in a conditional image in order to delete only if the parent node in a kendoUI treeview node is empty.

So I want a delete icon to be displayed with the logic of whether it does not contain any children.

I was reading about the templates and I attempted a few of them I end up losing the display of all my data with either it saying "undefined" or broken image ( which i could fix that broken image, but it only displaying a broken image is certainly not going to work.

My code looks like this

var serviceRoot = "/Report"; 
                            homogeneous = new kendo.data.HierarchicalDataSource({
                                transport: {
                                    read: {
                                        url: serviceRoot + "/GetReportGroupAssignments", //"/LoadReportTree", // "/Employees",
                                        dataType: "json" //"jsonp"
                                    }
                                },
                                schema: {
                                    model: {
                                        id: "Id" //"ReportGroupName"
                                        ,
                                        hasChildren: "Id"
                                    }
                                }
                            });

                            var treeview = $("#treeview").kendoTreeView({
                                //expanded: true,
                                template: kendo.template($("#treeview-template").html()),
                                dragAndDrop: true,
                                dataSource: homogeneous,
                                dataTextField: "ReportGroupName" // "Id"  //"name" //"id" // "FullName"
                                //,
                                //change: function(e) {
                                //    console.log("Change", this.select());
                                //}
                            }).data("kendoTreeView");

Ok UPDATE:

I found some code that i'm very interested in wondering if it could "work"

schema: {
    model: {
        children: "folder",
        hasChildren: function (node) {
            var hasChildren =  (node.folder && node.folder.length > 0);
            if (hasChildren === true) {
                node.spriteCssClass = "folder";
            } else {
                node.spriteCssClass = "html";
            }
            return hasChildren;
        }
    }
}

1. I have an existing hasChildren: "Id" so i commented that out
2. I don't understand the "node" passed in, where is that even coming from ?
3. Could this type of code / logic work for adding an optional image if there are children or not in my type of code?

4. Ok so a few types of templates I "tried" are below

    template: kendo.template($("#treeview-template").html()),
   

then a few types of scripts

1. <script id="treeview-template" type="text/kendo-ui-template">
                           <a class='show-link' href='\#'><image src="/imageUrl"></a>
                       </script>
   

And also tried

2.   <script id="treeview-template" type="text/kendo-ui-template">
                           #: item.text #
                           # if (!item.items) { #
                           <a class='delete-link' href='\#'></a>
                           # } #
                       </script>
   

Answer 1

it is needed to add the template definition

<script id="treeview-template" type="text/kendo-ui-template">
    #: item.ReportGroupName #
    # if (!item.ReportGroupNameResID) { #
        <a class='delete-link' href='\#'>X</a>
    # } #
</script>

and also to bind the delete action to the link (X)

$(document).on("click", ".delete-link", function(e) {
    e.preventDefault();
    var treeview = $("#treeview").data("kendoTreeView");
    treeview.remove($(this).closest(".k-item"));
});

see the revised demo here http://jsfiddle.net/gkqc66ot/2/