Emil Hjordt Jensen
Top achievements
Rank 1
Rank 1
Emil Hjordt Jensen
asked on 06 Feb 2008, 02:15 PM
I have the following code-block, which works fine:
It works like this: When I pull the top radSlider, it updates the numeric textbox with the value from the slider. This is cool - although, consider a scenario like the above, where I've added the second radSlider and a second numeric textbox. I would now like to use the same client-side eventhandler for this.
But as it shows, the ClientID for the textbox is hardcoded in the javascript (<%= NumericTextBox1.ClientID %>) and I can't figure out how to pass on the reference to the textbox to the eventhandler. I was thinking something like
and then retrieving this in someway in the eventhandler.
Any suggestions or solutions to this will be highly appreciated! Thank you for your time and your great webcontrols.
| <script language="javascript" type="text/javascript"> | |
| function HandleSliderValueChanged (sender, EventArgs) | |
| { | |
| $find('<%= NumericTextBox1.ClientID %>').SetValue(sender.get_value()); | |
| } | |
| </script> | |
| <telerik:radnumerictextbox id="NumericTextBox1" minvalue="1" maxvalue="50" width="20px" runat="server"> | |
| <NumberFormat DecimalDigits="0" /> | |
| </telerik:radnumerictextbox> | |
| <telerik:radnumerictextbox id="NumericTextBox2" minvalue="1" maxvalue="50" width="20px" runat="server"> | |
| <NumberFormat DecimalDigits="0" /> | |
| </telerik:radnumerictextbox> | |
| <telerik:radslider id="RadSlider1" OnClientValueChange="HandleSliderValueChanged" minimumvalue="1" maximumvalue="50" runat="server" /> | |
| <telerik:radslider id="RadSlider2" minimumvalue="1" maximumvalue="50" runat="server" /> |
It works like this: When I pull the top radSlider, it updates the numeric textbox with the value from the slider. This is cool - although, consider a scenario like the above, where I've added the second radSlider and a second numeric textbox. I would now like to use the same client-side eventhandler for this.
But as it shows, the ClientID for the textbox is hardcoded in the javascript (<%= NumericTextBox1.ClientID %>) and I can't figure out how to pass on the reference to the textbox to the eventhandler. I was thinking something like
| OnClientValueChange="HandleSliderValueChanged('<%= NumericTextBox1.ClientID %>')" |
and then retrieving this in someway in the eventhandler.
Any suggestions or solutions to this will be highly appreciated! Thank you for your time and your great webcontrols.
2 Answers, 1 is accepted
0
Obi-Wan Kenobi
Top achievements
Rank 1
Rank 1
answered on 07 Feb 2008, 09:16 AM
I am setting the textbox.id ="tb" + Slider.Id
For example:
I hope that it will help you
For example:
| <head runat="server"> |
| <title>Untitled Page</title> |
| <script type="text/javascript"> |
| function OnClientValueChange(obj,args) |
| { |
| var sliderId = obj.get_id(); |
| var currentTextBox = document.getElementById("tb_"+ sliderId); |
| currentTextBox.value = obj.get_value(); |
| } |
| </script> |
| </head> |
| <body> |
| <form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> |
| <div> |
| <telerik:RadSlider ID="RadSlider1" runat="server" OnClientValueChange="OnClientValueChange"/> |
| <asp:TextBox ID="tb_RadSlider1" runat="server"></asp:TextBox> |
| <telerik:RadSlider ID="RadSlider2" runat="server" OnClientValueChange="OnClientValueChange"/> |
| <asp:TextBox ID="tb_RadSlider2" runat="server"></asp:TextBox> |
| </div> |
| </form> |
| </body> |
| </html> |
I hope that it will help you
0
Emil Hjordt Jensen
Top achievements
Rank 1
Rank 1
answered on 07 Feb 2008, 01:22 PM
Thank you, Obi-Wan, for your way of thinking. Only problem is, that once nested in other controls, the client-id gets prefixed further with e.g. parent elements' client-ids. The final solution, that worked, was simply to postfix instead.
Thus:
Note, that since I'm using the telerik radnumericBox from the Prometeus collection, I'm using the SetValue method instead of the element.value attribute.
Once again thank you, Obi-Wan. And may the force be with you. Always.
Thus:
| <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TelerikPage.aspx.cs" Inherits="TelerikPage" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title>Untitled Page</title> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <div> |
| <asp:ScriptManager runat="server" ID="TheScriptManager" /> |
| <script language="javascript" type="text/javascript"> |
| function HandleSliderValueChanged (sender, EventArgs) |
| { |
| $find(sender.get_id() + "NumericTextBox").SetValue(sender.get_value()); |
| } |
| </script> |
| <telerik:radnumerictextbox id="FirstRadSliderNumericTextBox" minvalue="1" maxvalue="50" width="20px" runat="server"> |
| <NumberFormat DecimalDigits="0" /> |
| </telerik:radnumerictextbox> |
| <telerik:radnumerictextbox id="SecondRadSliderNumericTextBox" minvalue="1" maxvalue="50" width="20px" runat="server"> |
| <NumberFormat DecimalDigits="0" /> |
| </telerik:radnumerictextbox> |
| <telerik:radslider id="FirstRadSlider" OnClientValueChange="HandleSliderValueChanged" minimumvalue="1" maximumvalue="50" runat="server" /> |
| <telerik:radslider id="SecondRadSlider" OnClientValueChange="HandleSliderValueChanged" minimumvalue="1" maximumvalue="50" runat="server" /> |
| </div> |
| </form> |
| </body> |
| </html> |
Note, that since I'm using the telerik radnumericBox from the Prometeus collection, I'm using the SetValue method instead of the element.value attribute.
Once again thank you, Obi-Wan. And may the force be with you. Always.