I am trying to use some sliders in an ajax page with javascript. What is the difference between the "TargetControlID" and the "BoundControlID"? In each instance, I put in a label, a textbox, and a slider. I expect to see the label followed by the text box, with the slider on the next line. The slider should control the value in the text box. I set the slider's "Target" control to be the textbox. When I run the page, the text box was missing.
Then I tried putting two text boxes after the label, making one of them the "Target" control and one of them the "Bound" control. This time I see only one textbox, and it displays values as I move the slider. But I'm not sure which one I'm seeing. This text box is now below the slider instead of above it next to the label.
There are four of these slider/label/textbox combinations in my page. I want the numeric values to be accessible on both the VB.Net server side, and the Javascript client side. I assume I should read the value from one of the text boxes.
Another problem I notice is that the slider does not "stick" to the mouse pointer like I expect it to. It "jumps" to the right when I push the button down, and jumps back to the left when I release. The value displayed changes the same way.
Hi,
the TargetControlID property must be set to the ID of the TextBox that you want to become the slider. The BoundControlID property must be set to the ID of a control (a TextBox or a Label) that displays the slider's value in real time.
The SliderExtender turns a TextBox into a slider, this is the reason why the extended textbox is disappearing.
If you want to access the value of the slider on the server side, this is returned by the Text property of the extended TextBox control.
Quick example:
<%@. Page Language="C#" %><%@. Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" TagPrefix="ajaxToolkit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="TheScriptManager" runat="server"></asp:ScriptManager> <div> <asp:TextBox ID="Slider1" runat="server">50</asp:TextBox> <asp:Label ID="Label1" runat="server"></asp:Label> <ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="Slider1" BoundControlID="Label1"></ajaxToolkit:SliderExtender> </div> </form></body></html>
I still have problems with the slider handle following the mouse properly.
Also, this being an ajax application with javascript using callbacks, I cant get the server code to read any changes to my sliders, text boxes, check boxes, or radio buttons. They still read as their initial values. In fact, if I put server side event handlers on them, the change events don't get handled. Everything works on the client side.
I tried putting them all in an update panel triggered by all of them, but that didn't help.
Hi,
regarding the handle: the slider has been programmed against the ASP.NET AJAX drag and drop engine. Since the engine doesn't support horizontal or vertical drag, we have used a trick (an invisible handle) to make it work. This is why the handle doesn't follow the mouse as you describe. However, this is very likely to change in the next releases of the Ajax Control Toolkit.
Regarding the changes in the values of controls. The following example is a slight variation on the previous one. Note that the extended textbox (the slider) has AutoPostBack="true". Therefore, it will post back to the server whenever you change the slider's value. On the server side, the new value is used to update the label's text. This demonstrates that the TextChanged event is fired and that you can access the updated value on the server side.
<%@. Page Language="C#" %><%@. Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" TagPrefix="ajaxToolkit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { Label1.Text = Slider1.Text.ToString(); } } protected void Slider1_TextChanged(object sender, EventArgs e) { Label1.Text = Slider1.Text.ToString(); } </script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="TheScriptManager" runat="server"></asp:ScriptManager> <div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:TextBox ID="Slider1" runat="server" AutoPostBack="true" OnTextChanged="Slider1_TextChanged">50</asp:TextBox> <asp:Label ID="Label1" runat="server"></asp:Label> <ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="Slider1" Steps="3"></ajaxToolkit:SliderExtender> </ContentTemplate> </asp:UpdatePanel> </div> </form></body></html>
No comments:
Post a Comment