<%@ Page 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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server">
    </asp:ScriptManager>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <script type="text/javascript">
        <!--

            var additionalCondition = "";

            function pageLoad(sender, eventArgs) {
                var data = [];
                var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                tableView.set_dataSource(data);
                tableView.dataBind();
            }

            function BindGrid() {
                $get("<%= Panel1.ClientID %>").innerHTML = "";

                var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

                $find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= RadGrid1.ClientID %>");

                PageMethods.GetData(0, tableView.get_pageSize(),
                tableView.get_sortExpressions().toString(), tableView.get_filterExpressions().toList(), additionalCondition,
                    updateGrid);

                PageMethods.GetCount(tableView.get_filterExpressions().toList(), additionalCondition, updateVirtualItemCount);
            }

            function RadGrid1_Command(sender, args) {
                $get("<%= Panel1.ClientID %>").innerHTML = String.format("<b>RadGrid1_Command</b><br />CommandName : {0}, CommandArgument : {1} <br /><br />", args.get_commandName(), args.get_commandArgument());

                args.set_cancel(true);

                var pageSize = sender.get_masterTableView().get_pageSize();

                var sortExpressions = sender.get_masterTableView().get_sortExpressions();
                var filterExpressions = sender.get_masterTableView().get_filterExpressions();

                var currentPageIndex = sender.get_masterTableView().get_currentPageIndex();

                if (args.get_commandName() == "Filter")
                    currentPageIndex = 0;


                var sortExpressionsAsSQL = sortExpressions.toString();
                var filterExpressionsAsSQL = filterExpressions.toString();

                $find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= RadGrid1.ClientID %>");

                PageMethods.GetData(currentPageIndex * pageSize, pageSize, sortExpressionsAsSQL, filterExpressions.toList(), additionalCondition, updateGrid);

                if (args.get_commandName() == "Filter") {
                    PageMethods.GetCount(filterExpressions.toList(), additionalCondition, updateVirtualItemCount);
                }
            }

            function updateGrid(result) {
                var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                tableView.set_dataSource(result);
                tableView.dataBind();

                $find("<%= RadAjaxLoadingPanel1.ClientID %>").hide("<%= RadGrid1.ClientID %>");
            }

            function updateVirtualItemCount(result) {
                var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                tableView.set_virtualItemCount(result);
            }

            function toggleAllowMultiColumnSorting(sender, e) {
                var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                tableView.set_allowMultiColumnSorting(sender.checked);
            }

            function RadGrid1_RowDataBound(sender, args) {
                var radTextBox1 = args.get_item().findControl("LastName"); // find control
                radTextBox1.set_value(args.get_dataItem()["LastName"]);

                // conditional formatting
                args.get_item().get_cell("TitleOfCourtesy").style.fontWeight = (args.get_dataItem()["TitleOfCourtesy"] == "Dr.") ? "bold" : "normal";

                var sb = new Sys.StringBuilder();

                sb.appendLine("<b>RadGrid1_RowDataBound</b><br />");

                for (var item in args.get_dataItem()) {
                    sb.appendLine(String.format("{0} : {1}<br />", item, args.get_dataItem()[item]));
                }

                sb.appendLine("<br />");
                sb.appendLine("<br />");

                $get("<%= Panel1.ClientID %>").innerHTML += sb.toString();
            }

            function showData() 
            {
                var combo1 = $find('<%=combo1.ClientID%>');
                var combo2 = $find('<%=combo2.ClientID%>');

                additionalCondition = "EmployeeID >= " + combo1.get_selectedItem().get_value() + " AND EmployeeID <= " + combo2.get_selectedItem().get_value()  ;

                BindGrid();
            }
            
        -->
        </script>

    </telerik:RadCodeBlock>
    <!-- content start -->
    <asp:CheckBox ID="CheckBox1" Text="Allow multi column sorting" Checked="true" runat="server"
        onclick="toggleAllowMultiColumnSorting(this, event);" />
    <br />
    Select all employees with ID's between:
    <br />
    <telerik:RadComboBox ID="combo1" runat="server" DataSourceID="SqlDataSource1" DataTextField="EmployeeID"
      DataValueField="EmployeeID">
    </telerik:RadComboBox>
    <telerik:RadComboBox ID="combo2" runat="server" DataSourceID="SqlDataSource1"
        DataTextField="EmployeeID" DataValueField="EmployeeID">
    </telerik:RadComboBox>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT EmployeeID FROM [Employees] ORDER BY EmployeeID"></asp:SqlDataSource>
    <telerik:RadGrid ID="RadGrid1" EnableViewState="false" runat="server" AllowPaging="true"
        AllowSorting="True" AllowFilteringByColumn="true" GridLines="None">
        <ItemStyle Wrap="false" />
        <MasterTableView AllowMultiColumnSorting="true" TableLayout="Fixed">
            <Columns>
                <telerik:GridNumericColumn DataField="EmployeeID" HeaderText="EmployeeID" HeaderStyle-Width="100px"
                    FilterControlWidth="70px" />
                <telerik:GridTemplateColumn SortExpression="LastName" DataField="LastName" HeaderText="LastName">
                    <ItemTemplate>
                        <telerik:RadTextBox ID="LastName" runat="server" Width="80px" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName" />
                <telerik:GridBoundColumn DataField="Title" HeaderText="Title" />
                <telerik:GridBoundColumn DataField="TitleOfCourtesy" HeaderText="TitleOfCourtesy" />
                <telerik:GridDateTimeColumn DataField="BirthDate" DataFormatString="{0:MM/dd/yyyy}"
                    HeaderText="BirthDate" />
            </Columns>
        </MasterTableView>
        <PagerStyle AlwaysVisible="true" Mode="NumericPages" />
        <ClientSettings>
            <ClientEvents OnCommand="RadGrid1_Command" OnRowDataBound="RadGrid1_RowDataBound" />
        </ClientSettings>
    </telerik:RadGrid>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
    <input id="dataButton" value="Display data!" type="button" onclick="showData()" />
    <br />
    <br />
    Events:
    <asp:Panel ID="Panel1" Style="height: 200px; overflow: auto; padding: 15px;" CssClass="module"
        runat="server">
    </asp:Panel>
    </form>
</body>
</html>
