Issue in customizing Kendo tree view using template

Question

I have a kendo tree view which I am populating using a hierarchical data source. I want to display few nodes in red color if that node is soft deleted from database table. (Soft deleted records are identified with a database field "DEL_FLG. If this field is set as Y, the record is considered deleted. Below is the way I am populating the tree. Could you please tell me how do I soft deleted records in red?

       var treeData =  new kendo.data.HierarchicalDataSource({

        transport: {
            read: {
                url: NsMenuMaster.urls.getMenuTreeUrl,
                data: data,
                datatype: "json",
                type: "POST"
            }
        },
        schema: {
            model: {
                id: "MenuConfigUid",                  
                children: "Child"

            }
        }
    });

    $("#MenuTreelist").kendoTreeView({
        dataSource: treeData,
        dataTextField: ["MenuText"],
        dataValueField: ["MenuConfigUid"],
        height: 1000,
        template: "#: item.DelFlg # == 'Y'" ? "<div style='color: red'>#: item.MenuText #</div>" : "<div style='color: black'>#: item.MenuText #</div>",
        checkboxes: {
            template: "<input type='checkbox' name='StudentClassID' value='#= item.id #' />",
            checkChildren: true
        },
        select: NsMenuMaster.onSelect
    });

Answer 1

Add a template config to the TreeView options, i.e:

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

and some kind of template

<script id="treeview-template" type="text/kendo-ui-template">
    # if (item.DEL_FLG) { #
        <div style='color: red'>#: item.text #</div>
    # }
    else { #
        <div>#: item.text #</div>
    # } #
</script>

Simple Example: http://dojo.telerik.com/@Stephen/UtobA

Additional Details after question updated

Change your template to

template: "# if (item.DelFlg == 'Y') { # <div style='color: red'>#: item.MenuText #</div> # } else { # <div style='color: black'>#: item.MenuText #</div> # } #"

as the ?: syntax is extremely difficult(if not impossible) to encode properly as a kendo template with mixed value rendering with arbitrary javascript, so it is just easier to use an actual if-else statement.

Updated example with one red node: http://dojo.telerik.com/@Stephen/esened