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

Thread is closed for posting
2 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 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);"); 
            } 
        } 
     
  3. 23C72464-8FC9-43C3-9A12-B431B37B7758
    23C72464-8FC9-43C3-9A12-B431B37B7758 avatar
    11 posts
    Member since:
    Dec 2013

    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

This Code Library is part of the product documentation and subject to the respective product license agreement.