<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<DataAccess.Domain.Entities.Category>>" %>

<!DOCTYPE html>

<html>
<head runat="server">
	<title>Index</title>
	<link type="text/css" href="<%: Url.Content("~/Content/site.css") %>" rel="stylesheet" />
	<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>"></script>
	<%= Html.Telerik().StyleSheetRegistrar()
		.DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.web20.css"))%>
</head>
<body>

<%= Html.Telerik().TreeView()
    .Name("myTree")
	.Effects(fx => fx.Toggle())
    .BindTo(Model, (item, category) => {
        // bind initial data - can be omitted if there is none
        item.Text = category.Name;
        item.Value = category.Id.ToString();
        item.LoadOnDemand = category.ChildCategory.Count > 0;
    })
    .DataBinding(dataBinding => dataBinding.Ajax().Select("CategoryAjaxLoading", "Home"))
    .ClientEvents(events => events.OnSelect("onSelect"))
%>

<br /><br />

<input type="button" id="myButton" value="Expand Test" />

<script type="text/javascript">
    $(document).ready(function () {
	    $('#myButton').click(expand);
    });

    function itemByValue(val) {
        return $("#myTree").find(".t-input[name='itemValue'][value='" + val + "']").closest("li");
    }

    function expandSequence(treeview, seq) {
        var $element = $(treeview.element),
            currentItem = itemByValue(seq.shift());

        if (seq.length == 0) {
            currentItem.find(".t-in:first").trigger("click");
        } else {
            treeview.expand(currentItem);

            $element.bind("dataBound", function dataBoundHandler() {
                $element.unbind("dataBound", dataBoundHandler);
                expandSequence(treeview, seq);
            });
        }
    }

    function expand() {
        expandSequence($("#myTree").data("tTreeView"), [1, 16, 31]);
    }

	function onSelect(e) {
		var treeview = $('#myTree').data('tTreeView');
		var itemValue = treeview.getItemValue(e.item);
		alert(itemValue);
	}
</script>

<% Html.Telerik().ScriptRegistrar().jQuery(false).Globalization(true).Render(); %>
</body>
</html>