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

How to attach the slidder OnClientValueChange on the client using javascript

1 Answer 117 Views

Slider

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

Alexandre asked on 12 Oct 2008, 12:41 PM

Dear all,

I'm building my own control to display images. I want to link it to a slidder control. I need to attach the client side event OnClientValueChange from javascript on my control behavior. unfortunattely I do not manage to attach to the event. Nothing happen when the event is triggered. What is the real name of the event in javascript and is it an event of the RasSplitter div element?

this is the javascript code used when my imagedisplay client behavior class is initialized

Event declaration

this

._slidder$delegates = {

onclientvaluechange: Function.createDelegate(

this, this._onSlidderChange)

}

Event initialization

(this._slidderId) {

this._slidder = $get(this._slidderId);

// Attach change handler to parent

Sys.Debug.

assert(this._slidder != null, 'Slidder Control cannot be found');

if (this._slidder) {

$addHandlers(

this._slidder, this._slidder$delegates, this);

}

Event handler

_onSlidderChange:

function(sender, eventArgs) {

alert(

'test');

Everything happens fine but the event "onclientvaluechange" of my slidder defined by the slidder id is never triggered....

On the client side the slidder id hteml element is

<div style="WIDTH: 200px; DISPLAY: none" id="RadSlider1" class="radslider RadSlider_Default horizontal " _events="[object Object]" control="[object Object]">

How can I find the events of this element?

Any help would be appreciated.

1 Answer, 1 is accepted

answered on 16 Oct 2008, 02:34 PM

All methods which can be used to add/remove client-side handlers are available here:
http://www.telerik.com/help/aspnet-ajax/slider_clientobject.html
For example:

    
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!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> 
        
                <script type="text/javascript">  
        
                function AttachEvent()  
        
                {  
        
                    $find("RadSlider1").add_valueChange(OnSliderValueChanged);  
        
                }  
        
                function DetachEvent()  
        
                {  
        
                    $find("RadSlider1").remove_valueChange(OnSliderValueChanged);  
        
                }  
        
                function OnSliderValueChanged(slider,args)  
        
                {  
        
                    alert(slider.get_id());  
        
                }  
        
                </script> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
                <div> 
        
                    <input type="button" value="AttachEvent" onclick="AttachEvent()" /> 
        
                    <input type="button" value="DetachEvent" onclick="DetachEvent()" /> 
        
                    <telerik:RadSlider  
        
                        ID="RadSlider1"   
        
                        runat="server"   
        
                        MinimumValue="1"   
        
                        MaximumValue="100" 
        
                        Value="5" /> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

Hope this helps.