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

<!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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <div>
        <telerik:RadGrid ID="RadGrid2" Width="100%" DataSourceID="SqlDataSource5" AllowFilteringByColumn="True"
            AllowSorting="True" AllowPaging="True" PageSize="7" runat="server" AutoGenerateColumns="False"
            EnableLinqExpressions="false" OnItemCommand="RadGrid2_ItemCommand" OnPreRender="RadGrid1_PreRender">
            <MasterTableView DataKeyNames="OrderID">
                <Columns>
                    <telerik:GridTemplateColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID"
                        HeaderStyle-Width="110px">
                        <ItemTemplate>
                            <%# Eval("OrderID") %>
                        </ItemTemplate>
                        <HeaderTemplate>
                            <asp:LinkButton ID="LinkButton1" Text="OrderID" CommandName="Sort" CommandArgument="OrderID" runat="server" ToolTip="Click to sort" /><br />
                            <br />
                            Clear filters
                            <asp:ImageButton ID="btnShowAll" runat="server" ImageUrl="Img/filterCancel.gif" AlternateText="Show All"
                                ToolTip="Show All" OnClick="btnShowAll_Click" Style="vertical-align: middle" />
                        </HeaderTemplate>
                   </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="OrderDate" DataField="OrderDate" HeaderText="Order date"
                        HeaderStyle-Width="350px">
                        <ItemTemplate>
                            <%# String.Format("{0:D}", Eval("OrderDate")) %>
                        </ItemTemplate>
                        <HeaderTemplate>
                            <asp:LinkButton ID="LinkButton2" Text="OrderDate" CommandName="Sort" CommandArgument="OrderDate" runat="server" ToolTip="Click to sort" /><br />
                            <br />
                            From
                            <telerik:RadDatePicker ID="FromOrderDatePicker" runat="server" Width="85px" ClientEvents-OnDateSelected="FromDateSelected"
                                MinDate="07-04-1996" MaxDate="05-06-1998" FocusedDate="07-04-1996" DbSelectedDate='<%# startDate %>' />
                            to
                            <telerik:RadDatePicker ID="ToOrderDatePicker" runat="server" Width="85px" ClientEvents-OnDateSelected="ToDateSelected"
                                MinDate="07-04-1996" MaxDate="05-06-1998" FocusedDate="05-06-1998" DbSelectedDate='<%# endDate %>' />
                            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                                <script type="text/javascript">
                                    function FromDateSelected(sender, args) {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        var ToPicker = $find('<%# ((GridItem)Container).FindControl("ToOrderDatePicker").ClientID %>');

                                        var fromDate = FormatSelectedDate(sender);
                                        var toDate = FormatSelectedDate(ToPicker);

                                        tableView.filter("OrderDate", fromDate + " " + toDate, "Between");

                                    }
                                    function ToDateSelected(sender, args) {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        var FromPicker = $find('<%# ((GridItem)Container).FindControl("FromOrderDatePicker").ClientID %>');

                                        var fromDate = FormatSelectedDate(FromPicker);
                                        var toDate = FormatSelectedDate(sender);

                                        tableView.filter("OrderDate", fromDate + " " + toDate, "Between");
                                    }
                                    function FormatSelectedDate(picker) {
                                        var date = picker.get_selectedDate();
                                        var dateInput = picker.get_dateInput();
                                        var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());

                                        return formattedDate;
                                    }
                                </script>
                            </telerik:RadScriptBlock>
                        </HeaderTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
        <asp:SqlDataSource ID="SqlDataSource5" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT OrderID, OrderDate, ShippedDate, Freight FROM Orders"
            runat="server"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>
