Vince Xu's Blog

Asp.Net Ajax ScriptControl Tutorial

2010-02-14T23:05:00.000-05:00

Microsoft ASP.Net Ajax Extensions enables you to expand the capabilities of an ASP.Net Web Application in 
order to create a rich client user experience. We can make use of ScriptControl or ExtenderControl to build 
a rich client behavior or web control. The difference between ExtenderControl and ScriptControl is that 
Extender is used on creating client script capabilities on an existing control, which is called "TargetControl" 
for this behavior, whereas ScriptControl is an absolute web control which contains rich client functionality.
For example, when we'd like to build a ModalPopup which will pop out an existing Panel, show/hide 
functionality is the client script application, then we can build it as ExtenderControl. 
However, for ScriptControl, for instance, TabContainer which is the entirely new web control contains the 
client script functionality, so we can build it as ScriptControl.

1. To build a web server control with rich client experiences by ASP.NET page developers, you can use an 
script control.(Create ASP.Net Ajax Server Control project by File->New->Project->Web->ASP.Net Ajax Server Control 
in Visual Studio) An script control is a web server control that inherits the ScriptControl abstract class 
in the System.Web.UI namespace. 
Script control is used for establishing a web server control which contains rich client capability. 


public class Schedule : ScriptControl

2. The following two methods of the ScriptControl abstract class that you must implement in an script control.

        public IEnumerable<ScriptDescriptor> GetScriptDescriptors()
        {
            ScriptControlDescriptor descriptor = new ScriptControlDescriptor("PainControls.Schedule", this.ClientID);
            descriptor.AddElementProperty("toolContainer", ToolContainer.ClientID);

            descriptor.AddElementProperty("dateTimePicker", DateTimePicker.ClientID);
            descriptor.AddElementProperty("calendarContainer", CalendarContainer.ClientID);
            descriptor.AddProperty("calendarCellContentCssClass", CalendarCellContentCssClass);
            if (string.IsNullOrEmpty(ServicePath))
                throw new Exception("Please set ServicePath property.");
            descriptor.AddProperty("servicePath", ServicePath);
            if (string.IsNullOrEmpty(UpdateServiceMethod))
                throw new Exception("Please set UpdateServiceMethod property.");
            descriptor.AddProperty("updateServiceMethod", UpdateServiceMethod);
            if (string.IsNullOrEmpty(DeleteServiceMethod))
                throw new Exception("Please set DeleteServiceMethod property.");
            descriptor.AddProperty("deleteServiceMethod", DeleteServiceMethod);

           

            List<string> aa = new List<string>();
            for (int i = 0; i < DropPanelClientIDCollection.Count; i++)
            {
                string a = DropPanelClientIDCollection[i].ClientID;
                aa.Add(a);
            }
        
            descriptor.AddProperty("dropPanelClientIDCollection", aa);
          
            descriptor.AddProperty("dateTimeFieldName", DateTimeFieldName);
            descriptor.AddProperty("titleFieldName", TitleFieldName);
            descriptor.AddProperty("descriptionFieldName", DescriptionFieldName);
            yield return descriptor;
        }

        // Generate the script reference
        public IEnumerable<ScriptReference> GetScriptReferences()
        {

            yield return new ScriptReference(Page.ClientScript.GetWebResourceUrl(this.GetType(), "PainControls.Schedule.Schedule.js"));

        }

3. Embed Css reference in PreRender phase.

private void RenderCssReference()
{
string cssUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(), "PainControls. Schedule. Schedule.css");
HtmlLink link = new HtmlLink();
link.Href = cssUrl;
link.Attributes.Add("type", "text/css");
link.Attributes.Add("rel", "stylesheet");
Page.Header.Controls.Add(link);
}

4. Set all resources(contain images, css file and js file) embedded in this script control as "Embedded 
Resource"(property "Build Action").

5. This script control can derive from IScriptControl interface and a server control, instead of 
ScriptControl if you'd like to.

The control can derive from other server controls if you want to make it inherit a server control than 
ScriptControl. 
For example: 

public class Schedule : DataBoundControl, IScriptControl,INamingContainer 

In this scenario, it should derive from IScriptControl interface and a server control class. Meanwhile, 
we have another three steps need to do:

1) Override OnPreRender method. Register the web control as the ScriptControl in OnPreRender phase.
ScriptManager manager = ScriptManager.GetCurrent(this.Page);
if (manager == null)
{
      throw new InvalidOperationException("A ScriptManager is required on the page.");
}
manager.RegisterScriptControl<Schedule>(this);
2) Override Render method. Register the script descriptor which has been defined. 
ScriptManager.GetCurrent(this.Page).RegisterScriptDescriptors(this);

6. The rest work is on client-side. Register client NameSpace first.

Type.registerNamespace("PainControls");

7. Build client class.

PainControls.Schedule = function(element) 
{
}
PainControls.Schedule.prototype = {
}

8. Register the class that inherits " Sys.UI.Control".

PainControls.Schedule.registerClass('PainControls. Schedule’, Sys.UI.Control);

9. Call base method in constructor method

PainControls. Schedule.initializeBase(this, [element]);

10. Implementing the Initialize and Dispose Methods.
Build "initialize" and "dispose" method in prototype of the class. The initialize method is called when an 
instance of the behavior is created. Use this method to set default property values, to create function 
delegates, and to add delegates as event handlers. The dispose method is called when an instance of the 
behavior is no longer used on the page and is removed. Use this method to free any resources that are no 
longer required for the behavior, such as DOM event handlers.

initialize: function() {
PainControls. Schedule.callBaseMethod(this, 'initialize');
},
dispose: function() {
PainControls. Schedule.callBaseMethod(this, 'dispose');
}

11. Defining the Property Get and Set Methods.
Each property identified in the ScriptDescriptor object of the script control's GetScriptDescriptors() 
method must have corresponding client accessors. The client property accessors are defined as get_<:property>
and set_<:property> methods of the client class prototype.

    get_titleFieldName: function() {
        return this._titleFieldName;
    },

    set_titleFieldName: function(val) {
        if (this._titleFieldName !== val) {
            this._titleFieldName = val;
            this.raisePropertyChanged('titleFieldName');
        }
    },

12. Defining the Event Handlers for the DOM Element
1) Defining the handler in constructor function:
this._element_focusHandler = null;
2) Associate the handler with the DOM Element event in initailize method:
this._element_focusHandler = Function.createDelegate(this, this._element_onfocus);
3) Add the handler in initailize method:
$addHandler(this.get_element(), 'focus', this._element_focusHandler)
4) Build callback method about this event:
_element_onfocus:function(){
}

13. Defining the Event Handlers for the behavior
Each event identified in the ScriptDescriptor object of the script control's GetScriptDescriptors() 
method must have corresponding client accessors. The client event accessors are defined as add_<:event>
and remove_<:event> methods of the client class prototype. The method Raise<:event> is defined to trigger 
the event.

add_showing: function(handler) {
this.get_events().addHandler("showing", handler);
},
remove_showing: function(handler) {
this.get_events().removeHandler("showing", handler);
},
raiseShowing: function(eventArgs) {
var handler = this.get_events().getHandler('showing');
if (handler) {
handler(this, eventArgs);
}
},

How to build an Ajax Schedule control (Downloadable source code)

2009-09-29T07:30:00.006-04:00

New PainControls are released. You can download it from:

http://cid-79833c0a838434be.skydrive.live.com/self.aspx/PainControls/PainControls%203.0.0.0929.rar

It contains the following Ajax Controls:
TimePicker
DropDown
DropPanel
Simple Schedule
ButtonList

About Schedule:

Please check the following image:

1. The schedule is bound on DataSource control. You can select a date in left clanedar, it will retrieve the data from DataSource, and present the related task.
2. Each task will be presented in a DropPanel. You can Drag & Drop it to another cell(day). It will be updated.
3. When you mouse move on the droppanel, it will show CloseButton so that you can remove this task.
4. When mouse over the cell of schedule, it will expend itself by design if it has more task needs to show.
5. In left calendar, it will highlight the date which has tasks.
6. Since it is an Ajax ScriptControl, you can use custom css style at will.
7. Schedule used ButtonList and DropPanel in Paincontrols I mentioned before.
8. You need build and bind a web service file on this control to achieve updating and deleting function asychronously.

***** It is a simple schedule. I just want to share how to build a schedule and hope it can help. In next time, I'd like to expend the following functionality:
1. Besides "Month" display mode, "Day" display mode is needed.
2. Recently, you can create a DetailView to insert a new task, since Schedule is bound on DataSource. Next time, I'd like to expend the internal insert functionality.

If you have more suggestions, please let me know. Thanks.

How to use PainControl Schedule:

The following sample can help you to use Schedule control:

<Pain:Schedule ID="Schedule" runat="server" AutoPostBack="true" DataSourceID="SqlDataSource1" KeyField="num"
DateTimeFieldName="date_time" TitleFieldName="title" DescriptionFieldName="description" ServicePath="ScheduleWebService.asmx"
UpdateServiceMethod="UpdateWebService" DeleteServiceMethod="DeleteWebService" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString %>"
SelectCommand="SELECT * FROM [schedule]"></asp:SqlDataSource>

Property:
1. DataSourceID ---- Create a DataSource and bind it on Schedule.
2. KeyField ---- The field name of primary key of DataSource.
3. There are three mandatory field you have to create:
DateTimeFieldName ---- related field name about the datetime of the task
TitleFieldName ---- related field name about the title of the task
DescriptionFieldName ---- related field name about the description of the task
4. ServicePath ---- If you have used AjaxControlToolkit, you must be familar with this property. It means the path of the web service file.
UpdateServiceMethod ---- The web method name to execute updating function
DeleteServiceMethod ---- The web method name to execute deleting function

Build a web service bound to achieve updating and deleting function

The following demo snippets are the web methods of updating function and delete function.
In the web method of updating function:
"key" is the primary key that will be updated.
"updateFieldName" is the field name that will be updated.
"updateValue" is the related value which it is updated to about "updateFieldName".

In the web method of deleting function,
just need "key" that is the primary key that will be deleted.

[WebMethod]
[System.Web.Script.Services.ScriptMethod]
public void UpdateWebService(string key, string updateFieldName, string updateValue)
{
string constr = (string)ConfigurationManager.ConnectionStrings["DatabaseConnectionString"].ConnectionString;
string sql = "update schedule set " + updateFieldName + "='" + updateValue+"' where num="+key;
SqlConnection connection = new SqlConnection(constr);
SqlCommand sdc = new SqlCommand(sql, connection);
sdc.CommandType = CommandType.Text;
try
{
connection.Open();
sdc.ExecuteScalar();
}
catch (SqlException SQLexc)
{
throw new Exception(SQLexc.Message);
}
finally
{
connection.Close();
}
System.Threading.Thread.Sleep(2000);

}

