<%@ Page EnableViewState="True" 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 id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body style="margin: 0px;">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <telerik:RadGrid ID="RadGrid1" DataSourceID="AccessDataSource1" runat="server" Skin="WebBlue"
            Width="95%" AutoGenerateColumns="False" PageSize="5" AllowSorting="True" AllowPaging="True"
            GridLines="None">
            <PagerStyle Mode="Advanced"></PagerStyle>
            <MasterTableView DataSourceID="AccessDataSource1" AllowFilteringByColumn="true" DataKeyNames="CustomerID"
                Width="100%" HierarchyLoadMode="Client">
                <DetailTables>
                    <telerik:GridTableView DataKeyNames="OrderID" DataSourceID="AccessDataSource2" 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">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn SortExpression="EmployeeID" HeaderText="EmployeeID" HeaderButtonType="TextButton"
                                DataField="EmployeeID" UniqueName="EmployeeID">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </telerik:GridTableView>
                </DetailTables>
                <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:GridTemplateColumn DataField="Country" HeaderText="Country" UniqueName="Country">
                        <FilterTemplate>
                            <telerik:RadComboBox ID="RadComboBox1" DataSourceID="AccessDataSource1" DataTextField="Country"
                                DataValueField="Country" Height="200px" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Country").CurrentFilterValue %>'
                                runat="server" OnClientSelectedIndexChanged="SelectedIndexChanged">
                                <Items>
                                    <telerik:RadComboBoxItem />
                                </Items>
                            </telerik:RadComboBox>
                            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

                                <script type="text/javascript">

                                    function SelectedIndexChanged(sender, args) {

                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");

                                        tableView.filter("Country", args.get_item().get_value(), "EqualTo");

                                    }

                                </script>

                            </telerik:RadScriptBlock>
                        </FilterTemplate>
                        <ItemTemplate>
                            <%# Eval("Country")%>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
        <asp:AccessDataSource ID="AccessDataSource1" DataFile="~/App-data/Nwind.mdb" SelectCommand="SELECT * FROM Customers"
            runat="server"></asp:AccessDataSource>
        <asp:AccessDataSource ID="AccessDataSource2" DataFile="~/App-data/Nwind.mdb" SelectCommand="SELECT * FROM Orders Where CustomerID = ?"
            runat="server">
            <SelectParameters>
                <asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="string" />
            </SelectParameters>
        </asp:AccessDataSource>
    </div>
    </form>
</body>
</html>
