<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

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

            <script type="text/javascript">
               function HandleScrolling(e)
            {
              var grid = $find("<%=StaffGrid.ClientID %>");

              var scrollArea = document.getElementById("<%= StaffGrid.ClientID %>" + "_GridData");
              
              if(IsScrolledToBottom(scrollArea))
              {
                var currentlyDisplayedRecords = grid.get_masterTableView().get_pageSize() * (grid.get_masterTableView().get_currentPageIndex() + 1);
                
                //if the presently visible items are less than the entire source records count 
                //trigger an ajax request to increase them
                if(currentlyDisplayedRecords < 100)
                { 
                  $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadMoreRecords");
                }
              }
            }
            //this method calculates whether you have reached the bottom when dragging the vertical grid scroll
            function IsScrolledToBottom(scrollArea)
            {
                var currentPosition = scrollArea.scrollTop + scrollArea.clientHeight;
                return currentPosition == scrollArea.scrollHeight;
            }
                var timer = null;
                function KeyUp()  {
                    if (timer != null) 
                    {
                      clearTimeout(timer);
                    }
                    timer = setTimeout(LoadTable,500);
                }

                function LoadTable()                {
                     $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("StaffGrid");
                }
            </script>

        </telerik:RadCodeBlock>
        <div id="titleBar">
            Staff View</div>
        <div style="float: right">
            <asp:Label ID="lblFilter" runat="server" Text="Search:" CssClass="fielddata"></asp:Label>
            <telerik:RadComboBox ID="ddlSearch" runat="server" Skin="Default">
                <Items>
                    <telerik:RadComboBoxItem Text="Name" Value="StaffName" />
                    <telerik:RadComboBoxItem Text="Title" Value="Title" />
                    <telerik:RadComboBoxItem Text="Office" Value="Office" />
                    <telerik:RadComboBoxItem Text="Cost Center" Value="CostCenter" />
                </Items>
            </telerik:RadComboBox>
            <asp:TextBox ID="txtSearch" runat="server" OnTextChanged="txtSearch_TextChanged"></asp:TextBox>
            <asp:ImageButton ID="btnSearch" runat="server" ImageUrl="~/Images/FilterGo.gif" BackColor="white" />
            <asp:ImageButton ID="btnShowAll" runat="server" ImageUrl="~/Images/FilterCancel.gif"
                BackColor="white" OnClick="btnShowAll_Click" /></div>
        <telerik:RadGrid ID="StaffGrid" runat="server" Width="97%" AllowPaging="True" PageSize="12"
            AllowSorting="True" GridLines="None" BackColor="White" ShowGroupPanel="True">
            <PagerStyle Mode="NumericPages" />
            <MasterTableView TableLayout="Fixed" AutoGenerateColumns="False" DataKeyNames="UserID"
                AllowMultiColumnSorting="True" AllowPaging="True">
                <RowIndicatorColumn>
                    <HeaderStyle Width="20px" />
                </RowIndicatorColumn>
                <ExpandCollapseColumn>
                    <HeaderStyle Width="20px" />
                </ExpandCollapseColumn>
                <Columns>
                    <telerik:GridBoundColumn DataField="UserID" DataType="System.Int64" HeaderText="UserID"
                        ReadOnly="True" SortExpression="UserID" UniqueName="UserID" Visible="False" FilterImageToolTip="">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="StaffName" HeaderText="Name" ReadOnly="True"
                        SortExpression="StaffName" UniqueName="StaffName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Title" HeaderText="Title" SortExpression="Title"
                        UniqueName="Title">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Ext" HeaderText="Ext" SortExpression="Ext" UniqueName="Ext"
                        ItemStyle-Height="15%" HeaderStyle-Width="15%">
                        <HeaderStyle Width="15%" />
                        <ItemStyle Height="15%" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="IMInfo" HeaderText="IMInfo" ReadOnly="True" SortExpression="IMInfo"
                        UniqueName="IMInfo" Visible="False">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="CellPhone" HeaderText="CellPhone" SortExpression="CellPhone"
                        UniqueName="CellPhone" Visible="False">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Office" HeaderText="Office" SortExpression="Office"
                        UniqueName="Office">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="CostCenter" HeaderText="Cost Center" SortExpression="CostCenter"
                        UniqueName="CostCenter">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <ClientEvents />
                <Scrolling AllowScroll="True" UseStaticHeaders="True" EnableVirtualScrollPaging="true"
                    SaveScrollPosition="True" ScrollHeight="300px" FrozenColumnsCount="1"></Scrolling>
            </ClientSettings>
        </telerik:RadGrid>
        <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" OnAjaxUpdate="RadToolTipManager1_AjaxUpdate"
            Position="TopCenter" Sticky="true" OffsetY="0" BackColor="#45473F" BorderColor="#45473F"
            BorderWidth="0px" EnableTheming="True" OffsetX="50" ShowDelay="200" ShowEvent="OnClick">
        </telerik:RadToolTipManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="StaffGrid">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="StaffGrid" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="btnSearch">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="StaffGrid" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
            Width="75px" Transparency="25">
            <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
                style="border: 0;" />
        </telerik:RadAjaxLoadingPanel>
    </form>
</body>
</html>