[WebMethod]
[System.Web.Script.Services.ScriptMethod]
public void DeleteWebService(string key)
{

string constr = (string)ConfigurationManager.ConnectionStrings["DatabaseConnectionString"].ConnectionString;
string sql = "delete from schedule where num=" + key;
SqlConnection connection = new SqlConnection(constr);
SqlCommand sdc = new SqlCommand(sql, connection);
sdc.CommandType = CommandType.Text;
try
{
connection.Open();
sdc.ExecuteScalar();
}
catch (SqlException SQLexc)
{
throw new Exception(SQLexc.Message);
}
finally
{
connection.Close();
}
System.Threading.Thread.Sleep(2000);
}

In Short:
To use this Schedule button, you need use html tag to create Schedule, create a DataSource control to bind on Schedule and build two web methods to achieve updating and deleting functions.

Build a ButtonList (Ajax Control)

2009-09-29T07:17:00.006-04:00

<Pain:ButtonList runat="server" ID="ButtonList1" OnSelectedIndexChanged="ButtonList1_SelectedIndexChanged" >
<asp:ListItem>day</asp:ListItem>
<asp:ListItem>month</asp:ListItem>
<asp:ListItem>year</asp:ListItem>
</Pain:ButtonList> 

UpdateProgress is not working with AssociatedUpdatePanelID

2009-08-20T04:05:00.001-04:00

Somebody found the UpdateProgress isn't working if it sets the property "AssociatedUpdatePanelID". Actually, when the Trigger control is outside UpdatePanel, and AssociatedUpdatePanelID of UpdateProgress is pointing to this UpdatePanel, the UpdateProgress won't be working.In the following sample, UpdateProgress AssociatedUpdatePanelID is pointing to UpdatePanel1, and Button1 which is the trigger control is outside UpdatePanel1. When you click the Button1, UpdateProgress will not be working.

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
        ...Updating
    </ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
    <ContentTemplate>
        Current Time <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />

If Button1 is inside UpdatePanel1, the value of postBackSettings.PanelID will be generated to "UpdatePanel1Button1". AssociatedUpdatePanelID will be checked with postBackSettings.PanelID. If they are equel, UpdateProgress will be displayed.If Button1 is outside UpdatePanel1,the value of postBackSettings.PanelID will be generated to "ScriptManager1Button1". AssociatedUpdatePanelID is not matched with it, so it can't pop out UpdateProgress.In this case, we have to show UpdateProgress manually when the value of get_postBackElement.id is button1.

http://www.asp.net/AJAX/Documentation/Live/ViewSample.aspx?sref=UpdateProgressTutorialIntro11

Asp.Net Ajax Extender Control Tutorial

2009-07-23T02:49:00.004-04:00

I built several Extender Control and Script Control in my provious posts within PainControls assembly, which you can download. You can search the resource about how to build extender control or script control on web. However, I'd still like to write something on it in my words. If you are interesting on that, you can check this article.

Microsoft ASP.Net Ajax Extensions enables you to expand the capabilities of an ASP.Net Web Application in order to create a rich client user experience. We can make use of ScriptControl or ExtenderControl to build a rich client behavior or web control. The difference between ExtenderControl and ScriptControl is that Extender is used on creating client script capabilities on an existing control, which is called "TargetControl" for this behavior, whereas ScriptControl is an absolute web control which contains rich client functionality. For example, when we'd like to build a ModalPopup which will pop out an existing Panel, show/hide functionality is the client script application, then we can build it as ExtenderControl. However, for ScriptControl, for instance, TabContainer which is the entirely new web control contains the client script functionality, so we can build it as ScriptControl.

1. To encapsulate the client behavior for use by ASP.NET page developers, you can use an extender control. An extender control is a Web server control that inherits the ExtenderControl abstract class in the System.Web.UI namespace.
Extender control is used for client script functionality extension of an existing web control. It can be applied to specific Web server control types. You identify the types of Web server controls to which an extender control can be applied by using the TargetControlTypeAttribute attribute.
(The sample code as below is according to the TimePicker which is from http://vincexu.blogspot.com/2009/07/ajax-timepickerclockpicker-control.html)

[TargetControlType(typeof(Control))]
public class TimePicker: ExtenderControl

2. The following two methods of the ExtenderControl abstract class that you must implement in an extender control.

protected override IEnumerable GetScriptDescriptors(Control targetControl)
{
ScriptControlDescriptor descriptor = new ScriptControlDescriptor("PainControls.TimePicker", targetControl.ClientID);
descriptor.AddElementProperty("errorSpan", this.NamingContainer.FindControl(ErrorPresentControlID).ClientID);
descriptor.AddProperty("timeType", TimeType);
descriptor.AddEvent("showing", OnClientShowing);
yield return descriptor;
}
protected override IEnumerable GetScriptReferences()
{
yield return new ScriptReference(Page.ClientScript.GetWebResourceUrl(this.GetType(), "PainControls.TimePicker.TimePicker.js"));
}

3. Embed Css reference in PreRender phase.

private void RenderCssReference()
{
string cssUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(), "PainControls.TimePicker.TimePicker.css");
HtmlLink link = new HtmlLink();
link.Href = cssUrl;
link.Attributes.Add("type", "text/css");
link.Attributes.Add("rel", "stylesheet");
Page.Header.Controls.Add(link);
}

4. Set all resources(contain images, css file and js file) embedded in this extender control as "Embedded Resource"(property "Build Action").

5. This extender control can derive from IExtenderControl interface and a server control, instead of ExtenderControl if you'd like to.

The control can derive from other server controls if you want to make it inherit a server control than ExtenderControl. In this scenario, it should derive from IExtenderControl interface and a server control class. Meanwhile, we have another three steps need to do:
1) Define TargetControl property
2) Override OnPreRender method. Register the web control as the ExtenerControl in OnPreRender phase.
ScriptManager manager = ScriptManager.GetCurrent(this.Page);
if (manager == null)
{
throw new InvalidOperationException("A ScriptManager is required on the page.");
}
manager.RegisterExtenderControl(this);
3) Override Render method. Register the script descriptor which has been defined.
ScriptManager.GetCurrent(this.Page).RegisterScriptDescriptors(this);

6. The rest work is on client-side. Register client NameSpace first.

Type.registerNamespace("PainControls");

7. Build client class.

PainControls.TimePicker = function(element)
{
}
PainControls.TimePicker.prototype = {
}

8. Register the class that inherits "Sys.UI.Behavior".

PainControls.TimePicker.registerClass('PainControls.TimePicker', Sys.UI.Behavior);

9. Call base method in constructor method

PainControls.TimePicker.initializeBase(this, [element]);

10. Implementing the Initialize and Dispose Methods.
Build "initialize" and "dispose" method in prototype of the class. The initialize method is called when an instance of the behavior is created. Use this method to set default property values, to create function delegates, and to add delegates as event handlers. The dispose method is called when an instance of the behavior is no longer used on the page and is removed. Use this method to free any resources that are no longer required for the behavior, such as DOM event handlers.

initialize: function() {
PainControls.TimePicker.callBaseMethod(this, 'initialize');
},
dispose: function() {
PainControls.TimePicker.callBaseMethod(this, 'dispose');
}

11. Defining the Property Get and Set Methods.
Each property identified in the ScriptDescriptor object of the extender control's GetScriptDescriptors(Control) method must have corresponding client accessors. The client property accessors are defined as get_<:property> and set_<:property> methods of the client class prototype.

get_timeType: function() {
return this._timeType;
},
set_timeType: function(val) {
if (this._timeType !== val) {
this._timeType = val;
this.raisePropertyChanged('timeType');
}
},

12. Defining the Event Handlers for the DOM Element
1) Defining the handler in constructor function:
this._element_focusHandler = null;
2) Associate the handler with the DOM Element event in initailize method:
this._element_focusHandler = Function.createDelegate(this, this._element_onfocus);
3) Add the handler in initailize method:
$addHandler(this.get_element(), 'focus', this._element_focusHandler)
4) Build callback method about this event:
_element_onfocus:function(){
}

13. Defining the Event Handlers for the behavior
Each event identified in the ScriptDescriptor object of the extender control's GetScriptDescriptors(Control) method must have corresponding client accessors. The client event accessors are defined as add_<:event> and remove_<:event> methods of the client class prototype. The method Raise<:event> is defined to trigger the event.

add_showing: function(handler) {
this.get_events().addHandler("showing", handler);
},
remove_showing: function(handler) {
this.get_events().removeHandler("showing", handler);
},
raiseShowing: function(eventArgs) {
var handler = this.get_events().getHandler('showing');
if (handler) {
handler(this, eventArgs);
}
},

14. Use this extender control TimePicker in page.
1) Register the assembly in page.

<%@ Register TagPrefix="PainControls" Assembly="PainControls" Namespace="PainControls" %>

2) Add a ScriptManager control in page, and create TimePicker control to bind on a TextBox.

<asp:textbox id="TextBox1" runat="server" text=""></asp:textbox>
<PainControls:timepicker id="t1" runat="server" targetcontrolid="TextBox1" timetype="H24"> 

AjaxControlToolkit ComboBox not showing in TabContainer

2009-07-17T00:57:00.003-04:00

We have been refered that combobox is not appearing in ModalPopup: http://vincexu.blogspot.com/2009/05/ajaxcontroltoolkit-combobox-not.html

But somebody found that it also will pop out script error on the line b.width=c+"px" if combobox is in the TabPanel which is not the default active panel in tabcontainer.

For example, we have 2 combobox controls, one is in the TabPanel1, and the other is in TabPanel2. TabPanel1 is the default active tabPanel. After initialized, it will pop out the error, then combobox1 in tabpanel1 is displaying, but combobox2 not.

Check the following sample about it.

<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" Height="228px"
Width="400px">
<ajaxToolkit:TabPanel ID="tabpane1" runat="server" HeaderText="tab1">
<ContentTemplate>
<ajaxToolkit:ComboBox runat="server" ID="ComboBox1" MaxLength="100" AutoCompleteMode="Suggest">
<asp:ListItem Text="ABC" Value="ABC"></asp:ListItem>
<asp:ListItem Text="XYZ" Value="XYZ"></asp:ListItem>
</ajaxToolkit:ComboBox>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="Tab2">
<ContentTemplate>
<ajaxToolkit:ComboBox runat="server" ID="ComboBox2" MaxLength="100" AutoCompleteMode="Suggest">
<asp:ListItem Text="ABC" Value="ABC"></asp:ListItem>
<asp:ListItem Text="XYZ" Value="XYZ"></asp:ListItem>
</ajaxToolkit:ComboBox>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

