On key press enter to search inside radgrid

[Avihai]

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>

[Shinu]

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.

[Avihai]

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?

[Avihai]

How can I do this with RCB??

Anyone Please??

[Eyup]

Hi Avihai,

You can try to use OnClientSelectedIndexChanged or OnClientKeyPressing.

Hope this helps.

Regards,
Eyup
Telerik

[Avihai]

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>

[Shinu]

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.

[Avihai]

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?

[Shinu]

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.

[eshan]

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.

[Eyup]

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