On key press enter to search inside radgrid

11 posts, 0 answers
  1. Avihai
    Avihai avatar
    21 posts
    Member since:
    Aug 2013

    Posted 22 Dec 2013 Link to this post

    Hello everyone,




    I have a little problem I have on left hand side of RadGrid  textboxes and search button... on the right hand side I have a Rad grid that been loaded with info from DB... my question after filling the text boxes with info to search I want to allow on key press enter instead of the user click to search data in the radgrid  how can I do this??



    ***************************************aspx filter code*****************************************



    <telerik:RadPanelBar runat="server" ID="rpbMainMenu" Width="248px" Height="517px" ExpandMode="FullExpandedItem" >

        <Items>                     

              <telerik:RadPanelItem  Expanded="True"  ImageUrl="../Images/Layout/phone_edited.png"  Text="Phone Book Search">                                      

                        <ContentTemplate>

                        <div style=" border:0px solid red; padding:20px 0px 0px 10px">

                        <table class="filtersTable">

                             <tr>

                                <td>Contact Type:</td>

                                <td><telerik:RadComboBox runat="server" CheckBoxes="true" ID="rcbFilterPersonType" EmptyMessage="Select Person Type" Enabled="True"></telerik:RadComboBox></td>

                            </tr>

                            <tr>

                                <td>First Name:</td>

                                <td><asp:TextBox ID="txtFilterFirstName" runat="server" MaxLength="50"></asp:TextBox></td>

                            </tr>

                            <tr>

                                <td>Last Name:</td>

                                <td><asp:TextBox ID="txtFilterLastName" runat="server" MaxLength="50"></asp:TextBox></td>

                            </tr>

                            <tr>

                                <td>Company:</td>

                                <td><asp:TextBox ID="txtFilterCompany" runat="server" MaxLength="25"></asp:TextBox></td>

                            </tr>

                            <tr>

                                <td>Email:</td>

                                <td><asp:TextBox ID="txtFilterEmail" runat="server" MaxLength="50"></asp:TextBox></td>

                            </tr>

                            <tr>

                                <td>Cell Phone:</td>

                                <td> <asp:TextBox id="txtFilterCellPhone" runat="server" MaxLength="50" ></asp:TextBox></td>

                            </tr>

                            <tr>

                                <td>&nbsp;</td>

                                <td>

                                    <telerik:RadButton ID="pSearchBtn" runat="server" Text="Search" Style="display: block; width: 80px;" AutoPostBack="true" OnClick="GeneralSearchBtn_Click" Font-Bold="False" ButtonType="SkinnedButton">

                                        <Icon PrimaryIconCssClass="rbSearch" PrimaryIconLeft="4" PrimaryIconTop="4"></Icon>

                                    </telerik:RadButton>

                                </td>

                            </tr>

                            </tr>

                        </table>

                        </div>

        </ContentTemplate>

    </telerik:RadPanelItem>

    </Items>

    </telerik:RadPanelBar>





    *******aspx rad grid*******************

     <telerik:RadGrid

                ID="rgPhoneBook"

                runat="server" 

                Width="100%" 

                AutoGenerateColumns="False"

                AllowPaging="True"

                AllowSorting="True"

                PageSize="20"

                CellSpacing="0" GridLines="None" Height="100%"

                OnItemCommand="rgPhoneBook_ItemCommand"

                OnPageIndexChanged="rgPhoneBook_OnPageIndexChanged"

                OnSortCommand="rgPhoneBook_OnSortCommand"

                EnableHeaderContextFilterMenu="False">

                <ClientSettings>

                    <Selecting AllowRowSelect="True" />

                    <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" FrozenColumnsCount="2" ScrollHeight="380px"/>

                </ClientSettings>

                <PagerStyle Mode="NumericPages"></PagerStyle>

                <MasterTableView ShowHeadersWhenNoRecords="true"  Font-Size="11px" GridLines="None" AllowPaging="True" CommandItemDisplay="Top" AllowAutomaticUpdates="False" TableLayout="Fixed">

                    <Columns>

                          <telerik:GridBoundColumn DataField="PersonID" Display="false"/>

                          <telerik:GridTemplateColumn HeaderText="First Name" HeaderStyle-Width="120px"  SortExpression="FirstName">

                            <ItemTemplate>

                                 <%# RenderActiveUser(DataBinder.Eval(Container.DataItem, "Active"))%> &nbsp; <%# DataBinder.Eval(Container.DataItem, "FirstName")%>

                            </ItemTemplate>

                          </telerik:GridTemplateColumn>

                          <telerik:GridBoundColumn HeaderText="Last Name" HeaderStyle-Width="120px" ItemStyle-Width="130px" DataField="LastName" ShowFilterIcon="false" SortExpression="LastName" CurrentFilterFunction="StartsWith" AutoPostBackOnFilter="true"/>

                          <telerik:GridBoundColumn HeaderText="Company" HeaderStyle-Width="80px" ItemStyle-Width="130px" DataField="Company" ShowFilterIcon="false" SortExpression="Company" CurrentFilterFunction="StartsWith" AutoPostBackOnFilter="true"/>

                          <telerik:GridBoundColumn HeaderText="Email" HeaderStyle-Width="150px" ItemStyle-Width="70px" DataField="Email" ShowFilterIcon="false" SortExpression="Email" CurrentFilterFunction="StartsWith" AutoPostBackOnFilter="true"/>

                          <telerik:GridBoundColumn HeaderText="Mobile Phone" HeaderStyle-Width="120px" ItemStyle-HorizontalAlign="Left" DataField="CellNum" ShowFilterIcon="false" SortExpression="CellNum" CurrentFilterFunction="StartsWith" AutoPostBackOnFilter="true"/>

                          <telerik:GridBoundColumn HeaderText="Person Type" HeaderStyle-Width="130px" ItemStyle-HorizontalAlign="Left" DataField="PeopleType" ShowFilterIcon="false" SortExpression="PeopleType" CurrentFilterFunction="StartsWith" AutoPostBackOnFilter="true"/>

                          <telerik:GridTemplateColumn HeaderText="Edit"  HeaderStyle-Width="70px">

                              <ItemTemplate>                           

                                     <%# GenerateEditLink(DataBinder.Eval(Container.DataItem, "PersonID"))%>                             

                              </ItemTemplate>

                          </telerik:GridTemplateColumn>

                           </Columns>

                    <CommandItemTemplate>

                     <div style="padding: 5px 5px;">

                        <table class="rcCommandTable" width="100%">

                            <td>

                                <asp:LinkButton ID="lbAddNewPerson" runat="server" CssClass="rgAdd" Width="20" Height="20"  OnClientClick="Javascript:return showDialogInitially();"  ></asp:LinkButton> Add New Person

                            </td>

                         </table>

                    </div>

                    </CommandItemTemplate>

                </MasterTableView>

            </telerik:RadGrid>

            </div>

        </ContentTemplate>

    </asp:UpdatePanel>







  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 22 Dec 2013 Link to this post

    Hi Avihai,

    Please try the following JavaScript on onkeydown event of 'txtFilterFirstName'.

    JavaScript:
    <script type="text/javascript">
        function keydown(e) {
            if (e.keyCode == 13) {
                var panel = $find("<%=rpbMainMenu.ClientID %>");
                var button = panel.get_allItems()[0].findControl("pSearchBtn");
                button.click();
            }
        }
    </script>

    Hope this will helps you.
    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Avihai
    Avihai avatar
    21 posts
    Member since:
    Aug 2013

    Posted 23 Dec 2013 Link to this post

    Hi,



    Thank you for your help, is there any ClientEvent OnKeyPress for RadComboBox?

    because it worked for the RadTextBox and I want it to work for the RadComobox that I have....

    do you have any idea how to solve it?





























































  5. Avihai
    Avihai avatar
    21 posts
    Member since:
    Aug 2013

    Posted 23 Dec 2013 Link to this post

    How can I do this with RCB??

    Anyone Please??

  6. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 25 Dec 2013 Link to this post

    Hi Avihai,

    You can try to use OnClientSelectedIndexChanged or OnClientKeyPressing.

    Hope this helps.

    Regards,
    Eyup
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  7. Avihai
    Avihai avatar
    21 posts
    Member since:
    Aug 2013

    Posted 26 Dec 2013 Link to this post

    Hi,


    I tried them both but nothing happens



       function OnClientSelectedIndexChangedPB(sender, eventArgs) {

            var item = eventArgs.get_item();

            var filterPersonType = $find("<%= rcbFilterPersonType.ClientID %>");

            var index = filterPersonType.get_selectedIndex();

            var keycode = eventArgs.get_keycode();

            if (keycode == 13) {

                var panel = $find("<%=rpbMainMenu.ClientID %>");

                var button = panel.get_allItems()[0].findControl("pSearchBtn");

                button.click();

            }

          

        }

    <telerik:RadComboBox runat="server" CheckBoxes="true" ID="rcbFilterPersonType"

                                EmptyMessage="Select Person Type" Enabled="True" OnClientSelectedIndexChanged="OnClientSelectedIndexChangedPB">

     </telerik:RadComboBox>

  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 27 Dec 2013 Link to this post

    Hi Avihai,

    Please have a look into the following code snippet which works fine at my end.

    ASPX:
    ...
    <telerik:RadComboBox runat="server" CheckBoxes="true" ID="rcbFilterPersonType"
        EmptyMessage="Select Person Type" Enabled="True" OnClientKeyPressing="OnClientKeyPressingPB">
        <Items>
            <telerik:RadComboBoxItem Text="1" runat="server" />
            <telerik:RadComboBoxItem Text="2" runat="server" />
        </Items>
    </telerik:RadComboBox>
    ...

    JavaScript:
    <script type="text/javascript">
        function OnClientKeyPressingPB(sender, args) {
            if (args.get_domEvent().keyCode == 13) {
                var panel = $find("<%=rpbMainMenu.ClientID %>");
                var button = panel.get_allItems()[0].findControl("pSearchBtn");
                button.click();
            }
        }
    </script>

    Thanks,
    Shinu.
  9. Avihai
    Avihai avatar
    21 posts
    Member since:
    Aug 2013

    Posted 27 Dec 2013 Link to this post

    Hello,


    Thank you for your answer, but nothing is happening after I select item(I have Items that coming from the DB) from the RadComboBox



    do you have any idea why?

  10. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 29 Dec 2013 Link to this post

    Hi Avihai,

    Unfortunately I couldn't replicate the issue at my end. The given code is working fine at my end. Please have a look into the full code which works fine at my end.

    ASPX:
    <telerik:RadPanelBar runat="server" ID="rpbMainMenu" Width="248px" Height="517px"
        ExpandMode="FullExpandedItem">
        <Items>
            <telerik:RadPanelItem Expanded="True" ImageUrl="../Images/Layout/phone_edited.png"
                Text="Phone Book Search">
                <ContentTemplate>
                    <div style="border: 0px solid red; padding: 20px 0px 0px 10px">
                        <table class="filtersTable">
                            <tr>
                                <td>
                                    OrderID:
                                </td>
                                <td>
                                    <telerik:RadComboBox runat="server" CheckBoxes="true" ID="rcbFilterPersonType" EmptyMessage="Select Person Type"
                                        Enabled="True" DataSourceID="SqlDataSource1" DataTextField="ShipCity" OnClientKeyPressing="OnClientKeyPressingPB">
                                    </telerik:RadComboBox>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                      
                                </td>
                                <td>
                                    <telerik:RadButton ID="pSearchBtn" runat="server" Text="Search" Style="display: block;
                                        width: 80px;" Font-Bold="False" ButtonType="SkinnedButton" OnClick="pSearchBtn_Click">
                                        <Icon PrimaryIconCssClass="rbSearch" PrimaryIconLeft="4" PrimaryIconTop="4"></Icon>
                                    </telerik:RadButton>
                                </td>
                            </tr>
                            </tr>
                        </table>
                    </div>
                </ContentTemplate>
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>
    <telerik:RadGrid ID="rgPhoneBook" runat="server" Width="100%" AutoGenerateColumns="False"
        AllowPaging="True" AllowSorting="True" OnNeedDataSource="rgPhoneBook_NeedDataSource">
        <PagerStyle Mode="NumericPages"></PagerStyle>
        <MasterTableView ShowHeadersWhenNoRecords="true" Font-Size="11px" GridLines="None"
            AllowPaging="True" CommandItemDisplay="Top" AllowAutomaticUpdates="False" TableLayout="Fixed">
            <Columns>
                <telerik:GridBoundColumn DataField="OrderID" Display="true" />
                <telerik:GridTemplateColumn HeaderText="First Name" HeaderStyle-Width="120px" SortExpression="FirstName">
                    <ItemTemplate>
                        <%# DataBinder.Eval(Container.DataItem, "ShipCity")%>
                          
                        <%# DataBinder.Eval(Container.DataItem, "ShipVia")%>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

    JavaScript:
    <script type="text/javascript">
        function OnClientKeyPressingPB(sender, args) {
            if (args.get_domEvent().keyCode == 13) {
                var panel = $find("<%=rpbMainMenu.ClientID %>");
                var button = panel.get_allItems()[0].findControl("pSearchBtn");
                button.click();
            }
        }
    </script>

    C#:
    protected void pSearchBtn_Click(object sender, EventArgs e)
    {
        Response.Write(rcbFilterPersonType.Text);
    }

    Thanks,
    Shinu.

  11. eshan
    eshan avatar
    1 posts
    Member since:
    Oct 2015

    Posted 01 Oct 2015 Link to this post

    I have a similar issue. Where i have a Radtextbox and a Radbutton (for search) in a panel. 

    i want to call the click of the Radbutton when Enter is pressed in the RadTextbox, can anyone help me out. 

    I have tried the keypress, keydown, javascript code, defaultbutton property and others. May be i am doing it wrong. any help greatly appreciated.

    Thanks.

  12. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 06 Oct 2015 Link to this post

    Hello Eshan,

    Generally, the defaultbutton option should work in this case:
    http://www.telerik.com/forums/radgrid-disable-enter-key#KAn1O5APR0SaXfk3MrhL9Q

    Could you temporarily disable any AJAX on the page(RadAjaxPanels, RadAjaxManager, UpdatePanel, etc.) and enable your script debugger (FireBug or F12) to see whether there are any script errors interfering?

    Regards,
    Eyup
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017