(You can try this sample. Because Combobox2 is in the TabPanel2, which is an inactive panel, it will pop out the error and it will make Combobox2 off.)

This issue is attributable to the tabpanel which is not active is invisible, combobox can't get the correct offsetHeight and offsetWidth any more.

So, the approach to resolve it is setting the TabPanel2 to be visible so that combobox can create in gear.
Combobox will be created in initialized phase. So we have to set TabPanel2 to be visible before combobox creates and set it back in pageLoad phase.

<script type="text/javascript">
    $get('<%=TabPanel2.ClientID %>').style.visibility = "visible";
    $get('<%=TabPanel2.ClientID %>').style.display = "block";

    function pageLoad() {
        $get('<%=TabPanel2.ClientID %>').style.visibility = "hidden";
        $get('<%=TabPanel2.ClientID %>').style.display = "none";
    }

</script>

Put the above script after document body and form content. It will let Combobox1 and combobox2 showing according to he above HTML sample.

Cheer.

Ajax TimePicker/ClockPicker control

2009-07-16T05:41:00.007-04:00

Hi,

Last time I made a Custom DropDown. Please check the following image about this Ajax control.

Blog link: http://vincexu.blogspot.com/2009/06/about-ajaxcontroltoolkit-combobox.html

It introduces how to build a DropDown/ComboBox by Asp.Net Ajax ScriptControl. You can download this control in above link.

I made a TimePicker/ClockPicker this time, hope it can help you. See the following image about this ajax TimePicker.

You can drag the hour/minute pointer to select a time. It supports 12h and 24h format.

You can download from:

(PainControls contain dropdown and timepicker so far)

If you'd like to use this ajax control, please check the below:

1.Add the reference PainControls.dll, and check the sample code as below.

<asp:TextBox ID="TextBox1" Text="" runat="server"></asp:TextBox> <Pain:TimePicker runat="server" ID="t1" TargetControlID="TextBox1" TimeType="H24" />

Properties:

TargetControl: which TextBox(only TextBox) is bound on TimePicker

TimeType: H24/H12 -- Time format

ErrorPrensentControlID: the control can display the time validation information. You can assign it as some span or label to bind on it.

And there are several client Events you can use:

OnClientShowing : client showing event

OnClientShown : client shown event

OnClientHiding: client hiding event

OnClientHidden: client hidden event

OnClientHourSelectionChanged: it triggers when you select new hour value by mouse. It will trigger when mouse up.

OnClientMinuteSelectionChanged: it triggers when you select new minute value by mouse. It will trigger when mouse up.

2. You need use FrameWork 3.5 sp1 to support this control. (You can recompile the files if you want to use in FrameWork 2.0)

3. Don't forget adding a ScriptManager control in the page.

4. If you want to set a default Time for TimePicker, please set a default value in TextBox. It will reset the time according to the value of TextBox bound.

About AjaxControlToolkit ComboBox

2009-06-29T04:33:00.005-04:00

ComboBox is a new contorl in AjaxControlToolkit. In this time, let's talk about what's the ComboBox, and how to build a ComboBox control in ASP.Net. (You can see the structure of the ComboBox which I ever build: http://vincexu.blogspot.com/2008/11/build-combobox-in-aspnet.html)

1. ComboBox is not a DropDownList. It is built by a TextBox(the area you input), a Button(the button you can click to pop out the list below) and a BulletedList(option list) which is the kernel part in this Composite control.

2. ComboBox is deriving from ListControl, so you can make use of some features of ListControl to build the option List functionality, such as SelectedIndex, SelectedValue, DataSource and so on. These properties and functionality of ListControl can help us to build a combo list box conveniently.

3. The option list is built by a BulletedList, which will render to "ul" and "li" elements on client. So each item in optionlist is a "li" element. (in DropDownList, it will render to "select" element and "option" element for each item.)

4. After binding datasource on comboBox(it is a just ListControl now), the items will be stored into ComboBox.items container. To add these items to optionlist, We need retrieve these items from ComboBox and set them on optionList(BulletedList) in render phase.

5. Since OnSelectedItemsChanged event is not working in BulletedList, we have to realize the IPostBackDataHandler interface to support the SelectedItemsChanged event.

6. We need to override AutoPostBack and SelectedIndex attributes of ListControl in ComboBox. SelectedIndex should get the active slected item index, so we have to create an additional HiddenControl to save the selectedIndex user selects. When the user select a new item, we can use script to alter the value in HiddenControl. After postback to the server-side, we can get the value from this HiddenControl. Do SelectedIndex attribute should be bound on the value on this HiddenControl, which is used for recording the active item index.AutoPostBack is an attribute related to the client-side property autoPostBack, which is used for if comboBox will do postback.

7. The above all are what we should do on server side. Then we need to realize client functionality.
1). HighLight functionality of item. We need to build onmouseover for optionList to achieve highlighting functionSee _onListMouseOver function in comboBox.debug.js.

2). To comfirm the item has been selected, we need to build onmousedown do so. See _onListMouseDown function. (If you need build client-side selectedItemChanged, you can override this function.)

3). Once TextBox gets focus, it will check if it need do postback. See _onTextBoxFocus function.

4). Besides the above basic fucntions to build, we need to build auto suggesting functionality of TextBox, and show/hide optionlist on button clicking. That's all based on client side script.

To help you known about ComboBox, I build a simple DropDown which is a ScripControl(It looks like DropdownList, but we can set any Css for it to make it more beautiful). Hope it can help you.

DropDown.cs

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml.Linq;
using System.ComponentModel;
using System.Collections.Specialized;
using System.Globalization;

[assembly: WebResource("PainControls.DropDown.DropDown.js", "application/x-javascript")]
[assembly: WebResource("PainControls.DropDown.DropDown.css", "text/css", PerformSubstitution=true)]
[assembly: WebResource("PainControls.DropDown.menuOutPut.gif", "image/gif")]
[assembly: WebResource("PainControls.DropDown.menuLi.gif", "image/gif")]

/////////////We need set the these files as Embedded Resource //////////////
namespace PainControls
{

public class DropDown : ListControl, IScriptControl,IPostBackDataHandler,INamingContainer
{
public DropDown()
{

}

#region IScriptControl Member
private string GetClientID(string controlId)
{
return this.FindControl(controlId).ClientID;
}

public IEnumerable<ScriptDescriptor> GetScriptDescriptors()
{
ScriptControlDescriptor descriptor = new ScriptControlDescriptor("PainControls.DropDown", this.ClientID);
descriptor.AddElementProperty("dropDownOutPutElement", DropDownOutPutElement.ClientID);
descriptor.AddElementProperty("dropDownListElement", DropDownListElement.ClientID);
descriptor.AddElementProperty("dropDownOptionList", DropDownOptionList.ClientID);
descriptor.AddElementProperty("dropDownHiddenField", DropDownHiddenField.ClientID);

descriptor.AddProperty("autoPostBack", AutoPostBack);
descriptor.AddProperty("selectedIndex", SelectedIndex);
descriptor.AddProperty("listItemHighLightCssClass", ListItemHighLightCssClass);
descriptor.AddProperty("listItemCssClass", ListItemCssClass);




yield return descriptor;
}

// Generate the script reference
public IEnumerable<ScriptReference> GetScriptReferences()
{
yield return new ScriptReference(Page.ClientScript.GetWebResourceUrl(this.GetType(), "PainControls.DropDown.DropDown.js"));
}
#endregion



#region Css Property

public virtual string ListItemHighLightCssClass
{
get
{
return "listItemHighLight";
}
}

public virtual string ListItemCssClass
{
get
{
return "listItem";
}
}

#endregion

#region List Properties

public override int SelectedIndex
{
get
{
int selectedIndex = base.SelectedIndex;
if ((selectedIndex < 0) && (this.Items.Count > 0))
{
this.Items[0].Selected = true;
selectedIndex = 0;
}
return selectedIndex;
}
set
{
base.SelectedIndex = value;
DropDownHiddenField.Value = value.ToString();

}
}

public override bool AutoPostBack
{
get
{
return base.AutoPostBack;
}
set
{
base.AutoPostBack = value;
}
}

#endregion

#region Child Controls

private HtmlGenericControl _DropDownOutPutElement;
private HtmlGenericControl _DropDownListElement;
private BulletedList _DropDownOptionList;
private HiddenField _DropDownHiddenField;
protected virtual HtmlGenericControl DropDownOutPutElement
{
get
{
if (_DropDownOutPutElement == null)
_DropDownOutPutElement = new HtmlGenericControl("Div");

return _DropDownOutPutElement;
}
}

protected virtual HtmlGenericControl DropDownListElement
{
get
{
if (_DropDownListElement == null)
_DropDownListElement = new HtmlGenericControl("Div");
return _DropDownListElement;
}
}
protected virtual BulletedList DropDownOptionList
{
get
{
if (_DropDownOptionList == null)

_DropDownOptionList = new BulletedList();

return _DropDownOptionList;
}
}
protected virtual HiddenField DropDownHiddenField
{
get
{
if (_DropDownHiddenField == null)
_DropDownHiddenField = new HiddenField();
return _DropDownHiddenField;
}
}
#endregion

#region Create Child Controls

protected override void CreateChildControls()
{

this.Controls.Clear();
CreateDropDownOutPutElement();
CreateDropDownListElement();
CretaeDropDownOptionList();
CreateDropDownHiddenField();
base.CreateChildControls();

}

private void CreateDropDownOutPutElement()
{

this.Controls.Add(DropDownOutPutElement);
}
private void CreateDropDownListElement()
{

DropDownListElement.Style.Add(HtmlTextWriterStyle.Display, "none");
this.Controls.Add(DropDownListElement);
}
private void CretaeDropDownOptionList()
{

DropDownListElement.Controls.Add(DropDownOptionList);
}
private void CreateDropDownHiddenField()
{
DropDownListElement.Controls.Add(DropDownHiddenField);
}

#endregion

#region Render Methods

protected override void AddAttributesToRender(HtmlTextWriter writer)
{
base.AddAttributesToRender(writer);
AddDropDownOutPutElementAttributesToRender(writer);
AddDropDownListElementAttributesToRender(writer);
AddDropDownOptionListAttributesToRender(writer);
}

protected virtual void AddDropDownOutPutElementAttributesToRender(HtmlTextWriter writer)
{

DropDownOutPutElement.InnerHtml = this.Items[SelectedIndex].Text;
DropDownOutPutElement.Attributes.Add("class", "dropDownOutPutElement");
}

protected virtual void AddDropDownListElementAttributesToRender(HtmlTextWriter writer)
{

DropDownListElement.Attributes.Add("class", "dropDownListElement");
}

protected virtual void AddDropDownOptionListAttributesToRender(HtmlTextWriter writer)
{

DropDownOptionList.CssClass = "dropDownOptionList";
}


protected override HtmlTextWriterTag TagKey
{
get { return HtmlTextWriterTag.Div; }
}


// Add Css reference 
private void RenderCssReference()
{
string cssUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(), "PainControls.DropDown.DropDown.css");

HtmlLink link = new HtmlLink();
link.Href = cssUrl;
link.Attributes.Add("type", "text/css");
link.Attributes.Add("rel", "stylesheet");
Page.Header.Controls.Add(link);
}

protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
RenderCssReference();


ScriptManager manager = ScriptManager.GetCurrent(this.Page);
if (manager == null)
{
throw new InvalidOperationException("A ScriptManager is required on the page.");
}
manager.RegisterScriptControl<DropDown>(this);
Page.RegisterRequiresPostBack(this);


}
protected override void RenderContents(HtmlTextWriter writer)
{
ScriptManager.GetCurrent(this.Page).RegisterScriptDescriptors(this);

DropDownOutPutElement.RenderControl(writer);

DropDownOptionList.Items.Clear();
ListItem[] copy = new ListItem[Items.Count];
Items.CopyTo(copy, 0);
DropDownOptionList.Items.AddRange(copy);

DropDownListElement.RenderControl(writer);
DropDownHiddenField.RenderControl(writer);

}

