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

<!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">
    <div>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadGrid ID="RadGrid2" Width="100%" AllowFilteringByColumn="True"
            AllowSorting="True" AllowPaging="True" PageSize="7" runat="server" AutoGenerateColumns="False"
            EnableLinqExpressions="false">
            <MasterTableView ClientDataKeyNames="OrderID">
                <Columns>
                    <telerik:GridBoundColumn UniqueName="OrderDate" DataField="OrderDate" HeaderText="Order date"
                        DataFormatString="{0:D}" HeaderStyle-Width="350px" DataType="System.DateTime">
                        <FilterTemplate>
                            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>
                        </FilterTemplate>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="ShippedDate" DataField="ShippedDate" HeaderText="Shipped date"
                        DataFormatString="{0:d}" HeaderStyle-Width="100px" DataType="System.DateTime">
                        <FilterTemplate>
                            <telerik:RadDatePicker ID="ShippedDatePicker" runat="server" Width="100px" MinDate="07-04-1996"
                                MaxDate="05-06-1998" FocusedDate="07-04-1996" ClientEvents-OnDateSelected="DateSelected"
                                DbSelectedDate='<%# SetShippedDate(Container) %>' />
                            <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
                                <script type="text/javascript">
                                    function DateSelected(sender, args)
                                    {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        
                                        var date = FormatSelectedDate(sender);

                                        tableView.filter("ShippedDate", date, "GreaterThan");
                                    }
                                    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>
                        </FilterTemplate>
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <DataBinding Location="http://services.odata.org/Northwind/Northwind.svc" ResponseType="JSONP">
                    <DataService TableName="Orders" Type="OData" />
                </DataBinding>
            </ClientSettings>
        </telerik:RadGrid>
    </div>
    </form>
</body>
</html>
