<%@ 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.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.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" />

            <script type="text/javascript">
                function ExpandFirstMasterTableViewItem()
                {
                   $find("<%= RadGrid1.MasterTableView.ClientID %>").expandItem(0);
                }
                
                function CollapseFirstMasterTableViewItem()
                {
                   $find("<%= RadGrid1.MasterTableView.ClientID %>").collapseItem(0);
                }
            </script>

            <telerik:RadGrid ID="RadGrid1" runat="server" Skin="Web20" Width="95%" ShowStatusBar="true"
                AutoGenerateColumns="False" PageSize="7" AllowSorting="True" AllowMultiRowSelection="False"
                AllowPaging="True" OnDetailTableDataBind="RadGrid1_DetailTableDataBind" OnNeedDataSource="RadGrid1_NeedDataSource">
                <PagerStyle Mode="NumericPages"></PagerStyle>
                <MasterTableView Width="100%" DataKeyNames="CustomerID" AllowMultiColumnSorting="True"
                    HierarchyLoadMode="Client">
                    <DetailTables>
                        <telerik:GridTableView DataKeyNames="OrderID" Name="Orders" Width="100%" HierarchyLoadMode="Client">
                            <DetailTables>
                                <telerik:GridTableView DataKeyNames="OrderID" Name="OrderDetails" Width="100%">
                                    <Columns>
                                        <telerik:GridBoundColumn SortExpression="UnitPrice" HeaderText="Unit Price" HeaderButtonType="TextButton"
                                            DataField="UnitPrice">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton"
                                            DataField="Quantity">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn SortExpression="Discount" HeaderText="Discount" HeaderButtonType="TextButton"
                                            DataField="Discount">
                                        </telerik:GridBoundColumn>
                                    </Columns>
                                </telerik:GridTableView>
                            </DetailTables>
                            <Columns>
                                <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
                                    DataField="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>
                        </telerik:GridTableView>
                    </DetailTables>
                    <Columns>
                        <telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton"
                            DataField="CustomerID">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton"
                            DataField="ContactName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="Company" HeaderButtonType="TextButton"
                            DataField="CompanyName">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings AllowExpandCollapse="true" />
            </telerik:RadGrid>
            <br />
            <br />
            <br />
            <asp:Button ID="Button3" CssClass="button" Width="300px" Text="Expand first MasterTableView item"
                OnClientClick="ExpandFirstMasterTableViewItem(); return false;" runat="server" />
            <br />
            <asp:Button ID="Button4" CssClass="button" Width="300px" Text="Collapse first MasterTableView item"
                OnClientClick="CollapseFirstMasterTableViewItem(); return false;" runat="server" />
                <br />
            <asp:Button ID="btnRefresh" runat="server" Text="Refresh grid" OnClick="btnRefresh_Click" /></div>
    </form>
</body>
</html>
