Showing posts with label box. Show all posts
Showing posts with label box. Show all posts

Saturday, March 24, 2012

Wrapper control for Slider Extender and Properties

I've written a control and that inherits from Panel and ITextControl. In CreateChildControls I create a table containing a text box and label, then I create the slider extender and properties pointing to the appropriate controls. The control loads properly (visually), but when I click the slider I get a series of javascript errors (Invalid Argument). If anyone has any suggestions they would be helpful.

Hi,

could you post the code that instantiates the slider extender?


/// <summary>
/// This web control class renders a Centralpoint console textbox.
/// </summary>
[ValidationProperty("Text")]
public class ConsoleSlider : Panel, ITextControl
{
private TextBox tbxSlider = null;
private Label lblTarget = null;
private SliderExtender seExtender = null;
private SliderProperties seProperties = null;

public ConsoleSlider() : base()
{
}

/// <summary>
/// This method is overridden to create the child controls of the console editor.
/// </summary>
protected override void CreateChildControls()
{
base.CreateChildControls();

HtmlTable table = new HtmlTable();
this.Controls.Add(table);

HtmlTableRow row = new HtmlTableRow();
table.Rows.Add(row);

HtmlTableCell left = new HtmlTableCell();
row.Cells.Add(left);

HtmlTableCell right = new HtmlTableCell();
row.Cells.Add(right);

tbxSlider = new TextBox();
tbxSlider.ID = this.ID + "_Slider";
left.Controls.Add(tbxSlider);

lblTarget = new Label();
lblTarget.ID = this.ID + "_Target";
right.Controls.Add(lblTarget);

seExtender = new SliderExtender();
seExtender.ID = this.ID + "_Extender";

seProperties = new SliderProperties();
seProperties.ID = this.ID + "_Properties";
seProperties.Minimum = 0;
seProperties.Maximum = 100;
seProperties.Steps = 1;
seProperties.Length = 300;
seProperties.EnableHandleAnimation = true;
seProperties.Orientation = SliderOrientation.Horizontal;

seProperties.TargetControlID = tbxSlider.ID;
seProperties.BoundControlID = lblTarget.ClientID;
seExtender.TargetProperties.Add(seProperties);

this.Controls.Add(seExtender);
}

/// <summary>
/// Gets or sets the control text.
/// </summary>
public string Text
{
get { this.EnsureChildControls(); return lblTarget.Text; }
set { this.EnsureChildControls(); lblTarget.Text = value; }
}
}


Hi,

mkerchenski:

seProperties.Steps = 1;

the problem is in the above statement, since it has no sense to set 1 step (it means 1 possible value, so there would be no need for a slider).

However, this is a "pathological" case that causes a bug since the slider extender is not able to handle this situation at the moment. I'll make sure to fix this for the next release.

Since the number of steps is the number of possible values, try to set steps > 1 and let me know if it solves the problem.

You can found a related threadhere.


I've tried a few different values for the Steps property and it doesn't seem to make any difference at all. If you disable script debugging (in IE) the control doesn't slide, and if you enable script debugging you get the error described initially. In the firefox javascript console I get the following errors:
Error: Found unclosed string '"'. Selector expected. Ruleset ignored due to bad selector.
Error: Unexpected end of file while searching for closing } of invalid rule set.
I'm not entirely sure they're related, but they're not there when the slider is not present.

Wednesday, March 21, 2012

Writing first extender control

Hi,

I am writing my first extender control to populate a text box with some value on click event of button. But I am missing something hence the extendercontrol is not gettting instanitated and also inserting debugger doesn't break into it. Can someone please help here?

Here is the code:

JS:


Type.registerNamespace('Toolkit');

Toolkit.DisableButtonBehavior = function(element) {
Toolkit.DisableButtonBehavior.initializeBase(this, [element]);
this._button = null;
this._textBox1 = null;
}

Toolkit.DisableButtonBehavior.prototype = {
initialize : function() {
/// <summary>
/// Initialize the behavior
/// </summary>
debugger;
this._button = this.get_element();
Toolkit.DisableButtonBehavior.callBaseMethod(this, 'initialize');
this._clickHandler = Function.createDelegate(this, this._onClick);
$addHandler(this._button, "click", this._clickHandler);
this._AlertHeader();
},

dispose : function() {
/// <summary>
/// Dispose the behavior
/// </summary>
Toolkit.DisableButtonBehavior.callBaseMethod(this, 'dispose');
},

_onClick : function() {
this._AlertHeader();
},

get_TextBox1 : function() {
return this._textBox1;
},
set_TextBox1 : function(value) {
debugger;
this._textBox1 = value;
},
_AlertHeader : function () {
this._textBox1.value = 'test5';
}
}