#endregion

#region IPostBackDataHandler Implementation


bool IPostBackDataHandler.LoadPostData(string postDataKey, NameValueCollection postCollection)
{
return LoadPostData(postDataKey, postCollection);
}

void IPostBackDataHandler.RaisePostDataChangedEvent()
{
RaisePostDataChangedEvent();
}

protected virtual bool LoadPostData(string postDataKey, NameValueCollection postCollection)
{
if (!Enabled)
return false;

int newSelectedIndex = Convert.ToInt32(postCollection.GetValues(DropDownHiddenField.UniqueID)[0], CultureInfo.InvariantCulture);
EnsureDataBound();

if (newSelectedIndex != SelectedIndex)
{

SelectedIndex = newSelectedIndex;
return true;
}

return false;
}

public virtual void RaisePostDataChangedEvent()
{
this.OnSelectedIndexChanged(EventArgs.Empty);
}

#endregion


}
}

DropDown.js

/// <reference name="MicrosoftAjax.js"/>


Type.registerNamespace("PainControls");

PainControls.DropDown = function(element) {
PainControls.DropDown.initializeBase(this, [element]);
//element property 
this._dropDownOutPutElement = null;
this._dropDownListElement = null;
this._dropDownOptionList = null;
this._dropDownHiddenField = null;
//property
this._autoPostBack = null;
this._selectedIndex = null;
this._listItemHighLightCssClass=null;
this._listItemCssClass=null;

//handler
this._outPutClickHandler = null;
this._outPutMouseOverHandler = null;
this._outPutMouseOutHandler = null;
this._listMouseOverHandler = null;
this._listMouseDownHandler = null;

//
this._highlightedIndex=null;
this._dropDownOutPutElementBorderColor=null;
this._isShown=null;
}

PainControls.DropDown.prototype = {
initialize: function() {
PainControls.DropDown.callBaseMethod(this, 'initialize');
this.initializeListItems();
this.createDelegates();
this.createHandlers();


},

initializeListItems:function(){
var children = this.get_dropDownOptionList().childNodes;
for (var i = 0; i < children.length; ++i) {

Sys.UI.DomElement.addCssClass(children[i],this.get_listItemCssClass());
}
},

dispose: function() {
//Add custom dispose actions here
PainControls.DropDown.callBaseMethod(this, 'dispose');
},

createDelegates:function(){
this._outPutClickHandler = Function.createDelegate(this, this._onOutPutClick);
this._outPutMouseOverHandler = Function.createDelegate(this, this._onOutPutMouseOver);
this._outPutMouseOutHandler = Function.createDelegate(this, this._onOutPutMouseOut);
this._listMouseOverHandler = Function.createDelegate(this, this._onListMouseOver);
this._listMouseDownHandler = Function.createDelegate(this, this._onListMouseDown);

},

clearDelegates:function(){

},

createHandlers:function(){

$addHandlers(this.get_dropDownOutPutElement(),
{
'click': this._outPutClickHandler,
'mouseover': this._outPutMouseOverHandler,
'mouseout': this._outPutMouseOutHandler
}, this);

$addHandlers(this._dropDownOptionList,
{
'mouseover': this._listMouseOverHandler,
'mousedown': this._listMouseDownHandler,

}, this);
},

clearHandlers:function(){

},

_showListElement: function() {

var loc = Sys.UI.DomElement.getLocation(this._dropDownOutPutElement);
Sys.UI.DomElement.setLocation(this._dropDownListElement, loc.x, loc.y + this._dropDownOutPutElement.offsetHeight);
this._dropDownListElement.style.display = "block";
this._isShown=true;
},

_hideListElement:function(){
this._dropDownListElement.style.display = "none";
this._isShown=false;
},


//event handle
_onOutPutClick: function(e) {
if(this._isShown)
this._hideListElement();
else
this._showListElement();
e.preventDefault();
return false;
},

_onOutPutMouseOver: function(e) {
//
this._dropDownOutPutElementBorderColor=this.get_dropDownOutPutElement().style.borderColor;
this.get_dropDownOutPutElement().style.borderColor="#F7A040";

},

_onOutPutMouseOut: function(e) {
//
if(this._dropDownOutPutElementBorderColor!=null)
this.get_dropDownOutPutElement().style.borderColor=this._dropDownOutPutElementBorderColor;
},

_onListMouseOver: function(e) {
//
if (e.target !== this.get_dropDownOptionList()) {
var target = e.target;
var children = this.get_dropDownOptionList().childNodes;

// loop through children to find a match with the target
for (var i = 0; i < children.length; ++i) {
// match found, highlight item and break loop
if (target === children[i]) {
this._highlightListItem(i, true);
break;
}
}
}

},

_onListMouseDown: function(e) {

if (e.target == this.get_dropDownOptionList() e.target.tagName == 'scrollbar') {
return true;
}

// set the TextBox to the highlighted ListItem's text and update selectedIndex
if (e.target !== this.get_dropDownOptionList()) {
if(this.get_selectedIndex() != this._highlightedIndex){
var highlightedItem = this.get_dropDownOptionList().childNodes[this._highlightedIndex];
var text = this.get_listItems()[this._highlightedIndex].text;
this.get_dropDownOutPutElement().innerHTML = text;
this.set_selectedIndex(this._highlightedIndex);


// return focus to the TextBox
this.get_dropDownOutPutElement().focus();

if(this.get_autoPostBack())
{
__doPostBack(this.get_element().id, '');

}
}
this._hideListElement();
}
else {
return true;
}
e.preventDefault();
e.stopPropagation();
return false;
},

_highlightListItem: function(index, isHighLighted){
// only highlight valid indices
if (index == undefined index < 0) {
if (this._highlightedIndex != undefined && this._highlightedIndex >= 0) {
this._highlightListItem(this._highlightedIndex, false);
}
return;
}
var children = this.get_dropDownOptionList().childNodes;
var newLiElement = children[index];
var oldLiElement = this._highlightedIndex==null?null: children[this._highlightedIndex];

if(oldLiElement!=null)
this._toggleCssClass(oldLiElement,this.get_listItemCssClass(),this.get_listItemHighLightCssClass());
this._toggleCssClass(newLiElement,this.get_listItemCssClass(),this.get_listItemHighLightCssClass());

this._highlightedIndex=index;


},

_toggleCssClass: function(element,cssClassName1,cssClassName2){

var oldClassName=element.className;
if(oldClassName!=cssClassName1 && oldClassName!=cssClassName2)
return;
var newClassName=(oldClassName==cssClassName1)?cssClassName2:cssClassName1;
Sys.UI.DomElement.removeCssClass(element,oldClassName);
Sys.UI.DomElement.addCssClass(element,newClassName);
},

//property
get_autoPostBack: function() {
return this._autoPostBack;
},

set_autoPostBack: function(val) {
if (this._autoPostBack !== val) {
this._autoPostBack = val;
this.raisePropertyChanged('autoPostBack');
}
},
get_selectedIndex: function() {
this._ensureSelectedIndex();
var selectedIndex = this.get_dropDownHiddenField().value;
return parseInt(selectedIndex);
},

set_selectedIndex: function(val) {
if (this.get_dropDownHiddenField().value !== val.toString()) {
this.get_dropDownHiddenField().value = val.toString();
this._ensureSelectedIndex();
this.raisePropertyChanged('selectedIndex');
}
},

_ensureSelectedIndex: function() {

// server may not always invoke set_selectedIndex(), need to make sure this is always an integer
var selectedIndex = this.get_dropDownHiddenField().value;
if (selectedIndex == '') {
selectedIndex = this.get_listItems().count > 0 ? 0 : -1;
this.get_dropDownHiddenField().value = selectedIndex.toString();
}
},

get_listItemHighLightCssClass:function(){
return this._listItemHighLightCssClass;
},

set_listItemHighLightCssClass:function(val){
if (this._listItemHighLightCssClass !== val) {
this._listItemHighLightCssClass = val;
this.raisePropertyChanged('listItemHighLightCssClass');
}
},

get_listItemCssClass:function(){
return this._listItemCssClass;
},

set_listItemCssClass:function(val){
if (this._listItemCssClass !== val) {
this._listItemCssClass = val;
this.raisePropertyChanged('listItemCssClass');
}
},

get_listItems: function() {
var items = new Array();
var childNodes = this.get_dropDownOptionList().childNodes;
for (var i = 0; i < childNodes.length; i++) {
var obj = new Object();
obj.text = childNodes[i].innerHTML.trim();
Array.add(items,obj);
}
return items;

},

get_dropDownOutPutElement: function() {
return this._dropDownOutPutElement;
},

set_dropDownOutPutElement: function(val) {
if (this._dropDownOutPutElement !== val) {
this._dropDownOutPutElement = val;
this.raisePropertyChanged('dropDownOutPutElement');
}
},

get_dropDownListElement: function() {
return this._dropDownListElement;
},

set_dropDownListElement: function(val) {
if (this._dropDownListElement !== val) {
this._dropDownListElement = val;
this.raisePropertyChanged('dropDownListElement');
}
},

get_dropDownOptionList: function() {
return this._dropDownOptionList;
},

set_dropDownOptionList: function(val) {
if (this._dropDownOptionList !== val) {
this._dropDownOptionList = val;
this.raisePropertyChanged('dropDownOptionList');
}
},

get_dropDownHiddenField: function() {
return this._dropDownHiddenField;
},

set_dropDownHiddenField: function(val) {
if (this._dropDownHiddenField !== val) {
this._dropDownHiddenField = val;
this.raisePropertyChanged('dropDownHiddenField');
}
},



}
PainControls.DropDown.registerClass('PainControls.DropDown', Sys.UI.Control);

