<%@ Page Language="C#" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    public void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
    {
        RadGrid1.AllowCustomPaging = true;
        RadGrid1.VirtualItemCount = GetCount(RadGrid1.MasterTableView.FilterExpression);
        RadGrid1.DataSource = new System.Collections.Generic.List<Employees.Employee>();
    }

    public void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
    {
        if (e.Column.IsBoundToFieldName("BirthDate"))
        {
            ((GridBoundColumn)e.Column).DataFormatString = "{0:dd/MM/yyyy}";
        }
    }

    [System.Web.Services.WebMethod]
    public static int GetCount(string filterExpressions)
    {
        return Employees.GetCount(filterExpressions);
    }

    [System.Web.Services.WebMethod]
    public static System.Collections.Generic.List<Employees.Employee> GetData(int startIndex, int maximumRows,
        string sortExpressions, string filterExpressions)
    {
        return Employees.GetData(startIndex, maximumRows, sortExpressions, filterExpressions);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <script type="text/javascript">
        function pageLoad()
        {
           $get("<%= Panel1.ClientID %>").innerHTML = "";

           var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
               
           PageMethods.GetData(0, tableView.get_pageSize(), 
                tableView.get_sortExpressions().toString(), tableView.get_filterExpressions().toString(), 
                    updateGrid);
        }
        
        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 currentPageIndex = sender.get_masterTableView().get_currentPageIndex();
            var pageSize = sender.get_masterTableView().get_pageSize();

            var sortExpressions = sender.get_masterTableView().get_sortExpressions();
            var filterExpressions = sender.get_masterTableView().get_filterExpressions();
            
            if(sortExpressions.length > 0 && filterExpressions.length > 0 && currentPageIndex > 0)
            {
                sender.get_masterTableView().set_currentPageIndex(0);
            }
            
            var sortExpressionsAsSQL = sortExpressions.toString();
            var filterExpressionsAsSQL = filterExpressions.toString();
            
            var maximumRows = <%= (RadGrid1.AllowPaging)? RadGrid1.PageSize : RadGrid1.Items.Count %>;

            PageMethods.GetData(currentPageIndex * pageSize, maximumRows, 
                sortExpressionsAsSQL, filterExpressionsAsSQL, updateGrid);
            
            if(args.get_commandName() == "Filter")
            {
                PageMethods.GetCount(filterExpressionsAsSQL, updateVirtualItemCount);
            }
        }

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

        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)
        {
            // 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();
        }
        </script>

    </telerik:RadCodeBlock>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server" />
            <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" OutputCompression="AutoDetect" />
            <asp:CheckBox ID="CheckBox1" Text="Allow multi column sorting" Checked="true" runat="server"
                onclick="toggleAllowMultiColumnSorting(this, event);" />
            <br />
            <br />
            <telerik:RadGrid ID="RadGrid1" PageSize="5" EnableViewState="false" Skin="Sunset"
                runat="server" AllowPaging="true" AllowSorting="True" AllowFilteringByColumn="true"
                GridLines="None" OnNeedDataSource="RadGrid1_NeedDataSource" OnColumnCreated="RadGrid1_ColumnCreated">
                <MasterTableView AllowMultiColumnSorting="true" />
                <ClientSettings>
                    <ClientEvents OnCommand="RadGrid1_Command" OnRowDataBound="RadGrid1_RowDataBound" />
                </ClientSettings>
            </telerik:RadGrid>
            <br />
            <br />
            Events:
            <asp:Panel ID="Panel1" Style="height: 200px; overflow: auto; padding: 15px; background: #f4ede1;
                border: #cbbda9 1px solid;" runat="server">
            </asp:Panel>
        </div>
    </form>
</body>
</html>
