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

<%@ 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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
            </asp:ScriptReference>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
            </asp:ScriptReference>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
            </asp:ScriptReference>
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function RadGrid1_DataBinding(sender, args) {
                // This event will be raised twice by default! 
                // The first call will retrieve data and the second call will retrieve total items count.
                // If you want to cancel the event you can use:
                // args.set_cancel(true);

                // get data source location, method name and arguments
                var dataSourceLocation = args.get_location();
                var selectMethodName = args.get_methodName();
                var methodArguments = args.get_methodArguments();

                // set data source location and method name
                // args.set_location("url to your data source");
                // args.set_methodName("your method name");

                // The grid will always pass by default four arguments for the SelectMethod.
                // SelectCountMethod will be called with no arguments by default!

                // get names for select parameters
                var startRowIndexParameterName = sender.ClientSettings.DataBinding.StartRowIndexParameterName;
                // default is "startRowIndex". 

                var maximumRowsParameterName = sender.ClientSettings.DataBinding.MaximumRowsParameterName;
                // default is "maximumRows"

                var sortParameterName = sender.ClientSettings.DataBinding.SortParameterName;
                // default is "sortExpression"

                var filterParameterName = sender.ClientSettings.DataBinding.FilterParameterName;
                // default is "filterExpression"

                // construct your own arguments
                // var myMethodArguments = new Object();
                // myMethodArguments.myArgumentName = "myArgumentValue";
                // args.set_methodArguments(myMethodArguments);           
            }
            function pageLoad(sender, args) {
                var hdnField = $get("<%=hdnField.ClientID %>");
                var radGrid = $find("<%=RadGrid1.ClientID %>");
                if (hdnField.value === 'true') {
                    radGrid.get_masterTableView().filter("Name", "Maxilaku", Telerik.Web.UI.GridFilterFunction.EqualTo, true);
                }
            }
        </script>
    </telerik:RadCodeBlock>
    <div>
        <telerik:RadGrid ID="RadGrid1" AllowSorting="True" AllowPaging="True" AllowFilteringByColumn="True"
            AutoGenerateColumns="False" runat="server" CellSpacing="0" GridLines="None">
            <MasterTableView>
                <Columns>
                    <telerik:GridBoundColumn DataField="ID" HeaderText="ID" DataType="System.Int32">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Name" HeaderText="Name">
                        <FilterTemplate>
                            <telerik:RadComboBox ID="RadComboBoxTitle" Height="200px" AppendDataBoundItems="true"
                                SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Name").CurrentFilterValue %>'
                                runat="server" OnClientSelectedIndexChanged="NameIndexChanged">
                                <Items>
                                    <telerik:RadComboBoxItem Text="All" />
                                    <telerik:RadComboBoxItem Text="1" Value="Maxilaku" />
                                    <telerik:RadComboBoxItem Text="2" Value="Côte de Blaye" />
                                    <telerik:RadComboBoxItem Text="3" Value="Rogede sild" />
                                    <telerik:RadComboBoxItem Text="4" Value="Boston Crab Meat" />
                                    <telerik:RadComboBoxItem Text="5" Value="Gula Malacca" />
                                    <telerik:RadComboBoxItem Text="6" Value="Singaporean Hokkien Fried Mee" />
                                </Items>
                            </telerik:RadComboBox>
                            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                                <script type="text/javascript">
                                    function NameIndexChanged(sender, args) {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        if (args.get_item().get_value() == "") {
                                            tableView.clearFilter();
                                        }
                                        else {
                                            tableView.filter("Name", args.get_item().get_value(), "EqualTo");
                                        }
                                    }
                                </script>
                            </telerik:RadScriptBlock>
                        </FilterTemplate>
                    </telerik:GridBoundColumn>
                    <telerik:GridNumericColumn DataField="UnitPrice" HeaderText="Unit price" DataType="System.Decimal" >
                    <FilterTemplate>
                            <telerik:RadComboBox ID="RadComboBoxUnitPrice" Height="200px" AppendDataBoundItems="true"
                                SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("UnitPrice").CurrentFilterValue %>'
                                runat="server" OnClientSelectedIndexChanged="UnitPriceIndexChanged">
                                <Items>
                                    <telerik:RadComboBoxItem Text="All" />
                                    <telerik:RadComboBoxItem Text="5" Value="5" />
                                    <telerik:RadComboBoxItem Text="6" Value="6" />
                                    <telerik:RadComboBoxItem Text="7" Value="7" />
                                    <telerik:RadComboBoxItem Text="8" Value="8" />
                                    <telerik:RadComboBoxItem Text="9" Value="9" />
                                    <telerik:RadComboBoxItem Text="10" Value="10" />
                                </Items>
                            </telerik:RadComboBox>
                            <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
                                <script type="text/javascript">
                                    function UnitPriceIndexChanged(sender, args) {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        if (args.get_item().get_value() == "") {
                                            tableView.clearFilter();
                                        }
                                        else {
                                            tableView.filter("UnitPrice", args.get_item().get_value(), "GreaterThan");
                                        }
                                    }
                                </script>
                            </telerik:RadScriptBlock>
                        </FilterTemplate>
                    </telerik:GridNumericColumn>
                    <telerik:GridBoundColumn DataField="Date" DataFormatString="{0:d}" HeaderText="Date"
                        DataType="System.DateTime" >
                        <FilterTemplate>
                            <telerik:RadComboBox ID="RadComboBoxDate" Height="200px" AppendDataBoundItems="true"
                                SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Date").CurrentFilterValue %>'
                                runat="server" OnClientSelectedIndexChanged="DateIndexChanged">
                                <Items>
                                    <telerik:RadComboBoxItem Text="All" />
                                    <telerik:RadComboBoxItem Text="5/10/2007" Value="5/10/2007" />
                                    <telerik:RadComboBoxItem Text="4/13/2007" Value="4/13/2007" />
                                    <telerik:RadComboBoxItem Text="5/10/2007" Value="5/10/2007" />
                                    <telerik:RadComboBoxItem Text="5/12/2008" Value="5/12/2008" />
                                    <telerik:RadComboBoxItem Text="1/19/2008" Value="1/19/2008" />
                                    <telerik:RadComboBoxItem Text="5/10/2007" Value="5/10/2007" />
                                </Items>
                            </telerik:RadComboBox>
                            <telerik:RadScriptBlock ID="RadScriptBlock3" runat="server">
                                <script type="text/javascript">
                                    function DateIndexChanged(sender, args) {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        if (args.get_item().get_value() == "") {
                                            tableView.clearFilter();
                                        }
                                        else {
                                            tableView.filter("Date", args.get_item().get_value(), "GreaterThan");
                                        }
                                    }
                                </script>
                            </telerik:RadScriptBlock>
                        </FilterTemplate>
                        </telerik:GridBoundColumn>
                    <telerik:GridCheckBoxColumn DataField="Discontinued" HeaderText="Discontinued" DataType="System.Boolean" />
                </Columns>
            </MasterTableView>
            <PagerStyle AlwaysVisible="true" />
            <ClientSettings>
                <DataBinding Location="WebService.asmx" SelectMethod="GetData" SelectCountMethod="GetCount" />
                <ClientEvents OnDataBinding="RadGrid1_DataBinding" />
            </ClientSettings>
        </telerik:RadGrid>
        <asp:HiddenField ID="hdnField" runat="server" />
    </div>
    </form>
</body>
</html>
