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

<!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></title>
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <script type="text/javascript">
        //Put your JavaScript code here.
        var previousRow;

        function rowSelected(sender, args) {
            var tableView = $find("<%=RadGrid1.ClientID %>").get_masterTableView();
            tableView.get_dataItems();
            var row = $find(sender.get_element().parentElement.parentElement.previousElementSibling.id);
            if (previousRow == "" || previousRow != row.get_id()) {
                for (var i = 0; i < tableView.get_dataItems().length; i++) {
                    if (tableView.get_dataItems()[i].get_selected()) {
                        var nextElement = tableView.get_dataItems()[i].get_element().nextElementSibling;
                        if (nextElement != null) {
                            if (nextElement.tagName == "TR" && nextElement.id == "") {
                                var nestedView = $find(nextElement.firstElementChild.nextElementSibling.firstElementChild.id).get_masterTableView();
                                for (var i = 0; i < nestedView.get_dataItems().length; i++) {
                                    nestedView.get_dataItems()[i].set_selected(false);
                                }
                            }
                        }
                    }
                }
                tableView.selectItem(row.get_itemIndexHierarchical());
                previousRow = row.get_id();

                document.getElementById("Label1").innerHTML = "You selected: " + row.get_cell("ContactName").innerHTML;
            }
        }
    </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <telerik:RadGrid ID="RadGrid1" ShowStatusBar="True" DataSourceID="SqlDataSource1"
        runat="server" AutoGenerateColumns="False" PageSize="7" AllowSorting="True" AllowPaging="True"
        GridLines="None" Width="800px" CellSpacing="0">
        <PagerStyle Mode="NumericPages"></PagerStyle>
        <ClientSettings>
            <Selecting AllowRowSelect="True" />
        </ClientSettings>
        <MasterTableView DataSourceID="SqlDataSource1" DataKeyNames="CustomerID" AllowMultiColumnSorting="True">
            <NestedViewSettings DataSourceID="SqlDataSource2">
                <ParentTableRelation>
                    <telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID" />
                </ParentTableRelation>
            </NestedViewSettings>
            <NestedViewTemplate>
                <telerik:RadGrid ID="RadGrid2" runat="server" AutoGenerateColumns="False">
                    <ClientSettings>
                        <Selecting AllowRowSelect="True" />
                        <ClientEvents OnRowSelected="rowSelected" />
                    </ClientSettings>
                    <MasterTableView DataKeyNames="OrderID" DataSourceID="SqlDataSource2" Width="100%"
                        runat="server">
                        <ParentTableRelation>
                            <telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID" />
                        </ParentTableRelation>
                        <Columns>
                            <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
                                DataField="OrderID" UniqueName="OrderID">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton"
                                DataField="OrderDate" UniqueName="OrderDate" DataFormatString="{0:D}">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn SortExpression="Freight" HeaderText="Freight" HeaderButtonType="TextButton"
                                DataField="Freight" UniqueName="Freight">
                            </telerik:GridBoundColumn>
                        </Columns>
                        <SortExpressions>
                            <telerik:GridSortExpression FieldName="OrderDate"></telerik:GridSortExpression>
                        </SortExpressions>
                    </MasterTableView>
                </telerik:RadGrid>
            </NestedViewTemplate>
            <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
            <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
            </RowIndicatorColumn>
            <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
            </ExpandCollapseColumn>
            <Columns>
                <telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton"
                    DataField="CustomerID" UniqueName="CustomerID">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton"
                    DataField="ContactName" UniqueName="ContactName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="Company" HeaderButtonType="TextButton"
                    DataField="CompanyName" UniqueName="CompanyName">
                </telerik:GridBoundColumn>
            </Columns>
            <SortExpressions>
                <telerik:GridSortExpression FieldName="CompanyName"></telerik:GridSortExpression>
            </SortExpressions>
            <EditFormSettings>
                <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                </EditColumn>
            </EditFormSettings>
        </MasterTableView>
        <FilterMenu EnableImageSprites="False">
        </FilterMenu>
    </telerik:RadGrid>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Customers"
        runat="server"></asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Orders Where CustomerID = @CustomerID"
        runat="server">
        <SelectParameters>
            <asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="string" />
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:Label Text="Select a row from an internal grid" runat="server" ID="Label1" />
    </form>
</body>
</html>
