I have successfully implemented the ValueChanged clientevent to capture the value of hte slider and put it in a text box... this works great when i know the ID of the text box at design time. However, I'm encapsulating the slider in a compositeControl and need to figure out a way to get the clientID of the textbox at runtime for the slider (there are many of these composite controls on the page so I can't use a static value)
normally i would render out the call to the javascript and put in the client id, but because you have "wrappered" the valuechanged event and force me to only have 2 arguments (this, events) I can't do that.
Is there any way to override the javascript function call and add my own parameters and still have access to the values in the control?
i hope this makes sense.
thanks
Hi,
To get access to any html control on page, you may use document.getElementById or its shortcut $get.If you do not know exact value of ClientID, then you may use <%=Control.ClientID%>.
Below is example:
<script type="text/javascript">function valueChanged(slider, eventArgs){ var tb1 = $get('<%=TextBox1.ClientID%>'); if(tb1) tb1.value = eventArgs.get_newValue();}</script>
The above snippet works great. However How to set the value from Text box to the web slider at client side.
I mean On key press of textbox, the webslider values needs to be set based on Text box value at client side.
Please suggest how to achieve this in java script.
e.g: Web Slider Range(0-1000)
I have a default value of 20 in text box control. On key press of text box if the user types 200, set the value(i.e 200) in webslider at client side.
Thanks,
Bhaskar
Hi Bhaskar,
To update slider from textbox, you may use exactly same approach as with updating textbox from slider. The only difference, that you should use straight browser's events and update javascript object instead of html element. Below is example.
<script type="text/javascript"> function updateMySlider() { var tb = $get('<%=TextBox1.ClientID%>'); var slider = $find('<%=WebSlider1.ClientID%>'); var val = parseInt(tb.value); if('' + val != 'NaN') slider.set_value(val); } function updateMyTextBox(slider) { var tb = $get('<%=TextBox1.ClientID%>'); tb.value = slider.get_value(); } </script> <ig:WebSlider ID="WebSlider1" runat="server"> <ClientEvents ValueChanged="updateMyTextBox" /> </ig:WebSlider> <asp:TextBox ID="TextBox1" runat="server" onkeyup="updateMySlider()"></asp:TextBox>
Thank you very much for your quick reply
I have slightly modified your code. Here is the modifid code
function updateMySlider() { var tb = document.getElementById('TextBox1'); ---modified by me var slider = document.getElementById('WebSlider1'); --modified by me var val = parseInt(tb.value); if ('' + val != 'NaN') slider.set_value(val); }
I have got an JS error at line called " slider.set_value(val);" The error is as foolows:"Microsoft JScript runtime error: Object doesn't support this property or method"
Other details: Used Infragistics NotAdvantage for .NET 2009.1 ver
Please suggest any thing is wrong in the above code.
Thats fine. Thanks a lot for your support.
Some Infragistics controls internally use ig_controls[idOfControl], but if at the time there are no Infragistics controls on page, then it will give you exception. So that object, it is not recommended for public use.
I do not know other public option to get reference to a javascript object.
Thanks Viktor, I have used $find it works great.
However, Is there any equivalent direct JavaScript function to get a reference to javascript object.
once again thanks for your valuable support.
Thanks
The document.getElementById(id) or $get(id) returns reference to html element or null. If you want to do any action with slider, then you need reference not to html element, but reference to javascript object. You should use $find(id) or similar method.