if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

If you would like to download this DropDown ScriptControl, click the following.

Dynamically register UpdatePanel Trigger

2009-06-12T04:02:00.002-04:00

Two approaches can be used to register the UpdatePanel Trigger:

1. At code behind, we can use UpdatePanel.Triggers.Add to add a dynamic trigger.

AsyncPostBackTrigger Trigger1 = new AsyncPostBackTrigger();
Trigger1.ControlID = "Control UniqueID"; //it's UniquelID
Trigger1.EventName = "Click";
UpdatePanel1.Triggers.Add(Trigger1);

That's the way always popular to do when we go with UpdatePanel.

2. Sometimes, we need use client-side approach to register Triggers on the fly that will be more firsthand and more convenient.

Check the following Script code:

Sys.WebForms.PageRequestManager.getInstance()._updateControls(["t"+updatepanelid],
[AsyncPostBackTriggers1_ID, AsyncPostBackTriggers2_ID], [PostBackTriggers1_ID, PostBackTriggers2_ID], 90);// Here ID is UniqueID.

The above code can register the control as the trigger of UpdatePanel. That is real what the Ajax framework is doing. When you check the source code of ajax-enable page, you can find this kind of code.

Let's research this method step on step:
1.This method is to register AsyncPostBackTrigger and PostBackTrigger on client.
2.In the first parameter, it is composted by "t"/"f" and UpdatePanel ID. "t"/"f" means if ChildrenAsTriggers is true or false.
3.In the second parameter, it is an array list of asyncpostback triggers' Unique ID.
3.In the third parameter, it is an array list of postback triggers' Unique ID.
4.In the last parameter, it is the timeout attribute.

--------------------------------------------------------------------------------------

You can choose one of these two approaches to achieve registering Trigger dynamically. However, with this approach, we can get some interesting purpose. Please check the following sample.

I have a DropdownList inside UpdatePanel with Button. When I select the first item, Button will be as PostBack Trigger and do full postback. When I select the second item, Button will be as AsyncPostBack Trigger and do partial postback. So I can do validation to decide to do as PostBack Trigger or AsyncPostBack Trigger dynamically.

<script type="text/javascript">


    function check() {
        var button1 = '<%=Button1.UniqueID %>';
        var dropDownList1 = $get('<%=DropDownList1.UniqueID %>');
        var updatePanel = '<%= UpdatePanel1.UniqueID %>';
        if (dropDownList1.selectedIndex == 0)
            Sys.WebForms.PageRequestManager.getInstance()._updateControls(["t" + updatePanel], [], [button1], 90); //PostBack

        else
            Sys.WebForms.PageRequestManager.getInstance()._updateControls(["t" + updatePanel], [button1], [], 90); //AsyncPostBack

    }
</script>

<body>

    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:DropDownList ID="DropDownList1" runat="server">
                <asp:ListItem>do PostBack</asp:ListItem>
                <asp:ListItem>do asyncPostBack</asp:ListItem>
            </asp:DropDownList>
           <%=DateTime.Now %>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="check();" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>

Keep the TextBox Focus inside UpdatePanel

2009-06-11T01:16:00.004-04:00

At this time, let's talk about the old issue -- UpdatePanel Focus problem
Assuming that you have a TextBox inside UpdatePanel, when you set an Ajax Timer for this UpdatePanel or set TextChanged event of TextBox in order to make the TextBox do postback, you will find it losts focus from TextBox after you type something and do postback.
For instance, please check the following sample:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged"

AutoPostBack="true"></asp:TextBox>
<asp:Label runat="server" Text="" ID="Label1"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>

protected void TextBox1_TextChanged(object sender, EventArgs e)
{
Label1.Text="you inputed " + TextBox1.Text;
//ScriptManager1.SetFocus(TextBox1);

}

In above sample, TextBox will lost focus after you press enter and doing postback.

As a solution, We can use ScriptManager1.SetFocus(TextBox1) to focus the Textbox1 again after postback. As a result, it gets the focus, but the cursor in TextBox is changed and initialized(It goes to the first charactor location, instead of keeping to the current location).

To resolve this problem so that it can keep the current location in Textbox after postback, we can use the following JavaScript to set the location in TextBox manually.

function setfocus() {
var txb = $get("<%=TextBox1.ClientID%>");
var t = txb.createTextRange();
t.collapse(true);

t.moveStart("character", txb.value.length);
t.select();

}

In addition, we need use JavaScript to store the current location in TextBox before postback and set it back after postback. See the entire sample as below.

<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged"

AutoPostBack="true"></asp:TextBox>
<asp:Label runat="server" Text="" ID="Label1"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>

<script type="text/javascript">
var currentCaret;
function getCaret(textbox) {
var textbox = $get("<%=TextBox1.ClientID%>");
var control = document.activeElement;
textbox.focus();
var rang = document.selection.createRange();
rang.setEndPoint("StartToStart", textbox.createTextRange());
return rang.text.length;
}


function setfocus() {
var txb = $get("<%=TextBox1.ClientID%>");
var t = txb.createTextRange();
t.collapse(true);

t.moveStart("character", currentCaret);
t.select();

}

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(
function(sender, e) {
currentCaret = getCaret($get("<%=TextBox1.ClientID%>"));

});
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(
function(sender, e) {

setfocus();
});

</script>

protected void TextBox1_TextChanged(object sender, EventArgs e)
{
Label1.Text = "you inputed " + TextBox1.Text;

}

Following this sample, it will store the current cursor loacation in TextBox in beginRequest event, and set it back in endRequest event. In this way, it will achieve keeping the current location in TextBox.

(It's also working if you use an Ajax Timer inside UpdatePanel.)

How to add a Custom Button on TopToolBar of HTML Editor

2009-06-10T04:02:00.003-04:00

As to the new AjaxControlToolkit control HTML Editor, if some one wants to add a custom button onto TopToolBar of Editor and do some custom code, you can add a MethodButton and define client-side onclick to do script. It's no way to define server-side onclick of it. However, you can build a doPostBack functionality on client if you'd like to do onclick on the server-side.

public class CustomEditor : AjaxControlToolkit.HTMLEditor.Editor
{
public CustomEditor()
{
//
// TODO: Add constructor logic here
//
}


protected override void FillTopToolbar()
{
//base.FillTopToolbar();

AjaxControlToolkit.HTMLEditor.ToolbarButton.MethodButton btn=new AjaxControlToolkit.HTMLEditor.ToolbarButton.MethodButton();
btn.NormalSrc= "aa.jpg";
btn.Attributes.Add("onclick", "alert('a');");
TopToolbar.Buttons.Add(btn);

}

}

Update:

This new feature has been added to Editor control. You can download it and create custom button in editor control:

http://ajaxcontroltoolkit.codeplex.com/SourceControl/changeset/view/54501

Build the client-side contentChanged event of HTML Editor -- hook keypress client event of Editor content

2009-05-28T03:43:00.006-04:00

In this time, let us talk about HTML Editor. We can see HTML Editor has three modes: Design, HTML Text and Preview mode.
Design mode is in an IFrame actually. HTML Text is prensented in a TextArea and Preview mode is in another Iframe. The code rendered about these three modes is as below.

Design mode:

<iframe id="editor1_ctl02_ctl00" name="editor1_ctl02_ctl00" marginheight="0" marginwidth="0" frameborder="0" src="javascript:false;" style="height:100%;width:100%;display:none;border-width:0px;">
</iframe>

HTML Text mode:

<textarea id="editor1_ctl02_ctl01" class="ajax__htmleditor_htmlpanel_default" style="height:100%;width:100%;display:none;">
</textarea>

Preview mode:

<iframe id="editor1_ctl02_ctl02" name="editor1_ctl02_ctl02" marginheight="0" marginwidth="0" frameborder="0" src="javascript:false;" style="height:100%;width:100%;display:none;border-width:0px;">
</iframe>

In design mode, we can use the following JavaScript to append a callback function in onKeypress event so that we can do somthing when content is changed on client.

<script type="text/javascript">
        var count = 0;
        function pageLoad() {
            $get('editor1_ctl02_ctl00').contentWindow.document.body.onkeypress = function() {
                count++;
                $get('cc').innerHTML = "you input " + count + "charactors";         

            };
        }

</script>

As the same way, you can append another keypress event on TextArea and Preview IFrame.

If you'd like to do something on server-side when you typed in content of Editor, you can call Web Service to achieve it.

AjaxControlToolkit ComboBox not appearing in ModalPopup

2009-05-28T02:54:00.007-04:00

Most of us is enjoying ComboBox presenting, except it is inside ModalPopup.
When we use ComboBox in ModalPopup, it throws the client error and only thing in our sight is a bald TextBox instead of entire ComboBox in ModalPopup Panel. After debugging, we can find the error message is pointing to this line b.width=c+"px".
Actually, the ModalPopup behavior mix it up. So the only thing we need to do is
1. Put the ModalPopupExtender behind the Panel which contains ComboBox.
2. Set style "display" to "block"(default value if you don't set the value of it).

Check the sample as below:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="panel" runat="server" >
<cc1:ComboBox ID="ComboBox1" runat="server" AutoPostBack="true" DropDownStyle="DropDown">
<asp:ListItem Value="0" Text="1" >Text 1</asp:ListItem>
<asp:ListItem Value="1" Text="2">Text 2</asp:ListItem>
<asp:ListItem Value="2" Text="3">Text 3</asp:ListItem>
</cc1:ComboBox>
</asp:Panel>
<cc1:ModalPopupExtender ID="MPE" runat="server" PopupControlID="panel" TargetControlID="LB"> ---Put ModalPopupExtender behind Panel "panel".---
</cc1:ModalPopupExtender>
<asp:LinkButton ID="LB" runat="server" Text="clickme">click</asp:LinkButton> 

Actually we have the second way to resolve this problem. The issue will be encountered as soon as the parent element of combobox is invisible(style display=none or visibility=hidden). So the simplest approach is we can set it visible after rending and set it back in pageLoad.

Input your modalpopup panel clientID and put the above script after document body and form content.
The same problem in this link: http://vincexu.blogspot.com/2009/07/ajaxcontroltoolkit-combobox-not-showing.html

How to cancel Tab active changing with Validation

2009-05-26T23:40:00.005-04:00

Sometimes, when you change the active Tab Panel, you want to do validation and check if it should go to next tabpanel. It will go to the new Tab Panel only if it is meets the validation.
For example, there is a TextBox in TabPanel. If TextBox is empty, I don't want to let it go to another TabPanel.
For this scenario, the validation is based on the client side. The first confirm is we have to use JavaScript to do validation or catch the validation result if you used Validation control. There is a client event "ActiveTabChanged"(add_activeTabChanged method in behavior) of TabContainer you can make use of to do validation in this event. If it is valid, you can let it free to go. Overwise, you need use javascript to let it back to the previous tab. In this way, you need use a client validation to restore the history of the active tab index so that it can remeber which tab panel it can go back to in JavaScript .
But in this approach, it is go through the ActiveChanged client event. It means the active tab has been changed before we call this event. We would see the active tab goes to another one and go back again if it is invalid with validation. It looks too stupid and ugly.

So, I got two approaches to achieve this.

1. We can modify the source code of Tab Panel behavior as below. In _header_onclick method, it calls raiseClick and set the activeTab directly. We can insert an additional code line before setting active tab so that we can do something on validation.

AjaxControlToolkit.TabPanel.prototype._header_onclick = function(e) {
this.raiseClick();
if (isValidated()) // add this validation method
this.get_owner().set_activeTab(this);
};

It won't go to another tab unless it meets the validation. See the entire code below:

<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />
<ajaxToolkit:TabContainer runat="server" ID="TabContainer1">
<ajaxToolkit:TabPanel runat="server" ID="TabPanel1" HeaderText="TabPanel1">
<ContentTemplate>
TabPanel1
<input type="text" id="text1" />
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel2" HeaderText="TabPanel2">
<ContentTemplate>
TabPanel2
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</form>
</body>

<script type="text/javascript">

AjaxControlToolkit.TabPanel.prototype._header_onclick = function(e) {
this.raiseClick();
if (isValidated()) // add this additional code line to do validation
this.get_owner().set_activeTab(this);

};

function isValidated() {
if ($get("text1").value == "")
return false;
return true;
}

</script>

2. The above code looks like a workround purely. The directly approach is using ActiveTabChanging client event. In general ASP.Net Ajax behavior model, we can call e.set_cancel(true) to cancel the changing behavior after validation, so we can prevent the active tab changing before ActiveTabChanged called.
Unfortunately, it doesn't contain this event in tab.js. The only public client event is add_activeTabChanged. So what I wanna saying is Let's make an add_activeTabChanging client event in tab.js behavior.

1) Please open tab.js in VS.
2) Please append the following code in AjaxControlToolkit.TabContainer.prototype = {

///<extended for activeTabChanging>
add_activeTabChanging: function(handler) {
this.get_events().addHandler("activeTabChanging", handler);
},
remove_activeTabChanging: function(handler) {
this.get_events().removeHandler("activeTabChanging", handler);
},
raiseActiveTabChanging: function(eventArgs) {
var eh = this.get_events().getHandler("activeTabChanging");
if (eh) {
eh(this, eventArgs);
}

},


///</extended for activeTabChanging>

3) Please modify set_activeTabIndex method block (The blod font is new code we need to append):

