I have several RadGrid in my application. In which the pager mode is set to NextPrevNumericAndAdvanced. And upon changing the page number in text box and hitting 'Enter Key' was working fine. Same was true for page size text box. Recently we upgraded the Telerik controls from version 2008.2.723.20 to 2012.2.815.35. After the upgrade the 'Enter Key' press has stopped working. We also noticed that 'Go' and 'Change' are buttons now instead of links. Please advise.
Though I tried to induced the Enter Key functionality on paging manually through following code, but it is not working. Strangely if I put a break point or put an alert in keyDown javascript function it works. Please help me get this done.
Though I tried to induced the Enter Key functionality on paging manually through following code, but it is not working. Strangely if I put a break point or put an alert in keyDown javascript function it works. Please help me get this done.
<body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> <Scripts> <%--Needed for JavaScript IntelliSense in VS2010--%> <%--For VS2008 replace RadScriptManager with ScriptManager--%> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> </Scripts> </telerik:RadScriptManager> <script type="text/javascript"> //Put your JavaScript code here. function keyDown(e) { 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); button.click(); } } } </script> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> </telerik:RadAjaxManager> <div> <asp:HiddenField ID="tbId" runat="server" /> <asp:HiddenField ID="goLinkId" runat="server" /> <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="true" PageSize="2" OnNeedDataSource="RadGrid1_NeedDataSource" OnItemCreated="RadGrid1_ItemCreated"> <PagerStyle Mode="NextPrevNumericAndAdvanced" AlwaysVisible="true" /> <MasterTableView> <Columns> <telerik:GridBoundColumn HeaderText="Vendor" DataField="Vendor"> </telerik:GridBoundColumn> <telerik:GridBoundColumn HeaderText="Address" DataField="Address"> </telerik:GridBoundColumn> <telerik:GridBoundColumn HeaderText="Bank" DataField="Bank"> </telerik:GridBoundColumn> </Columns> </MasterTableView> </telerik:RadGrid> </div> </form></body>protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e){ DataTable dt = new DataTable(); dt.Columns.Add("Vendor"); dt.Columns.Add("Address"); dt.Columns.Add("Bank"); dt.Rows.Add("ABC1", "Address1", "Bank1"); dt.Rows.Add("ABC2", "Address2", "Bank2"); dt.Rows.Add("ABC3", "Address3", "Bank3"); dt.Rows.Add("ABC4", "Address4", "Bank4"); dt.Rows.Add("ABC5", "Address5", "Bank5"); dt.Rows.Add("ABC6", "Address6", "Bank6"); RadGrid1.DataSource = dt;}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 Button goLink = (Button)e.Item.FindControl("GoToPageLinkButton"); goLinkId.Value = goLink.ClientID; //attach to onkeydown event pageNum.Attributes.Add("onkeydown", "keyDown(event);"); }}3 Answers, 1 is accepted
0
Accepted
Hello,
From the last few releases we have introduced this breaking change in order to have uniform behavior between the controls. Because of this you need to manually implement this behavior. Your code is generally correct, however, there are some things that you need to change:
You should use $find() to get a reference to the client-side object of RadTextBox. Then you need to use the get_textBoxValue and the set_value() functions in order to change the value, then your code will work as expected.
Give this approach a try and you should not have any problems.
Greetings,
Andrey
the Telerik team
From the last few releases we have introduced this breaking change in order to have uniform behavior between the controls. Because of this you need to manually implement this behavior. Your code is generally correct, however, there are some things that you need to change:
<script type="text/javascript">//Put your JavaScript code here.function keyDown(e) { if (e.keyCode == 13) { //get text box client id to check if it's not empty var tbCliendId = document.getElementById("tbId").value; var tb = $find(tbCliendId); if (tb.get_textBoxValue().length > 0) { tb.set_value(tb.get_textBoxValue()); //get "Go" button client ID from the hidden field value var buttonCliendId = document.getElementById("goLinkId").value; var button = document.getElementById(buttonCliendId); button.click(); } }}</script><telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager><div><asp:HiddenField ID="tbId" runat="server" /><asp:HiddenField ID="goLinkId" runat="server" /><telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="true" PageSize="2" OnNeedDataSource="RadGrid1_NeedDataSource" OnItemCreated="RadGrid1_ItemCreated"> <PagerStyle Mode="NextPrevNumericAndAdvanced" AlwaysVisible="true" /> <MasterTableView> <Columns> <telerik:GridBoundColumn HeaderText="Vendor" DataField="Vendor"> </telerik:GridBoundColumn> <telerik:GridBoundColumn HeaderText="Address" DataField="Address"> </telerik:GridBoundColumn> <telerik:GridBoundColumn HeaderText="Bank" DataField="Bank"> </telerik:GridBoundColumn> </Columns> </MasterTableView> <ClientSettings> <ClientEvents OnKeyPress="keyDown" /> </ClientSettings></telerik:RadGrid>You should use $find() to get a reference to the client-side object of RadTextBox. Then you need to use the get_textBoxValue and the set_value() functions in order to change the value, then your code will work as expected.
Give this approach a try and you should not have any problems.
Greetings,
Andrey
the Telerik team
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 their blog feed now.
0
Lokesh
Top achievements
Rank 1
Rank 1
answered on 31 Jan 2013, 10:12 PM
Dear Andrey,
Thanks much for the clarification and help. Yes, it does work now. However I have a few questions seeking your suggestion.
1. It does work even without mentioning
. So do we really need to provide this property as in RadGrid1_ItemCreated
I'll have to have (provide) the onkeydown event ?
2. Also, this solution needs to be applied on each and every grid we have in the application and want to have this enter key functionality. Do you suggest/have/direct any global solution/setting for this on entire application?
Thanks much for the clarification and help. Yes, it does work now. However I have a few questions seeking your suggestion.
1. It does work even without mentioning
<ClientEvents OnKeyPress="keyDown" />. So do we really need to provide this property as in RadGrid1_ItemCreated
I'll have to have (provide) the onkeydown event ?
2. Also, this solution needs to be applied on each and every grid we have in the application and want to have this enter key functionality. Do you suggest/have/direct any global solution/setting for this on entire application?
Thanks much
Lokesh
0
Hello,
About your first point, yes, you could omit the <ClientEvents> part. I used in my example to test the code and did not notice that you hook the OnKeyDown event in the ItemCreated.
As to the second if you want a global solution that will apply to all the numeric boxes in all RadGrid instances, you could wrap the Grid instances in one Div wrapper and hook its OnKeyDown event:
Then you could use this JavaScript code:
With this approach you could totally remove the ItemCreated part and use only client-side script.
I hope this information helps. Let me know if you have other questions.
All the best,
Andrey
the Telerik team
About your first point, yes, you could omit the <ClientEvents> part. I used in my example to test the code and did not notice that you hook the OnKeyDown event in the ItemCreated.
As to the second if you want a global solution that will apply to all the numeric boxes in all RadGrid instances, you could wrap the Grid instances in one Div wrapper and hook its OnKeyDown event:
<div id="ContainerDiv" onkeydown="KeyDown(this, event);"> <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AllowPaging="true" PageSize="10"> <MasterTableView AutoGenerateColumns="False" DataKeyNames="CustomerID" DataSourceID="SqlDataSource1"> <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings> <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column"> <HeaderStyle Width="20px"></HeaderStyle> </RowIndicatorColumn> <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column"> <HeaderStyle Width="20px"></HeaderStyle> </ExpandCollapseColumn> <Columns> <telerik:GridBoundColumn DataField="CustomerID" FilterControlAltText="Filter CustomerID column" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" UniqueName="CustomerID"> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="CompanyName" FilterControlAltText="Filter CompanyName column" HeaderText="CompanyName" SortExpression="CompanyName" UniqueName="CompanyName"> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="ContactTitle" FilterControlAltText="Filter ContactTitle column" HeaderText="ContactTitle" SortExpression="ContactTitle" UniqueName="ContactTitle"> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="Address" FilterControlAltText="Filter Address column" HeaderText="Address" SortExpression="Address" UniqueName="Address"> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="ContactName" FilterControlAltText="Filter ContactName column" HeaderText="ContactName" SortExpression="ContactName" UniqueName="ContactName"> </telerik:GridBoundColumn> </Columns> <EditFormSettings> <EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn> </EditFormSettings> <PagerStyle Mode="Advanced" /> </MasterTableView> <FilterMenu EnableImageSprites="False"></FilterMenu> </telerik:RadGrid> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [CustomerID], [CompanyName], [ContactTitle], [Address], [ContactName] FROM [Customers]"></asp:SqlDataSource> </div>Then you could use this JavaScript code:
function KeyDown(sender, event) { if (e.keyCode == 13) { if (event.target.classList.contains("rgPagerTextBox")) { //get text box client id to check if it's not empty var tbCliendId = event.target.id; var tb = $find(tbCliendId); if (tb.get_textBoxValue().length > 0) { tb.set_value(tb.get_textBoxValue()); //get "Go" button client ID from the hidden field value GoToPageLinkButton var buttonCliendId = tbCliendId.replace("ChangePageSizeTextBox", "GoToPageLinkButton"); var button = document.getElementById(buttonCliendId); button.click(); } } }}With this approach you could totally remove the ItemCreated part and use only client-side script.
I hope this information helps. Let me know if you have other questions.
All the best,
Andrey
the Telerik team
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 their blog feed now.