<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
<%@ 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">
    <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" RequestQueueSize="10">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Sunset" />
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

                <script type="text/javascript">
              function RowSelected(sender, args)
              {
                if (args.get_tableView().get_name() == "Customers")
                {
                    var arguments = "Expand|" + args.get_tableView().get_id() + "|" + args.get_itemIndexHierarchical();
                    $find('<%=RadAjaxManager1.ClientID %>').ajaxRequest(arguments);
                }
              } 
                </script>

            </telerik:RadCodeBlock>
            <telerik:RadGrid ID="RadGrid1" Skin="Sunset" ShowStatusBar="true" DataSourceID="SqlDataSource1"
                runat="server" AutoGenerateColumns="False" AllowSorting="True" AllowMultiRowSelection="False"
                AllowPaging="True" GridLines="None">
                <PagerStyle Mode="NumericPages"></PagerStyle>
                <MasterTableView Width="100%" DataSourceID="SqlDataSource1" DataKeyNames="CustomerID"
                    AllowMultiColumnSorting="True" Name="Customers">
                    <NestedViewTemplate>
                        <fieldset style="padding: 10px;">
                            <legend style="padding: 5px;"><b>Orders for contact name:</b>
                                <asp:Label ID="Label1" Font-Bold="true" Font-Italic="true" Text='<%# Eval("CustomerID") %>'
                                    Visible="false" runat="server" />
                                <asp:Label ID="Label2" Font-Bold="true" Font-Italic="true" Text='<%# Eval("ContactName") %>'
                                    runat="server" />
                            </legend>
                            <asp:SqlDataSource ID="DetailsDataSource" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                                ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Orders Where CustomerID = @CustomerID"
                                runat="server">
                                <SelectParameters>
                                    <asp:ControlParameter ControlID="Label1" PropertyName="Text" Type="String" Name="CustomerID" />
                                </SelectParameters>
                            </asp:SqlDataSource>
                            <asp:DetailsView ID="DetailsView1" AllowPaging="true" GridLines="None" Width="100%"
                                DataSourceID="DetailsDataSource" runat="server">
                            </asp:DetailsView>
                        </fieldset>
                    </NestedViewTemplate>
                    <Columns>
                        <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>
                        <telerik:GridBoundColumn SortExpression="ContactTitle" HeaderText="Contact Title"
                            HeaderButtonType="TextButton" DataField="ContactTitle" UniqueName="ContactTitle">
                        </telerik:GridBoundColumn>
                        <telerik:GridEditCommandColumn />
                    </Columns>
                </MasterTableView>
                <ClientSettings>
                    <Selecting AllowRowSelect="true" />
                    <ClientEvents OnRowSelected="RowSelected" />
                </ClientSettings>
            </telerik:RadGrid>
            <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Customers"
                runat="server"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>