set_activeTabIndex : function(value) {
if (!this.get_isInitialized()) {
this._cachedActiveTabIndex = value;
} else {
///<extended for activeTabChanging>
var eventArgs = new Sys.CancelEventArgs();
this.raiseActiveTabChanging(eventArgs);
if (eventArgs.get_cancel()) {
return false;
}
///</extended for activeTabChanging>
if (value < -1 value >= this.get_tabs().length) {
throw Error.argumentOutOfRange("value");
}
if (this._activeTabIndex != -1) {
this.get_tabs()[this._activeTabIndex]._set_active(false);
}
this._activeTabIndex = value;
if (this._activeTabIndex != -1) {
this.get_tabs()[this._activeTabIndex]._set_active(true);
}
if (this._loaded) {

this.raiseActiveTabChanged();
}
this.raisePropertyChanged("activeTabIndex");

}
return true;
},

4) Then we can use add_activeTabChanging client event now. As the same HTML sample, you can just call this event on client to cancel the process if it doesn't meet the validation.

<body>
    <form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />
    <ajaxToolkit:TabContainer runat="server" ID="TabContainer1">
        <ajaxToolkit:TabPanel runat="server" ID="TabPanel1" HeaderText="TabPanel1">
            <ContentTemplate>
                TabPanel1
                <input type="text" id="text1" />
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
        <ajaxToolkit:TabPanel runat="server" ID="TabPanel2" HeaderText="TabPanel2">
            <ContentTemplate>
                TabPanel2
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
    </ajaxToolkit:TabContainer>
    </form>
</body>

<script type="text/javascript">

    function pageLoad() {

        $find('TabContainer1').add_activeTabChanging(aa);

    }
    function aa(se, e) {

        if ($get('text1').value == "")
            e.set_cancel(true);
    }


</script>

new version of AjaxControlToolkit 3.0.30512 and new controls ColorPicker, ComboBox, HTML Editor

2009-05-20T02:42:00.003-04:00

Lately, AjaxControlToolkit 3.0.30512 is published. ColorPicker, Combobox and HTML Editor are three new controls appeared in this new version. I'm a support engineer for Microsoft product, especially for Asp.Net Ajax. I got many questions about these three new ajax controls, especially for HTML Editor. I'd like to talk about it with you guys here.

I checked the new version a little, and I found the behavior.js file is no longer composed by only one js file, but it is divided to release.js and debug.js file which is like the architecture of ASP.Net Ajax framework.