Toolkit.DisableButtonBehavior.registerClass('Toolkit.DisableButtonBehavior', AjaxControlToolkit.BehaviorBase);


if( Sys && Sys.Application ){
Sys.Application.notifyScriptLoaded();
}

Extender Class:

using System;
using System.Web.UI.WebControls;
using System.Web.UI;
using System.ComponentModel;
using System.ComponentModel.Design;
using AjaxControlToolkit;

[assembly: System.Web.UI.WebResource("Toolkit.DisableButtonExtender.DisableButtonBehavior.js", "text/javascript")]

namespace Toolkit
{
[ClientScriptResource("Toolkit.DisableButtonBehavior", "Toolkit.DisableButtonExtender.DisableButtonBehavior.js")]
[TargetControlType(typeof(Control))]
public class DisableButtonExtender : ExtenderControlBase
{
[IDReferenceProperty(typeof(Control))]
[DefaultValue("")]
[ExtenderControlProperty]
[ElementReference()]
public string TextBox1
{
get { return GetPropertyValue("TextBox1", ""); }
set { SetPropertyValue("TextBox1", value); }
}
}
}

ASPX:

<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="Testpage.aspx.cs" Inherits="Testpage" %>
<%@dotnet.itags.org. Register Assembly="Toolkit" Namespace="Toolkit" TagPrefix="toolkit" %
<!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>
<asp:ScriptManager ID="scriptmanager" runat="server"></asp:ScriptManager>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="Button"/>

</div>
</form>
<toolkit:DisableButtonExtender ID="DisableButtonExtender" runat="server" TargetControlID="Button1" TextBox1="TextBox1"></toolkit:DisableButtonExtender>
</body>
</html>

Thanks

Hi,

The only problem I can find in your code is that the ScriptManager and the Extender are placed out of the form. When I modified this and run, it worked fine.

I created a ClassLibrary project, then added the following code into it:

using System;using System.Web.UI.WebControls;using System.Web.UI;using System.ComponentModel;using System.ComponentModel.Design;using AjaxControlToolkit;[assembly: System.Web.UI.WebResource("ClassLibrary1.DisableButtonBehavior.js","text/javascript")]namespace Toolkit{ [ClientScriptResource("ClassLibrary1.DisableButtonBehavior","ClassLibrary1.DisableButtonBehavior.js")] [TargetControlType(typeof(Control))]public class DisableButtonExtender : ExtenderControlBase { [IDReferenceProperty(typeof(Control))] [DefaultValue("")] [ExtenderControlProperty] [ElementReference()]public string TextBox1 {get {return GetPropertyValue("TextBox1",""); }set { SetPropertyValue("TextBox1",value); } } }}

This js file is set as EmbededResources

Type.registerNamespace('ClassLibrary1');ClassLibrary1.DisableButtonBehavior = function(element) { ClassLibrary1.DisableButtonBehavior.initializeBase(this, [element]); this._button = null; this._textBox1 = null;}ClassLibrary1.DisableButtonBehavior.prototype = { initialize : function() { /// <summary> /// Initialize the behavior /// </summary> debugger; this._button = this.get_element(); ClassLibrary1.DisableButtonBehavior.callBaseMethod(this, 'initialize'); this._clickHandler = Function.createDelegate(this, this._onClick); $addHandler(this._button, "click", this._clickHandler); this._AlertHeader(); }, dispose : function() { /// <summary> /// Dispose the behavior /// </summary> ClassLibrary1.DisableButtonBehavior.callBaseMethod(this, 'dispose'); }, _onClick : function() { this._AlertHeader(); }, get_TextBox1 : function() { return this._textBox1; }, set_TextBox1 : function(value) { debugger; this._textBox1 = value; }, _AlertHeader : function () { this._textBox1.value = 'test5'; }}ClassLibrary1.DisableButtonBehavior.registerClass('ClassLibrary1.DisableButtonBehavior', AjaxControlToolkit.BehaviorBase); if( Sys && Sys.Application ){ Sys.Application.notifyScriptLoaded();}

Then used the following page to test it and it worked fine:

<%@. Page Language="C#" %><%@. Register Namespace="Toolkit" Assembly="ClassLibrary1" TagPrefix="toolkit" %><!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 id="Head1" runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="scriptmanager" runat="server"></asp:ScriptManager> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br /> <asp:Button ID="Button1" runat="server" Text="Button"/> <toolkit:DisableButtonExtender ID="DisableButtonExtender" runat="server" TargetControlID="Button1" TextBox1="TextBox1"></toolkit:DisableButtonExtender> </div> </form> </body></html>

Thanks Raymond. Getting script manager within form tag worked.