how to load a treeview in menuitem using kendo menuitem template?

Question

I need a treeview in the kendo menuitem,so i have used a template for menuitem and defined a div with id as "treeviewinmenu"

now i am trying to define a treeview with id "treeviewinmenu" in document ready function but the treeview is not defined.The problem is the id given in template is not detected in the document ready,even i tried definig the treeview in the kendo menu databound function.

so,please suggest me how to detect the id used in the template and define a treeview based on it

    <script type="text/kendo-ui" id="treeviewinmenutemplate">
<div id="menutreeviewview">

</div>
</script>



  $("#menutreeviewview").kendoTreeView({
                            dataSource: [
                                {
                                    text: "Inbox", imageUrl: "",
                                    items: [
                                        { text: "Read Mail", imageUrl: "" }
                                    ]
                                },

                            ]
                        });

Answer 1

Try like this, this is just example

<div id="treeview">
    </div>
    <script>

        var data = [
        {
            id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder",
            items: [
                                { id: 2, text: "w" },
                                { id: 3, text: "wq" },
                                { id: 4, text: "q" },
                                { id: 5, text: "qq" },
                                { id: 6, text: "qeq" },
                                { id: 7, text: "gd" }
                            ]

        }
    ];

        $("#treeview").kendoTreeView({

            dataSource: data
        }).data("kendoTreeView");
    </script>