Evjen c20.tex V2 - 01/28/2008 3:13pm Page 968 Chapter 20: ASP.NET AJAX Control Toolkit You form a group of CheckBox controls by using the Key property. All the check boxes that you want in one group need to have the same Key value. In the example is Listing 20-20, all the check boxes share a Key value of MyCheckboxes . Running this page, results in a list of four check boxes. When you select one of the check boxes, a check mark appears. Then, when you select another check box, first checkbox you selected gets deselected. The best part is that you can even deselect what you have selected in the group, thereby selecting nothing in the check box group. NumericUpDownExtender The NumericUpDownExtender control allows you to put some up/down indicators next to a TextBox control that enable the end user to more easily control a selection. A simple example of this is illustrated here in Listing 20-21. Listing 20-21: Using the NumericUpDownExtender control < %@ Page Language="C#" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > NumericUpDownExtender Control < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < cc1:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server" TargetControlID="TextBox1" Width="150" Maximum="10" Minimum="1" > < /cc1:NumericUpDownExtender > < asp:TextBox ID="TextBox1" runat="server" >< /asp:TextBox > < /div > < /form > < /body > < /html > The NumericUpDownExtender control here extends the TextBox control on the page. When using the NumericUpDownExtender control, you have to specify the width of the control with the Width property. Otherwise, you will see only the up and down arrow keys and not the text box area. In this case, the Width property is set to 150 (pixels). The Maximum and Minimum properties provide the range used by the up and down indicators. With a Maximum value setting of 10 and a Minimum value of 1 , the only range in the control will be 1 through 10. Running this page produces the results shown in Figure 20-29. 968 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 969 Chapter 20: ASP.NET AJAX Control Toolkit Figure 20-29 In addition to numbers as is shown with Listing 20-21, you can also use text as is illustrated here in Listing 20-22. Listing 20-22: Using characters instead of numbers with NumericUpDownExtender < cc1:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server" TargetControlID="TextBox1" Width="150" RefValues="Blue;Brown;Green;Orange;Black;White" > < /cc1:NumericUpDownExtender > In this case, the words are defined within the RefValues property (all separated with a semicolon). This gives you the results presented in Figure 20-30. Figure 20-30 PagingBulletedListExtender The PagingBulletedListExtender control allows you to take long bulleted lists and easily apply alphabetic paging to the list. For an example of this, Listing 20-23 will work off of the Customers table within the Northwind database. Listing 20-23: Paging a bulleted list from the Northwind database < %@ Page Language="C#" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > PagingBulletedListExtender Control < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < cc1:PagingBulletedListExtender ID="PagingBulletedListExtender1" runat="server" TargetControlID="BulletedList1" > < /cc1:PagingBulletedListExtender > < asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=. \ SQLEXPRESS; Continued 969 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 970 Chapter 20: ASP.NET AJAX Control Toolkit AttachDbFilename=|DataDirectory| \ NORTHWND.MDF; Integrated Security=True;User Instance=True" ProviderName="System.Data.SqlClient" SelectCommand="SELECT [CompanyName] FROM [Customers]" > < /asp:SqlDataSource > < asp:BulletedList ID="BulletedList1" runat="server" DataSourceID="SqlDataSource1" DataTextField="CompanyName" DataValueField="CompanyName" > < /asp:BulletedList > < /div > < /form > < /body > < /html > This code pulls all the CompanyName values from the Customers table of the Northwind database and binds those values to the BulletList control on the page. Running this page gives you the results illus- trated in Figure 20-31. Figure 20-31 From this figure, you can see that the paging is organized alphabetically on the client side. Only the letters for which there are values appear in the linked list of letters. Clicking any of the letters gives you the items from the bulleted list that start with that character. PopupControlExtender The PopupControlExtender control allows you to create a popup for any control on your page. For instance, you can completely mimic the CalendarExtender control that was presented earlier by creating a popup containing a Calendar control off a TextBox control. Listing 20-24 mimics this behavior. 970 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 971 Chapter 20: ASP.NET AJAX Control Toolkit Listing 20-24: Creating a C alendarExtender control with PopupControlExtender VB < %@ Page Language="VB" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < script runat="server" > Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, _ ByVal e As System.EventArgs) PopupControlExtender1.Commit(Calendar1.SelectedDate.ToShortDateString()) End Sub < /script > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > PopupControlExtender Control < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < cc1:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="TextBox1" PopupControlID="UpdatePanel1" OffsetY="25" > < /cc1:PopupControlExtender > < asp:TextBox ID="TextBox1" runat="server" >< /asp:TextBox > < asp:UpdatePanel ID="UpdatePanel1" runat="server" > < ContentTemplate > < asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="White" BorderWidth="1px" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="190px" NextPrevFormat="FullMonth" Width="350px" OnSelectionChanged="Calendar1_SelectionChanged" > < SelectedDayStyle BackColor="#333399" ForeColor="White" / > < TodayDayStyle BackColor="#CCCCCC" / > < OtherMonthDayStyle ForeColor="#999999" / > < NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" VerticalAlign="Bottom" / > < DayHeaderStyle Font-Bold="True" Font-Size="8pt" / > < TitleStyle BackColor="White" BorderColor="Black" BorderWidth="4px" Font-Bold="True" Font-Size="12pt" ForeColor="#333399" / > < /asp:Calendar > < /ContentTemplate > < /asp:UpdatePanel > < /div > < /form > < /body > < /html > Continued 971 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 972 Chapter 20: ASP.NET AJAX Control Toolkit C# < %@ Page Language="C#" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < script runat="server" > protected void Calendar1_SelectionChanged(object sender, EventArgs e) { PopupControlExtender1.Commit(Calendar1.SelectedDate.ToShortDateString()); } < /script > When running this page, you get a single text box on the page. Click within the text box and a pop-up calendar appears so you can select a date that will be populated back into the text box (as illustrated in Figure 20-32). Figure 20-32 You will want to place your popup control within an ASP.NET AJAX UpdatePanel control and to pass the value from the popup control back to the target control (the TextBox1 control), so you use the Commit() method: PopupControlExtender1.Commit(Calendar1.SelectedDate.ToShortDateString()) ResizableControlExtender The ResizableControlExtender control allows you to take a Panel control and give end users the ability to grab a handle and change the size of the element (smaller or bigger). Anything you put inside the Panel 972 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 973 Chapter 20: ASP.NET AJAX Control Toolkit control will then change in size depending on how the end user extends the item. For this to work, you have to create a handle for the e nd user to use. Listing 20-25 shows you how t o use ResizableControl- Extender with an image. Listing 20-25: Using the ResizableControlExtender control with an image < %@ Page Language="C#" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > ResizableControlExtender Control < /title > < style type="text/css" > .handle { width:10px; height:10px; background-color:Black; } .resizable { border-style:solid; border-width:2px; border-color:Black; } < /style > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < cc1:ResizableControlExtender ID="ResizableControlExtender1" runat="server" TargetControlID="Panel1" HandleCssClass="handle" ResizableCssClass="resizable" > < /cc1:ResizableControlExtender > < asp:Panel ID="Panel1" runat="server" Width="300" Height="225" > < asp:Image ID="Image1" runat="server" ImageUrl="Images/Garden.jpg" style="width:100%; height:100%"/ > < /asp:Panel > < /div > < /form > < /body > < /html > In this example, the ResizableControlExtender control depends upon CSS to create the handle for the endusertograbtoresizethe Panel control. The TargetControlID property points to the control to be resized. There are two CSS references in the ResizableContro lExtender control. One deals with the control as it sits on the screen with no end user interaction. This is really to show the end user that there is an ability 973 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 974 Chapter 20: ASP.NET AJAX Control Toolkit to resize the element. This is done through the HandleCssClass property. The value o f t his property points to the CSS class handle contained within the same file. The second CSS reference deals with the control as it is clicked and held (when the end user does not let up with the mouse click performed). This one is done with the ResizableCssClass property. The value of this property points t o the CSS class resizable . When compiled and run, the code should generate the same page presented in Figure 20-33. Figure 20-33 You can see in the top screenshot how the image looks when there is no end user interaction. In this case, there is a black square (as defined by the CSS) in the lower-right corner of the image. The screenshot on the bottom shows what happens when the end user grabs the handle and starts changing the shape of the image. 974 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 975 Chapter 20: ASP.NET AJAX Control Toolkit RoundedCornersExtender The RoundedCornersExtender control allows you to put rounded corners on the elements on your page. As with the ResizableControlExtender control, you put the element you are interested in working with inside of a Panel control. Listing 20-26 shows this done with a Login server control. Listing 20-26: Rounding the c orners of the Panel control containing a Login server control < %@ Page Language="C#" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > RoundedCornersExtender Control < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < cc1:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="Panel1" > < /cc1:RoundedCornersExtender > < asp:Panel ID="Panel1" runat="server" Width="250px" HorizontalAlign="Center" BackColor="Orange" > < asp:Login ID="Login1" runat="server" > < /asp:Login > < /asp:Panel > < /div > < /form > < /body > < /html > Here, the RoundedCornersExtender control simply points to the Panel control with the Target- ControlID property. This Panel control has a background color of orange to show that the corners are indeed rounded. The result of this bit of code is illustrated in Figure 20-34. Figure 20-34 You can control the degree of the rounded corners using the Radius property of the RoundedCorner- sExtender control. By default, this property is set to a value of 5 . You can even go as far as choosing the 975 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 976 Chapter 20: ASP.NET AJAX Control Toolkit corners that you want to round using the Corners property. The possible values of the Corners property include All , Bottom , BottomLeft , BottomRight , Left , None , Right , Top , TopLeft ,and TopRight . SliderExtender The SliderExtender control actually extends a TextBox control to make it look like nothing it normally does. This ASP.NET AJAX control gives you the ability to create a true slider control that allows the end user to select a range of numbers using a mouse instead typing in the number. Listing 20-27 shows a simple example of using the slider. Listing 20-27: Using the SliderExtender c ontrol < %@ Page Language="C#" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > SliderExtender Control < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < cc1:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="TextBox1" > < /cc1:SliderExtender > < asp:TextBox ID="TextBox1" runat="server" >< /asp:TextBox > < /div > < /form > < /body > < /html > This little bit of code to tie a SliderExtender control to a typical TextBox control is simple a nd produces the result presented in Figure 20-35. Figure 20-35 This is fine, but it is hard for the end users to tell what number they are selecting. Therefore, you might find it better to give a signifier to the end user. Adding a Label control to the page (called Label1 )and changing the SliderExtender control to include a BoundControlID property gives you this result. The code for this change is presented here: < cc1:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="TextBox1" BoundControlID="Label1" > < /cc1:SliderExtender > 976 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 977 Chapter 20: ASP.NET AJAX Control Toolkit This small change produces see the result (with the appropriate Label control on the page) shown in Figure 20-36. Figure 20-36 Now when the end users slide the handle on the slider, they see the number that they are working with quite easily. Some of the following properties are available to the SliderExtender control. ❑ Decimal — Allows you to specify the number of decimals the result should take. The more decimals you have, the more unlikely the end user will be able to pick an exact number. ❑ HandleCssClass — The CSS class that you are using the design the handle. ❑ HandleImageUrl — The image file you are using to represent the handle. ❑ Length — The length of the slider in pixels. The default value is 150 . ❑ Maximum — The maximum number represented in the slider. The default value is 100 . ❑ Minimum — The minimum number represented in the slider. The default value is 0 . ❑ Orientation — The orientation of the slider. The possible values include Horizontal and Vertical . The default value is Horizontal . ❑ RailCssClass — The CSS class that you are using to design the rail of the slider. ❑ ToolTipText — The ToolTip when the end user hovers over the slider. Using 0 within the text provides the means show the end user the position the slider is currently in. SlideShowExtender The SlideShowExtender control allows you to put an image slideshow in the browser. The slideshow controls allow the end user to move to the next or previous images as well as simply play the images as a slideshow with a defined wait between each image. Listing 20-28 shows an example of creating a slideshow. Listing 20-28: Creating a slideshow with three images .ASPX < %@ Page Language="VB" AutoEventWireup="true" CodeFile="SlideShowExtender.aspx.vb" Inherits="SlideShowExtender" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > Continued 977 . are interested in working with inside of a Panel control. Listing 20-26 shows this done with a Login server control. Listing 20-26: Rounding the c orners of the Panel control containing a Login. this, Listing 20- 23 will work off of the Customers table within the Northwind database. Listing 20- 23: Paging a bulleted list from the Northwind database < %@ Page Language=" ;C#& quot; % > < %@. or bigger). Anything you put inside the Panel 972 Evjen c20.tex V2 - 01/28/2008 3: 13pm Page 9 73 Chapter 20: ASP. NET AJAX Control Toolkit control will then change in size depending on how the end