Changing the page with advanced pager on [Enter] key press

2 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 13 Jun 2007 Link to this post

    Requirements

    RadGrid for ASP .NET version

    RadControls for ASP .NET AJAX version

    Q1 2007 and later


    2008.1.415 and later
    .NET version 2.0 and later
    Visual Studio version

    2005 and later
    Programming language

    JavaScript, C#
    Browser support

    all supported by RadGrid for ASP .NET


    all browsers supported by RadControls for ASP .NET AJAX



    PROJECT DESCRIPTION

    This demo demonstrates how RadGrid Advanced Pager controls can be easily accessed client-side and how the page can be switched on [Enter] key press.

    Grid Pager in Advanced Mode renders two textboxes and link buttons as demonstrated here (change to Advanced mode):

    http://www.telerik.com/demos/aspnet/Grid/Examples/Programming/Slider/DefaultCS.aspx

    The project operates with the text box used to change grid page as well as "Go" link button. Instead of using the exact textbox ID, which depends on Grid element ID (for example "RadGrid1_ctl01_ctl03_ctl01_GoToPageTextBox") or even loop though the RadGrid's elements tree on the client, we pass the client ID on ItemCreated server-side. The same event is used to attach custom handler to the OnKeyDown client-side event of the textbox where on 'Enter' press the 'Go' link button click is simulated.

            <script type="text/javascript"
                function keyDown (e) { 
                    //press 'enter'  
                    if (e.keyCode == 13)  
                    {    
                        //get text box client id to check if it's not empty 
                        var tbCliendId = document.getElementById("tbId").value; 
                        var tb = document.getElementById(tbCliendId); 
                        if (tb.value.length > 0) 
                        { 
                            //get "Go" button client ID from the hidden field value 
                            var buttonCliendId = document.getElementById("goLinkId").value; 
                            var button = document.getElementById(buttonCliendId); 
                             
                            //simulates link button click - button.click() functions as expected on IE only 
                            window.location.href = button.href; 
                        } 
                    } 
                } 
            </script> 
            <asp:HiddenField ID="tbId" runat="server" /> 
            <asp:HiddenField ID="goLinkId" runat="server" /> 
            <br /> 
            <radG:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowCustomPaging="False" 
                PageSize="5" EnableAJAX="True" OnItemCreated="RadGrid1_ItemCreated" DataSourceID="AccessDataSource1"
                <PagerStyle Mode="Advanced"></PagerStyle> 
            </radG:RadGrid> 
            <br /> 
            <asp:AccessDataSource ID="AccessDataSource1" DataFile="~/App_Data/Nwind.mdb" SelectCommand="SELECT CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers" 
                runat="server"></asp:AccessDataSource> 
     

        protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e) 
        { 
            if (e.Item is GridPagerItem) 
            { 
                //find the text box 
                TextBox pageNum = (TextBox)e.Item.FindControl("GoToPageTextBox"); 
                tbId.Value = pageNum.ClientID; 
     
                //find 'Go' link button 
                LinkButton goLink = (LinkButton)e.Item.FindControl("GoToPageLinkButton"); 
                goLinkId.Value = goLink.ClientID; 
     
                //attach to onkeydown event 
                pageNum.Attributes.Add("onkeydown""keyDown(event);"); 
            } 
        } 
     
  2. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 10 Mar 2008 Link to this post

    Hi,

    Attached to this thread is an updated version of the code, which utilizes the Prometheus build of the control.
    Below is all the code used in the sample:

    .Js
     <script type="text/javascript">  
          
         function keyDown (e) {  
                    //press 'enter'   
                    if (e.keyCode == 13)   
                    {     
                        //get text box client id to check if it's not empty  
                        var tbCliendId = document.getElementById("tbId").value;  
                        var tb = document.getElementById(tbCliendId);  
                        if (tb.value.length > 0)  
                        {  
                            //get "Go" button client ID from the hidden field value  
                            var buttonCliendId = document.getElementById("goLinkId").value;  
                            var button = document.getElementById(buttonCliendId);  
                              
                            //simulates link button click - button.click() functions as expected on IE only  
                            window.location.href = button.href;  
                        }  
                    }  
                    }  
          
        </script> 

    .aspx
       <asp:HiddenField ID="tbId" runat="server" /> 
          <asp:HiddenField ID="goLinkId" runat="server" /> 
            <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="AccessDataSource1" GridLines="None" OnItemCreated="RadGrid1_ItemCreated" AllowPaging="True">  
             <PagerStyle Mode="Advanced"></PagerStyle> 
                <ExportSettings> 
                    <Pdf FontType="Subset" PaperSize="Letter" /> 
                    <Excel Format="Html" /> 
                    <Csv ColumnDelimiter="Comma" RowDelimiter="NewLine" /> 
                </ExportSettings> 
                <MasterTableView AutoGenerateColumns="False" CommandItemDisplay="None" CurrentResetPageIndexAction="SetPageIndexToFirst" 
                    DataKeyNames="CustomerID" DataSourceID="AccessDataSource1" Dir="LTR" Frame="Border" 
                    TableLayout="Auto">  
                    <RowIndicatorColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" 
                        Visible="False">  
                        <HeaderStyle Width="20px" /> 
                    </RowIndicatorColumn> 
                    <ExpandCollapseColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" 
                        Resizable="False" Visible="False">  
                        <HeaderStyle Width="20px" /> 
                    </ExpandCollapseColumn> 
                    <Columns> 
                        <telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="CustomerID" 
                            FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="CustomerID" 
                            ReadOnly="True" SortExpression="CustomerID" UniqueName="CustomerID">  
                        </telerik:GridBoundColumn> 
                        <telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="CompanyName" 
                            FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="CompanyName" 
                            SortExpression="CompanyName" UniqueName="CompanyName">  
                        </telerik:GridBoundColumn> 
                        <telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="ContactName" 
                            FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="ContactName" 
                            SortExpression="ContactName" UniqueName="ContactName">  
                        </telerik:GridBoundColumn> 
                        <telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="Address" FilterListOptions="VaryByDataType" 
                            ForceExtractValue="None" HeaderText="Address" SortExpression="Address" UniqueName="Address">  
                        </telerik:GridBoundColumn> 
                        <telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="PostalCode" 
                            FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="PostalCode" 
                            SortExpression="PostalCode" UniqueName="PostalCode">  
                        </telerik:GridBoundColumn> 
                        <telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="Country" FilterListOptions="VaryByDataType" 
                            ForceExtractValue="None" HeaderText="Country" SortExpression="Country" UniqueName="Country">  
                        </telerik:GridBoundColumn> 
                    </Columns> 
                    <EditFormSettings> 
                        <EditColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType">  
                        </EditColumn> 
                    </EditFormSettings> 
                </MasterTableView> 
            </telerik:RadGrid><asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Nwind.mdb" 
                SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [Address], [PostalCode], [Country] FROM [Customers]">  
            </asp:AccessDataSource> 
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
                <AjaxSettings> 
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">  
                        <UpdatedControls> 
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
                        </UpdatedControls> 
                    </telerik:AjaxSetting> 
                </AjaxSettings> 
            </telerik:RadAjaxManager> 
          
          

    .cs
     protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)  
        {  
            if (e.Item is GridPagerItem)  
            {  
                //find the text box  
                RadNumericTextBox pageNum = (RadNumericTextBox)e.Item.FindControl("GoToPageTextBox");  
                tbId.Value = pageNum.ClientID;  
     
                //find 'Go' link button  
                LinkButton goLink = (LinkButton)e.Item.FindControl("GoToPageLinkButton");  

              goLinkId.Value = goLink.ClientID;

     
                //attach to onkeydown event  
                pageNum.Attributes.Add("onkeydown", "keyDown(event);");  
            }  
        } 

    Kind regards,
    Yavor
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top