Client-side eventargs?

3 posts, 0 answers
  1. Emil Hjordt Jensen
    Emil Hjordt Jensen avatar
    6 posts
    Member since:
    Jan 2007

    Posted 06 Feb 2008 Link to this post

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

    1 <script language="javascript" type="text/javascript"
    2             function HandleSliderValueChanged (sender, EventArgs) 
    3                 { 
    4                     $find('<%= NumericTextBox1.ClientID %>').SetValue(sender.get_value()); 
    5                 } 
    6              
    7         </script> 
    8      
    9         <telerik:radnumerictextbox id="NumericTextBox1" minvalue="1" maxvalue="50" width="20px" runat="server"
    10             <NumberFormat DecimalDigits="0" /> 
    11         </telerik:radnumerictextbox> 
    12          
    13         <telerik:radnumerictextbox id="NumericTextBox2" minvalue="1" maxvalue="50" width="20px" runat="server"
    14             <NumberFormat DecimalDigits="0" /> 
    15         </telerik:radnumerictextbox> 
    16          
    17         <telerik:radslider id="RadSlider1" OnClientValueChange="HandleSliderValueChanged" minimumvalue="1" maximumvalue="50" runat="server" /> 
    18         <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. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 07 Feb 2008 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Emil Hjordt Jensen
    Emil Hjordt Jensen avatar
    6 posts
    Member since:
    Jan 2007

    Posted 07 Feb 2008 Link to this post

    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.
Back to Top