Download source - 1,003.68 KB

Introduction

Microsoft has released 3 new controls in their latest release of the AjaxControlToolkit. This release can be downloaded from here.

The new controls are:

HTMLEditor control
ComboBox control
ColorPicker control

The best thing about these controls is their level of customization. Documentation is included in the sample website provided by Microsoft, but I will briefly touch on what you can do to customize each of these controls.

Background

1. HTMLEditor Control

This control gives you the ability to add HTML formatting to a control, and allows a good deal of customization for that control.

In order to create your own customized instance of the control, you must first create a new class in your App_Code folder, and override the FillTopToolbar and FillBottomToolbar methods. By doing this, you can allow the user to be able to use only certain functionality, which is nice if you simply want the user to have basic control over formatting. The details are included in the download under App_Code/MyEditor.vb. However, in order to override those items, you must include the following in your class.

Protected Overloads Overrides Sub FillTopToolbar()
End Sub 
Protected Overloads Overrides Sub FillBottomToolbar()
End Sub

Once this is complete, you then register your namespace in the page you wish to add the control to:

<%@ Register Namespace="MyAjaxControls" TagPrefix="asp" ValidateRequest="false" %>

and call it from the class.

You can also modify the appearance by using CSS. The following attributes can be modified:

.ajax__htmleditor_editor_toptoolbar 
.ajax__htmleditor_editor_editpanel
.ajax__htmleditor_editor_bottomtoolbar
.ajax__htmleditor_editor_container
.ajax__htmleditor_toolbar_button
.ajax__htmleditor_toolbar_button_hover

In the example provided, I simply added a class where the Top Toolbar doesn't include Links, and the Bottom Toolbar only includes the Design View. You can choose to include nothing on the bottom toolbar, which I think is Ideal in most situations for end users. A quick example would be to use this in a Content Management System or perhaps in a Contact Form. One quick warning is that with any control that allows using HTML Tags, security can become an issue rather quickly, and you must include "ValidateRequest = False" at the top of your page in order to allow HTML Tags. If you were to include a Contact Us Page, perhaps it would look like:

<%@ Page Language="VB" ValidateRequest="false" %>

<script runat="server">
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) 
'(1) Create the MailMessage instance (From, To) 
Dim strBody As String 
Dim mm As New MailMessage(txtEmail.Text, EMAIL@Email.com )

strBody = editor1.Content.ToString

(2) Assign the MailMessage's properties 
mm.Subject = "Message from Us" 
mm.Body = strBody
mm.IsBodyHtml = True 
'(3) Create the SmtpClient object 
Dim smtp As New SmtpClient
'(4) Send the MailMessage (will use the Web.config settings) 
smtp.Send(mm)
End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:MyEditor ID="editor1" runat="server" CssClass="MyEditorStyle" />
<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" />
</div>
</form>
</body>
</html>

Again, full documentation is included in the sample site from Microsoft.

2. Color Picker Control

This control is put into place to allow you to have a control which can offer an Extender with a choice of colors to choose from. There is a slight level of customization, but for the most part, all you need to do is drop the control on the page, and when the TargetControlID for a Textbox is specified, then anytime you click on the targetcontrol, it will display the Extender giving you a choice of colors to choose from. This can be very effective if you wish to customize your site.

If you so choose, a PopupButton control and a SampleControl can be provided which allows customizing ColorPicker's behavior.

One example of where this may come into play is if you have a panel that you wish to allow customization for. By using ASP.NET Profiles, you would change your web.config to look similar to:

<profile enabled="true" defaultProvider="AspNetSqlProfileProvider">
<properties>
<add name="Color" allowAnonymous="true" defaultValue="White"/>
</properties>
</profile>

Next, you would create a panel with an instance of the Color Picker Control used to trigger a change in the user's value for that Panel. For example, if we were to use the sample provided in this article, it would look like this:

<%@ Page Title="" Language="VB" MasterPageFile="~/Master.master" %>
<script runat="server">

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
ColorChoosePanel.Style.Add("background-color", Profile.Color)
End Sub

Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
If MyColor.Text.ToString <> "" Then
Profile.Color = MyColor.Text.ToString
LabelError.Text = ""
Else
LabelError.Text = "* Please select a Background Color!"
End If
End Sub
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:Panel ID="ColorChoosePanel" runat="server" Width="70%">
<table>
<tr>
<td colspan="2">
<asp:Label ID="LabelError" runat="server" Font-Bold="true" />
</td>
</tr>
<tr>
<td>Select a Background Color: </td>
<td>
<asp:TextBox ID="MyColor" runat="server" />
<aspAjax:ColorPickerExtender ID="buttonCPE" runat="server" TargetControlID="MyColor" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:LinkButton ID="LinkButton1" runat="server" Font-Italic="true" 
	OnClick="LinkButton1_Click">Click to Set Panel Color</asp:LinkButton>
</td>
</tr>
</table>
</asp:Panel>
</asp:Content>

This is a fairly generic example, but you can see how it could be useful in other scenarios as well.

3. ComboBox Control

This may be the best of the 3 controls. It takes the standard dropdownlist control, and allows a number of customization choices which make the control much more effective. It allows AutoComplete if chosen, Auto Append if chosen, plus a choice of 3 levels of customization for the appearance. If that's not enough, you can also specify the styles by using the following:

.ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
.ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
.ajax__combobox_itemlist

It can be used basically where any dropdownlist control is used, but with the advantage of including a Themed look as well as autocomplete and autofill functionality. One disadvantage that I've found is that it only includes two server side events, ItemInserting and ItemInserted.

The sample provided includes the ability to use this for a US State filled dropdownlist. This makes it much easier to use than the traditional dropdownbox as if I want to find Indiana, e.g., I simply click IN and it's selected, where before I know I always clicked "I", then hit the arrow key to find IN. This saves a few seconds, and if you are used to Data Entry, this can be a very valuable thing, particularly if you are trying to find items that are more than two or 3 characters long.

The best example I could give would be to use a list of many names or addresses. Using the traditional dropdownlist, this could be quite a chore to scroll down and find the item. Here, you simply type until you find the exact item, saving some valuable time.

Points of Interest

This article was brief, but hopefully the sample website will save you some time in trying to customize these controls. For further explanation, http://www.asp.net offers video tutorials over all of these that are very well done.

History

29^th June, 2009: Added some examples of how these controls can be used

How to Customize the New AjaxControlToolkit Tools