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

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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 id="Head1" runat="server">
</head>
<body class="BODY">
    <form id="mainForm" method="post" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
    <telerik:RadGrid ID="RadGrid1" Width="100%" DataSourceID="SqlDataSource1" AllowFilteringByColumn="True"
        AllowSorting="True" AllowPaging="True" PageSize="7" runat="server" AutoGenerateColumns="False"
        >
        <MasterTableView DataKeyNames="CustomerID">
            <Columns>
                <telerik:GridBoundColumn UniqueName="ContactName" DataField="ContactName" HeaderText="Contact name"
                    AllowFiltering="false" HeaderStyle-Width="200px" />
                <telerik:GridBoundColumn UniqueName="ContactTitle" DataField="ContactTitle" HeaderText="Contact title"
                    HeaderStyle-Width="200px">
                    <FilterTemplate>
                        <table>
                            <tr>
                                <td>
                                    <asp:Label ID="Label1" Text="Title" runat="server" />
                                    <telerik:RadComboBox ID="RadComboBoxTitle" DataSourceID="SqlDataSource2" DataTextField="ContactTitle"
                                        DataValueField="ContactTitle" Height="200px" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("ContactTitle").CurrentFilterValue %>'
                                        runat="server" OnClientSelectedIndexChanged="TitleIndexChanged">
                                        <Items>
                                            <telerik:RadComboBoxItem Text="All" />
                                        </Items>
                                    </telerik:RadComboBox>
                                    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                                        <script type="text/javascript">
                                            function TitleIndexChanged(sender, args)
                                            {
                                                var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                                tableView.filter("ContactTitle", args.get_item().get_value(), "EqualTo");

                                            }
                                        </script>
                                    </telerik:RadScriptBlock>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Label ID="Label2" Text="City" runat="server" />
                                    <telerik:RadComboBox ID="RadComboBoxCity" DataSourceID="SqlDataSource3" DataTextField="City"
                                        DataValueField="City" Height="200px" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("City").CurrentFilterValue %>'
                                        runat="server" OnClientSelectedIndexChanged="CityIndexChanged">
                                        <Items>
                                            <telerik:RadComboBoxItem Text="All" />
                                        </Items>
                                    </telerik:RadComboBox>
                                    <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
                                        <script type="text/javascript">
                                            function CityIndexChanged(sender, args)
                                            {
                                                var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                                tableView.filter("City", args.get_item().get_value(), "EqualTo");

                                            }
                                        </script>
                                    </telerik:RadScriptBlock>
                                </td>
                            </tr>
                        </table>
                    </FilterTemplate>
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn UniqueName="City" DataField="City" HeaderText="City" HeaderStyle-Width="200px"
                    Display="true">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
    <br />
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT CustomerID, ContactName, ContactTitle, City, Country, Bool FROM Customers"
        runat="server"></asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT DISTINCT ContactTitle FROM Customers"
        runat="server"></asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource3" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT DISTINCT City FROM Customers"
        runat="server"></asp:SqlDataSource>
    <!-- content end -->
    </form>
</body>
</html>