ColorPicker and Combobox are simple(I build an client-side ASP.Net combobox at one time. http://vincexu.blogspot.com/2008/11/build-combobox-in-aspnet.html ). But for HTML Editor, it is huge thing to make. It's a kind of WYSIWYG editor in the web page. There has been FCKEditor, TinyMCE, FreeTextBox,RadEditor and FreeRichTextEditor working for this. TinyMCE is the most popular component in it because it is free and easy to extend.

AjaxControlToolkit adopts the Editor by www.obout.com which is the website focuses on ASP.Net Ajax Controls. HTML Editor is a greate thing to work, but we have not enough documents to take as references in AjaxControlToolkit about this control. I got many questions about this control. For instance, how to insert an Image button into TopToolBar; how to override and assign a custom tooltip for one of button in TopToolBar; how about the client API we can use. Actually, we can't get valuable documents from AjaxControlToolkit, but we can access www.obout.com to check about it. However, in Ajaxcontroltoolkit HTML Editor, it has been changed somethings to match the behavior template, although it is coming from obout.com -- the method name is changed, property is changed and so on. So what we can do is checking the API or other documents in obout.com(http://www.obout.com/editor_new/index.aspx) and looking for the real method/property name in AjaxControlToolkit HTML Editor.debug.js.(The structure is same)

Also, I'll build the AjaxControlToolkit HTML Editor Client API documents or reference in my blog if some body want me to do.

LinkButton/Button embedded in a CollapsiblePanel Header - Click Events not fired.

2009-05-13T02:00:00.004-04:00

If a LinkButton is in Header of CollapsiblePanel, you will find the onClick of it will not be fired. To resolve this issue, we can set SuppressPostBack="false" for CollapsiblePanel. Then the onClick event will be fired fine. But the new problem is coming -- the CollapsiblePanel is still working, when you click the LinkButton, the onclick event is working and the CollapsiblePanel is still expended.

If we'd like to achieve the LinkButton firing without CollapsiblePanel expending, we have to call some JavaScript to cancel the CollapsiblePanel expending.

<head runat="server">
    <title></title>
    <script type="text/javascript">
        var togger = 0;
        function pageLoad() {
            $find('CollapsiblePanelBehavior1').add_expanding(function(obj, e) {
                if (togger == 1) {
                    e.set_cancel(true);
                    togger = 0;
                }
            });        
        }   
    </script>  
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />

     <asp:Panel ID="Panel1" runat="server" style="background-color:#EEEEEE;" Height="30px" > 
            <div style="padding:5px; cursor: pointer; vertical-align: middle;">
                <div style="float: left;">check</div>
                <div style="float: left; margin-left: 20px;">
                    <asp:Label ID="Label1_SelectData" runat="server">(Hide checking...)</asp:Label>
                </div>
                <div style="float: right; vertical-align: middle;">
                    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/expand_blue.jpg" AlternateText="(Show to search...)"/>
                    <asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="togger=1;" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>
                </div>
            </div>
       </asp:Panel>  
      <asp:Panel ID="Panel1Data" runat="server" style="background-color:#EEEEEE;" Height="30px"> 
            text1
       
    </asp:Panel> 
    <ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="Server" 
        TargetControlID="Panel1Data"
        ExpandControlID="Panel1"
        CollapseControlID="Panel1"  
        Collapsed="false"
        TextLabelID="Label1_SelectData"
        ImageControlID="ImageButton1"    
        ExpandedText="(Hide searching...)"
        CollapsedText="(Show to search...)"
        ExpandedImage="~/images/collapse_blue.jpg"
        CollapsedImage="~/images/expand_blue.jpg"
        SuppressPostBack="false"
        SkinID="CollapsiblePanelDemo" BehaviorID="CollapsiblePanelBehavior1" /> 
        
        
    </div>
    </form>
</body>

Dynamically create and remove TabPanel on client

2009-02-03T01:23:00.004-05:00

TabContainer provides some method to create/remove TabPanel on server-side. However, we want to achieve this on client and needn't to do postback to server.
For example, we can build a button on the page so that it can create a tabpanel on client-side when you click it. The data in this dynamic tabpanel can be static existing in the page, or can be recieved from web service by Ajax. Then we can create a closed-button in each tabpanel header.

The following code can help you to achieve creating TabPanel on client on the fly.

<script type="text/javascript">
    var i = 3;
    function createnew() {

        CreateNewTabPanel('TabContainer1', 'TabPanel' + i, 'TabPanel' + i, 'TabPanel' + i);
        i++;

     
    }

    function CreateNewTabPanel(tabContainerID, tabPanelID, headerText, bodyText) {
        //create header
        var header = document.createElement('span');
        header.id = "__tab_" + tabContainerID + tabPanelID;
        header.innerHTML = headerText;
        $get(tabContainerID + "_header").appendChild(header);

        //create content
        var body = document.createElement('div');
        body.id = tabContainerID + "_" + tabPanelID;
        body.style.display = "none";
        body.style.visibility = "hidden";
        body.innerHTML = bodyText;
        body.cssClass = "ajax__tab_panel";
        $get(tabContainerID + "_body").appendChild(body);


        $create(AjaxControlToolkit.TabPanel, { "headerTab": $get(header.id) }, null, { "owner": tabContainerID }, $get(body.id));


    }


</script>
<body>
    <form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />
<span id="mes"></span><br />
<span id="mes1"></span>
    <ajaxToolkit:TabContainer runat="server" ID="TabContainer1"   >
            <ajaxToolkit:TabPanel runat="server" ID="TabPanel1" HeaderText="TabPanel1">
                <HeaderTemplate>
                    TabPanel1
                </HeaderTemplate>
            <ContentTemplate>   
                TabPanel1      
            </ContentTemplate>
        </ajaxToolkit:TabPanel>  
                    <ajaxToolkit:TabPanel runat="server" ID="TabPanel2" HeaderText="TabPanel2">
            <ContentTemplate>   
                TabPanel2      
            </ContentTemplate>
        </ajaxToolkit:TabPanel>              
    </ajaxToolkit:TabContainer>

    <input type="button" onclick="createnew()" value="create a new pane" />

    </form>
</body>

To remove the related TabPanel on client dynamically, please check the code as below:

<script type="text/javascript">
    function removeAt(tabPanelClientID,index) {

        var activeTabPanel = $find('<%=TabContainer1.ClientID%>').get_tabs()[index];

        var tabContainerID = "<%=TabContainer1.ClientID %>";

        $get(tabContainerID + "_header").removeChild($get(tabPanelClientID+"_tab"));

        $get(tabContainerID + "_body").removeChild($get(tabPanelClientID));

        activeTabPanel.dispose();

        $find('<%=TabContainer1.ClientID%>').set_activeTabIndex(index+1);
    }


</script>

<body>
    <form id="form1" runat="server">
    <input type="image" style="height: 14px; width: 14px" onclick="removeAt(this.alt);return false;"
        alt="0" src="../../../effect/PopupDiv-roundCorner/images/close.gif" />
    <ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />
    <ajaxToolkit:TabContainer runat="server" ID="TabContainer1">
        <ajaxToolkit:TabPanel runat="server" ID="TabPanel1">
            <HeaderTemplate>
                headertext0
                <input type="image" style="height: 14px; width: 14px" onclick="removeAt('<%=TabPanel1.ClientID %>',0);return false;"
                    alt="0" src="../../../effect/PopupDiv-roundCorner/images/close.gif" />
            </HeaderTemplate>
            <ContentTemplate>
                TabPanel1
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
        <ajaxToolkit:TabPanel runat="server" ID="TabPanel2">
            <HeaderTemplate>
                headertext1
                <input type="image" style="height: 14px; width: 14px" onclick="removeAt('<%=TabPanel2.ClientID %>',1);return false;"
                    alt="1" src="../../../effect/PopupDiv-roundCorner/images/close.gif" />
            </HeaderTemplate>
            <ContentTemplate>
                TabPanel2
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
        <ajaxToolkit:TabPanel runat="server" ID="TabPanel3">
            <HeaderTemplate>
                headertext2
                <input type="image" style="height: 14px; width: 14px" onclick="removeAt('<%=TabPanel3.ClientID %>',2);return false;"
                    alt="2" src="../../../effect/PopupDiv-roundCorner/images/close.gif" />
            </HeaderTemplate>
            <ContentTemplate>
                TabPanel3
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
    </ajaxToolkit:TabContainer>
    </form>
</body>

Custom AutoComplete 5: Build an additional row on the top of AutoComplete List

2009-01-22T01:47:00.006-05:00

Before anything, please check this(http://www.globrix.com/):

We know we can customize AutoComplete. In this image, we can achieve the red background, Font style and seting some shining picture as the background. But one thing we need to notice is that there is an arrowhead on the top of row. So we have to make an additional row for it. And this row is not an item in the list; mouse event should be unavailable here.

Let code speak anything:

In this sample, you can define autocomplete_firstRow css style. In this case, you can define a background image in firstrow.

.autocomplete_firstrow
{
background-color:Red;
height:20px;


}

After you create an AutoComplete on the page, the below JavaScript will be worked of it. It will create an addition row on the top of AutoComplete. Suppose that the behaviorID of AutoComplete is "AutoCompleteEx".

<script type="text/javascript">


        function ClientPopulated() {
            var comletionList = $find("AutoCompleteEx").get_completionList();
            



            var firstrow=document.createElement("div");
            firstrow.id="firstrow";
            firstrow.className = "autocomplete_firstrow";

            comletionList.insertBefore(firstrow, comletionList.firstChild);
   



        }

        

        function pageLoad() {
            var autoc = $find("AutoCompleteEx");
//redefine highlightitem function
            autoc._highlightItem = function(item) {

                var children = autoc._completionListElement.childNodes;
                if (item === children[0])
                    return;

                for (var i = 0; i < children.length; i++) {
                    var child = children[i];
                    if (child._highlighted) {
                        if (autoc._completionListItemCssClass) {
                            Sys.UI.DomElement.removeCssClass(child, autoc._highlightedItemCssClass);
                            Sys.UI.DomElement.addCssClass(child, autoc._completionListItemCssClass);
                        } else {
                            if (Sys.Browser.agent === Sys.Browser.Safari) {
                                child.style.backgroundColor = 'white';
                                child.style.color = 'black';
                            } else {
                                child.style.backgroundColor = autoc._textBackground;
                                child.style.color = autoc._textColor;
                            }
                        }
                        autoc.raiseItemOut(new AjaxControlToolkit.AutoCompleteItemEventArgs(child, child.firstChild.nodeValue, child._value));
                    }
                }

                // Highlight the new item
                if (this._highlightedItemCssClass) {
                    Sys.UI.DomElement.removeCssClass(item, this._completionListItemCssClass);
                    Sys.UI.DomElement.addCssClass(item, this._highlightedItemCssClass);
                } else {
                    if (Sys.Browser.agent === Sys.Browser.Safari) {
                        item.style.backgroundColor = 'lemonchiffon';
                    } else {
                        item.style.backgroundColor = 'highlight';
                        item.style.color = 'highlighttext';
                    }

                }
                item._highlighted = true;

                this.raiseItemOver(new AjaxControlToolkit.AutoCompleteItemEventArgs(item, item.firstChild.nodeValue, item._value));


            };

//redefine settext function
            autoc._setText = function(item) {
            var children = autoc._completionListElement.childNodes;
                if (item === children[0])
                    return;
                var text = (item && item.firstChild) ? item.firstChild.nodeValue : null;

                autoc._timer.set_enabled(false);

                var element = autoc.get_element();
                var control = element.control;
                if (control && control.set_text) {
                    control.set_text(text);
                    $common.tryFireEvent(control, "change");
                }
                else {
                    element.value = text;
                    $common.tryFireEvent(element, "change");
                }
                autoc.raiseItemSelected(new AjaxControlToolkit.AutoCompleteItemEventArgs(item, text, item ? item._value : null));

                autoc._currentPrefix = autoc._currentCompletionWord();
                autoc._hideCompletionList();
            };

      }
        


    </script>

Custom AutoComplete 6: MultiColumn Autocomplete(Mutiple columns message for each Item)

2009-01-22T01:21:00.004-05:00

Hello all, I made "Mutiple rows message for each Item" several months ago. Now I'd like to build a MultiColumn Autocomplete. They applies same principle, so it's not a trouble if you checked previous post.

Here is the code in aspx:

<head runat="server">
    <title></title>
    <link href="../Default.css" rel="stylesheet" type="text/css" />
    <style>
    .cloumnspan
    {
        width:35px;
        padding:0px;
        border-color:Black;
        border-style:solid;
        border-width:1px;

    }
    
    </style>
</head>
<body>
    <form id="form1"  runat="server">
        <ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" />

           <asp:TextBox runat="server" ID="myTextBox" Width="300" autocomplete="off" />
            <ajaxToolkit:AutoCompleteExtender
                runat="server"  OnClientPopulated="dd" OnClientItemSelected="itemSelected"
                BehaviorID="AutoCompleteEx"
                ID="autoComplete1" 
                TargetControlID="myTextBox"
                ServicePath="AutoComplete.asmx" 
                ServiceMethod="GetCompletionList5"
                MinimumPrefixLength="2" 
                CompletionInterval="1000"
                EnableCaching="true" 
                CompletionSetCount="8"
                CompletionListCssClass="autocomplete_completionListElement" 
                CompletionListItemCssClass="autocomplete_listItem" 
                CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
                DelimiterCharacters=";, :">
            </ajaxToolkit:AutoCompleteExtender>

    </form>
    <script type="text/javascript">
function itemSelected(ev)
{
    var index=$find("AutoCompleteEx")._selectIndex;
    var value=$find("AutoCompleteEx").get_completionList().childNodes[index]._value;
    $find("AutoCompleteEx").get_element().value = value;
}
function dd()
{
    var comletionList=$find("AutoCompleteEx").get_completionList();
    for(i=0;i<comletionList.childNodes.length;i++) {
        var itemobj=new Object();
        var _data = comletionList.childNodes[i]._value;
        itemobj.name= _data.substring(_data.lastIndexOf('|') + 1); // parse name as item value
        comletionList.childNodes[i]._value = itemobj.name;
        _data = _data.substring(0, _data.lastIndexOf('|'));
        itemobj.age = _data.substring(_data.lastIndexOf('|') + 1);
        _data = _data.substring(0, _data.lastIndexOf('|'));
        itemobj.id = _data.substring(_data.lastIndexOf('|') + 1);


        comletionList.childNodes[i].innerHTML = "<div class='cloumnspan' style='width:10%;float:left'>" + itemobj.id + "</div>"
                                              + "<div class='cloumnspan' style='width:70%;float:left'>" + itemobj.name + "</div>"
                                              + "<div class='cloumnspan' style='width:18%;'>" + itemobj.age + "</div>";

    }
    
}



</script>
</body>

Web Method:

[WebMethod]
public string[] GetCompletionList5(string prefixText, int count)
{

    if (count == 0)
    {
        count = 10;
    }

    if (prefixText.Equals("xyz"))
    {
        return new string[0];
    }

    Random random = new Random();
    List<string> items = new List<string>(count);

    for (int i = 0; i < count; i++)
    {

        char c1 = (char)random.Next(65, 90);
        char c2 = (char)random.Next(97, 122);
        char c3 = (char)random.Next(97, 122);
        int id = i;
        int age = random.Next(18, 70);
        items.Add(id.ToString() + "|" + age.ToString() + "|" + prefixText + c1 + c2 + c3);
    }

    return items.ToArray();
}

If you want to add a header for MutiColumn table, you should add an additional row/div at the top of complete list. Please check this: http://vincexu.blogspot.com/2009/01/custom-autocomplete-5-build-additional.html

Create a Vertical Tab

2009-01-21T01:32:00.006-05:00

In this post, if you are familiar with Css Style and JavaScript, it should not be a difficult thing for you.

This time let's hit to create a Vertical Tab like the tab control in http://www.microsoft.com/. Have you seen the bottom tab content navigation in Microsoft home page http://www.microsoft.com/?

If you used TabContainer before, you must have thought it is really a vertical TabContainer. Now, we get to start from Zero, to create one by css and JavaScript.

See the line in the left section of image, it seems to be faded out and it's like a tail to the end. To achieve this, we have to prepare several images for it. The rest things are simple. (Just create some div in related sections)

Check the below code:

HTML:

<head runat="server">
    <title></title>
    <link href="AutoReport.css" rel="stylesheet" type="text/css" />

    <script src="AutoReport.js" type="text/javascript"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="divAdmin">
        <div id="divAdmin_Content">
            <div id="divAdmin_LeftMenu">
                <div id="li-toptail">
                </div>
                <div id="liManager_User" onmouseover="HighLight_Li('liManager_User','liAdd_User','divManager_User','divAdd_User');">
                    Member</div>
                <div id="liAdd_User" onmouseover="HighLight_Li('liAdd_User','liManager_User','divAdd_User','divManager_User');">
                    Add User</div>
                <div class="li">
                </div>
                <div class="li">
                </div>
                <div class="li">
                </div>
                <div class="li">
                </div>
                <div class="li">
                </div>
                <div id="li-bottomtail">
                </div>
            </div>
            <div id="divAdmin_RightView">
                <div id="divManager_User">this is panel1
                </div>
                <div id="divAdd_User">this is panel2
                </div>
            </div>
        </div>
    </div>
    </form>
</body>

AutoReport.css

body
{
    /*font-family: "Trebuchet MS", Verdana, Tahoma, sans-serif;*/
    font-family:Tahoma,Verdana,Segoe,sans-serif;
    font-size: 12px; 
    text-align: center;

    color: #666;

}
/*Admin*/
#divAdmin
{
    width: 550px;
}

#divAdmin_Header
{
    padding: 5px;
    background: url(Images/sprite.png) repeat-x 0px 0px;
    height: 22px;
    border: thin solid #D6D6C0;
    text-align: right;
    color: #666666;
}

#divAdmin_Content
{

}

#divAdmin_LeftMenu
{
    float:left;
    height: 350px;
    width: 86px;
    background-image: url('Images/leftmenu.png');
    
    border-left-width: thin;
    border-left-style: solid;
    border-left-color: #CFCFCF;
    border-bottom-style: solid;
    border-bottom-width: thin;
    border-bottom-color: #CFCFCF;
}

#divAdmin_RightView
{
    float: left;
    background-color: #EEEEEE;
    width: 460px;
    height: 350px;
    border-right-width: thin;
    border-right-style: solid;
    border-right-color: #CFCFCF;
    border-bottom-style: solid;
    border-bottom-width: thin;
    border-bottom-color: #CFCFCF;
}
.li
{
    height: 30px;
    width: 86px;
    background-image: url('Images/leftmenu-line.png') ;
}
#li-toptail
{
    background-image: url('Images/leftmenu-toptail.png') ;
    height: 30px;
    list-style-type:none;
    width: 86px;
    
}
#li-bottomtail
{
    background-image: url('Images/leftmenu-bottomtail.png') ;
    height: 30px;
    list-style-type:none;
    width: 86px;
    
}
#divManager_User
{
    padding-left:80px;
    display:block;
    text-align:left;
    padding-top: 5px;
}
#divAdd_User
{
    padding-left:80px;
    display:none;
    text-align:left;
    padding-top: 5px;
            
}
#liManager_User
{
    background-image: url('Images/leftmenu-litail.png') ;
    height: 30px;
    list-style-type:none;
    width: 86px;
}
#liAdd_User
{
    background-image: url(Images/leftmenu-line.png) ;
    height: 30px;
    list-style-type:none;
    width: 86px;
}

AutoReport.js

/*leftmenu onmouseover*/ 
function HighLight_Li(HighLight_Li,LowLight_Li,Display_div,Hidden_div)
{
    document.getElementById(HighLight_Li).style.backgroundImage='url(Images/leftmenu-litail.png)';
    document.getElementById(LowLight_Li).style.backgroundImage='url(Images/leftmenu-line.png)';
    document.getElementById(Display_div).style.display='block';
    document.getElementById(Hidden_div).style.display='none';
}

Several images need to download, and please put them in Image folder:
leftmenu-toptail.png

leftmenu-litail.png

leftmenu-line.png

leftmenu-bottomtail.png

leftmenu.png

sprite.png

Conditionally display ConfirmButtonExtender

2008-12-26T02:12:00.003-05:00

ConfirmButtonExtender is a nice way to build a kindly ModalPopup ConfirmPanel. Sometimes, we hope to show ConfirmButtonExtender only if it satisfies certain conditions, rather than it's popped out once we click the button.
For example, I have a RequiredFieldValidator Validation control on the page. ConfirmButtonExtender should not display even though I click the submit button untill I input something in the TextBox.

See the code:

<body>
    <form id="form1" runat="server">
        <ajaxToolkit:toolkitscriptmanager runat="Server" EnablePartialRendering="true" 
            ID="ScriptManager1" />
    
        <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>   
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>

        <asp:Button ID="Button" runat="server" Text="Click Me" OnClientClick="disableSubmit();return false;" OnClick="Button_Click" /><br />
        <br />
        Server Time Refresh: <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
        <asp:Button ID="HiddenButton" runat="server" Text="Hiddenbutton" style="display:none;" /><br />     
        <ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender2" runat="server" 
            TargetControlID="HiddenButton"
            OnClientCancel="cancelClick" BehaviorID="ConfirmButtonBehavior"
            DisplayModalPopupID="ModalPopupExtender1"  />
        <br />
        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
        TargetControlID="HiddenButton" 
        PopupControlID="PNL" 
        OkControlID="ButtonOk" 
        CancelControlID="ButtonCancel" BackgroundCssClass="modalBackground" 
        />
        <asp:Panel ID="PNL"  runat="server" style="display:none; width:200px; background-color:White; border-width:2px; border-color:Black; border-style:solid; padding:20px;">
            Are you sure you want to click the Button1?
            <br /><br />
            <div style="text-align:right;">
                <asp:Button ID="ButtonOk" runat="server" Text="OK" OnClientClick="onOkScript()" />
                <asp:Button ID="ButtonCancel" runat="server" Text="Cancel" />
            </div>
        </asp:Panel>
    </form>
</body>
<script type="text/javascript">

function disableSubmit()
{
    if (typeof(Page_ClientValidate)=='function')
    {
        if (Page_ClientValidate() == true)
        {
            return checkSubmit();
        }
        else
        {
            return true;
        }
    }
    else
    {
        return checkSubmit();
    }
}

function checkSubmit() {

    var confirmButton = $find('ConfirmButtonBehavior');
    
    confirmButton._displayConfirmDialog();

}
function onOkScript() {
    var confirmButton = $find('ConfirmButtonBehavior');
    confirmButton._postBackScript = "__doPostBack(\u0027Button\u0027,\u0027\u0027)"; //reset bind onto Button

}
</script>

protected void Button_Click(object sender, EventArgs e)
{
    Label1.Text = "You clicked the " + ((Control)sender).ID + " at " + DateTime.Now.ToLongTimeString() + ".";
}

Custom AutoComplete 4: Build an UpdateProgress for AutoComplete

2008-12-25T01:52:00.004-05:00

I have introduced some kinds of Custom AutoComplete. Again, there is an another one -- Build an UpdateProgress for AutoComplete.

Check the code directly:

<head runat="server">
    <title>Untitled Page</title>
    <style>
        .autocomplete_completionListElement
        {
            visibility: hidden;
            margin: 0px !important;
            background-color: inherit;
            color: windowtext;
            border: buttonshadow;
            border-width: 1px;
            border-style: solid;
            cursor: 'default';
            overflow: auto;
            height: 200px;
            text-align: left;
            list-style-type: none;
            font-family: courier new;
            font-size: 8pt;
        }
        /* AutoComplete highlighted item */.autocomplete_highlightedListItem
        {
            background-color: #e3ec6e;
            color: black;
            padding: 1px;
        }
        /* AutoComplete item */.autocomplete_listItem
        {
            background-color: window;
            color: windowtext;
            padding: 1px;
        }
        body, div, p, h1, h2, h3, h4, ul, li, table
        {
            margin: 0;
            padding: 0;
            border: none;
        }
    </style>
</head>

<script type="text/javascript">
    function pageLoad() {
        $find('autocomplteextender1').add_populated(shownev); //if no result, this event will not be triggered and "loading" can't be hidden. But if result is exist, hiding event will be triggered when the user selects value to hide popuplist.So we need populated event to hide "loading" when the result is not empty.

        $find('autocomplteextender1').add_populating(populatingev);
        $find('autocomplteextender1').add_hiding(onhiding); // no matter the result is empty or not, hiding event will be triggered. If the result is empty, it will trigger hiding event after response returned. If the result is exist, hiding event will be triggered after user selected value to hide popuplist.
    }
    function onhiding() {

        var updateProgress = $get('<%= UpdateProgress2.ClientID %>');
        var dynamicLayout = '<%= UpdateProgress2.DynamicLayout.ToString().ToLower() %>';

        if (dynamicLayout) {
            updateProgress.style.display = "none";
        }
        else {
            updateProgress.style.visibility = "hidden";
        }
    }
    function shownev() {
        var updateProgress = $get('<%= UpdateProgress2.ClientID %>');
        var dynamicLayout = '<%= UpdateProgress2.DynamicLayout.ToString().ToLower() %>';

        if (dynamicLayout) {
            updateProgress.style.display = "none";
        }
        else {
            updateProgress.style.visibility = "hidden";
        }

    }
    function populatingev() {
        var updateProgress = $get('<%= UpdateProgress2.ClientID %>');
        var dynamicLayout = '<%= UpdateProgress2.DynamicLayout.ToString().ToLower() %>';

        if (dynamicLayout) {
            updateProgress.style.display = "block";
        }
        else {
            updateProgress.style.visibility = "visible";
        }


    }

</script>

<body>
    <form id="form2" runat="server">
    <asp:ScriptManager ID="ScriptManager2" runat="server" />
    <asp:UpdateProgress ID="UpdateProgress2" runat="server">
        <ProgressTemplate>
            loading...
        </ProgressTemplate>
    </asp:UpdateProgress>    
    <asp:TextBox ID="TextBox1" runat="server" Width="437px"></asp:TextBox>
    <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" BehaviorID="autocomplteextender1"
        MinimumPrefixLength="1" ServicePath="AutoComplete.asmx" ServiceMethod="GetCompletionList1"
        TargetControlID="TextBox1" CompletionListCssClass="autocomplete_completionListElement"
        CompletionListItemCssClass="autocomplete_listItem" CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
        CompletionInterval="1000" DelimiterCharacters=";" CompletionSetCount="10" FirstRowSelected="true"
        EnableCaching="true" Enabled="true">
    </cc1:AutoCompleteExtender>

    </form>
</body>