This is a migrated thread and some comments may be shown as answers.

[Solved] Client-side eventargs?

2 Answers 217 Views

Slider

This is a migrated thread and some comments may be shown as answers.

Emil Hjordt Jensen asked on 06 Feb 2008, 02:15 PM

I have the following code-block, which works fine:

    
            <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

answered on 07 Feb 2008, 09:16 AM

I am setting the textbox.id ="tb" + Slider.Id
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

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:

    
            <%@ 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.