<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

            <script type="text/javascript">
        function NodeExpanded(sender, eventArgs)
        {
            var grid = $find("<%= RadGrid1.ClientID %>");
            var i = 0, j = 0;
            if(eventArgs.get_node().get_level() == 0)
            {
                for(i = 0; i < grid.get_masterTableView().get_dataItems().length; i++)
                {
                    var id = grid.get_masterTableView().get_dataItems()[i].getDataKeyValue("ID");
                    if(id == eventArgs.get_node().get_value())
                    {
                        grid.get_masterTableView().get_dataItems()[i].set_expanded(true);
                        return;
                    }
                } 
            }
            else
            {
                for(j = 0; j < grid.get_detailTables().length; j++)
                {
                    for(i = 0; i < grid.get_detailTables()[j].get_dataItems().length; i++)
                    {
                        var id = grid.get_detailTables()[j].get_dataItems()[i].getDataKeyValue("ID");
                        if(id == eventArgs.get_node().get_value())
                        {
                            grid.get_detailTables()[j].get_dataItems()[i].set_expanded(true);
                            return;
                        }
                    }
                }
            }
        }
        function NodeCollapsed(sender, eventArgs)
        {
            var grid = $find("<%= RadGrid1.ClientID %>");
            var i = 0, j = 0;
            if(eventArgs.get_node().get_level() == 0)
            {
                for(i = 0; i < grid.get_masterTableView().get_dataItems().length; i++)
                {
                    var id = grid.get_masterTableView().get_dataItems()[i].getDataKeyValue("ID");
                    if(id == eventArgs.get_node().get_value())
                    {
                        grid.get_masterTableView().get_dataItems()[i].set_expanded(false);
                        return;
                    }
                } 
            }
            else
            {
                for(j = 0; j < grid.get_detailTables().length; j++)
                {
                    for(i = 0; i < grid.get_detailTables()[j].get_dataItems().length; i++)
                    {
                        var id = grid.get_detailTables()[j].get_dataItems()[i].getDataKeyValue("ID");
                        if(id == eventArgs.get_node().get_value())
                        {
                            grid.get_detailTables()[j].get_dataItems()[i].set_expanded(false);
                            return;
                        }
                    }
                }
            }
        }
            </script>

        </telerik:RadCodeBlock>
        <div style="float: left">
            <telerik:RadTreeView ID="RadTreeView1" runat="server" Width="300px" OnClientNodeExpanded="NodeExpanded"
                OnClientNodeCollapsed="NodeCollapsed" />
        </div>
        <div>
            <telerik:RadGrid ID="RadGrid1" ShowHeader="true" runat="server" Skin="" Width="300px"
                GridLines="None" OnColumnCreated="RadGrid1_ColumnCreated" OnItemCreated="RadGrid1_ItemCreated"
                OnNeedDataSource="RadGrid1_NeedDataSource">
                <MasterTableView HierarchyDefaultExpanded="false" HierarchyLoadMode="Client" EnableNoRecordsTemplate="true"
                    DataKeyNames="ID,ParentID" Width="100%" ClientDataKeyNames="ID">
                    <SelfHierarchySettings ParentKeyName="ParentID" KeyName="ID" />
                    <NoRecordsTemplate>
                    </NoRecordsTemplate>
                </MasterTableView>
                <ClientSettings AllowExpandCollapse="true" />
            </telerik:RadGrid>
        </div>
    </form>
</body>
</html>
