skip to main |
skip to sidebar
You can make textboxes have a snazzy look by utilizing background colors or background images. Below are some examples:
Example 1: Textbox with a background image.
1. Create your image in Photoshop or another image manipulating program. Make sure to size the image to be large enough to fill the textbox. If you have different size text boxes, make the size fit the largest text box. Also, you only need to make the image 1 pixel wide as we will be repeating the image. Below is the code:
.textbox_search
{
background: transparent url('images/tbgradient.gif') repeat-x;
height: 15px;
border-style: solid; border-width: 1px;
border-color: #d3e4f0;
padding-left: 3px;
}
Example 2: Textbox with a background image border.
You can also use a background image as a border for a textbox. The only problem with this scenario is the image border must be the same size as the text box. One possible solution to have a specialty border that will fit any textbox is to create the specialty border for two sides only. For instance, create the special border to fit the left and top of the textbox and then just use a CSS border for the right and bottom of the text box. This way the textbox can be any size. You still need to make the specialty border big enough to accomade the largest textbox. Here is an example:
.textbox
{
font-size: .8em;
font-family: calibri, Arial, Sans-Serif;
background: transparent url('images/textbox_bg.jpg') no-repeat;
color: #747862;
height:13px;
border-top: 0px;
border-left: 0px;
border-bottom: solide 1px #c8cbb8;
border-right: solid 1px #c8cbb8;
padding:1px 8px;
margin-top: 0px;
margin-bottom:0px;
}
Example 3: Textbox with image
Lastly, another neat trick is to place an image in the background to help facilitate the textbox meaning. For instance, you can place a magnifying glass icon in a textbox to alert the user this is a textbox for performing a search. Below is an example:
.textbox_image
{
background:#FFFFFF url(images/search.png) no-repeat 4px 4px;
padding:4px 4px 4px 22px;
border:1px solid #CCCCCC;
width:230px;
height:18px;
}
While the .NET Calendar control is very handy right out of the box, you may find yourself wanting for more. By default the calendar control does allow you to select a date or select a whole week. But what happens if you want to select random dates?
The code below shows how to do this:
1. Create the calendar control.
<asp:Calendar ID="calRunDate" runat="server" OnDayRender="calRunDate_DayRender" CssClass="myCalendar" DayNameFormat="FirstTwoLetters" ShowGridLines="true" CellPadding="1" TitleStyle-BackColor="Transparent" OtherMonthDayStyle-BackColor="white" OtherMonthDayStyle-ForeColor="gray" PrevMonthText=" <img src='images/caltriangleleft.gif' border='0'>" NextMonthText="<img src='images/caltriangleright.gif' border='0'> " TitleStyle-CssClass="calTitleStyle" OtherMonthDayStyle-CssClass="calOtherMonthDayStyle" NextPrevStyle-CssClass="calNextPrevStyle" DayHeaderStyle-CssClass="calDayHeaderStyle" TodayDayStyle-CssClass="calTodayDayStyle" SelectorStyle-CssClass="calSelectorStyle" WeekendDayStyle-CssClass="calWeekendDayStyle" SelectedDayStyle-CssClass="calSelectedDayStyle" DayStyle-CssClass="calDayStyle"></asp:Calendar>
<div style="padding-top: 5px; text-align: center; width: 180px;">
<asp:Button ID="btnClearDates" runat="server" Text="Clear Selection" CssClass="button"></asp:Button>
</div>
2. Create a global list variable to hold the selected dates.
Public Shared g_list As New List(Of DateTime)() 'List used for holding multiple date selections
3. Check to see if a date is selected and save it to the list/session.
Protected Sub calRunDate_DayRender(ByVal sender As Object, ByVal e As DayRenderEventArgs) Handles calRunDate.DayRender
'Check to see if a day has been selected
If e.Day.IsSelected = True Then
'If so add it to the global list variable
g_list.Add(e.Day.[Date])
End If
'Save the list to a session variable
Session("SelectedDates") = g_list
End Sub
4. Check to see if user has selected/deselected a date.
Protected Sub calRunDate_SelectionChanged(ByVal sender As Object, ByVal e As EventArgs) Handles calRunDate.SelectionChanged
'Let's grab the date the user selected
'This will be needed to determine if they are unselecting a date
'see below
Dim mydate As Date
mydate = calRunDate.SelectedDate
'Check to see if the session variable exists
If Session("SelectedDates") IsNot Nothing Then
'If so, assign the session variable to a new list variable
Dim newList As List(Of DateTime) = DirectCast(Session("SelectedDates"), List(Of DateTime))
'loop through the list
For Each dt As DateTime In newList
'Check to see if the date in the list is equal to the date
'they selected. If so, then they are deselecting this date
If CType(dt, Date) = mydate Then
'Remove the date from the selected dates
calRunDate.SelectedDates.Remove(dt)
Else
'Add the date the selected dates on the calendar
calRunDate.SelectedDates.Add(dt)
End If
Next
'Clear the list
g_list.Clear()
End If
End Sub
5. Grab the dates the user selected.
Via a button or some other object, run this code to get all of the dates the user selected.
'Create a date variable to be used for looping through
'the selected dates on the calendar
'Dim item As Date
'loop through the selected dates on the calendar
'For Each item In calRunDate.SelectedDates
'Add the dates to a text box.
'Use commas between them
txtRunDate.Text = txtRunDate.Text & ", " & item.Date
'Next
6. Clear all selected dates.
You can also clear all of the selected dates by using the following code:
Protected Sub btnClearDates_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnClearDates.Click
'Clear the selected dates on the calendar
calRunDate.SelectedDates.Clear()
'Clear the session variable of any dates
Session("SelectedDates") = Nothing
'Clear the global list variable
g_list.Clear()
End Sub
The .NET calendar control is handy way to display a functional calendar. However, the styling of the control out of the box is pretty generic.
One way to spruce things up is to enable a mouse over as the user is browsing the dates.
Below is the code I used to do this. This code should be placed in the DayRender sub of the calendar control:
'Create colors for the mouse over and out
Dim onmouseoverStyle As String = "this.style.backgroundColor='#A8C0D0';"
Dim onmouseoutStyle As String = "this.style.backgroundColor='@BackColor'"
'create a variable to hold the row back color
Dim rowBackColor As String = String.Empty
'Add the attributes to the individual calendar day cells
e.Cell.Attributes.Add("onmouseover", onmouseoverStyle)
e.Cell.Attributes.Add("onmouseout", onmouseoutStyle.Replace("@BackColor", rowBackColor))
The AJAX Calendar control is a nifty control that attaches to a .NET control (i.e. textbox). The calendar is launched by clicking in the text box. Once the calendar is displayed, a user can browse through the years and months and select a date. The date is then placed in the calling text box or .NET control.
The styling of this control is fairly generic. Below is the code to style an AJAX calendar control
For the control properties, I am using this:
<cc1:CalendarExtender ID="ceChangeCopy" runat="server" TargetControlID="txtChangeCopy" Format="MM/dd/yyyy" CssClass="AJAXCalendar" />
For the CSS code, I am using this:
.AJAXCalendar .ajax__calendar_container {border:solid 1px #CDCDB5; background: transparent url(images/calendarbg.gif) repeat-x; width: 180px; z-index : 1000 ;}
.AJAXCalendar .ajax__calendar_footer {border-top:1px solid silver;}
.AJAXCalendar .ajax__calendar_dayname { font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100; border-bottom:1px solid #f5f5f5; }
.AJAXCalendar .ajax__calendar_day {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: bold;border:1px solid #ffffff;}
.AJAXCalendar .ajax__calendar_month {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;border:1px solid #ffffff;}
.AJAXCalendar .ajax__calendar_year {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;border:1px solid #ffffff;}
.AJAXCalendar .ajax__calendar_today {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;}
.AJAXCalendar .ajax__calendar_title {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;}
.AJAXCalendar .ajax__calendar_active .ajax__calendar_day {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;background-color:#d9e8f1;border-color:#0066cc;color:#0066cc;}
.AJAXCalendar .ajax__calendar_active .ajax__calendar_month {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;background-color:#d9e8f1;border-color:#0066cc;color:#0066cc;}
.AJAXCalendar .ajax__calendar_active .ajax__calendar_year {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;background-color:#d9e8f1;border-color:#0066cc;color:#0066cc;}
.AJAXCalendar .ajax__calendar_other .ajax__calendar_day {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;background-color:#ffffff;border-color:#ffffff;color:gray;}
.AJAXCalendar .ajax__calendar_other .ajax__calendar_year {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;background-color:#ffffff;border-color:#ffffff;color:gray;}
.AJAXCalendar .ajax__calendar_hover .ajax__calendar_day {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;background-color:#d9e8f1;border-color:#daf2fc;}
.AJAXCalendar .ajax__calendar_hover .ajax__calendar_month {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;background-color:#d9e8f1;border-color:#daf2fc;color:#0066cc;}
.AJAXCalendar .ajax__calendar_hover .ajax__calendar_year {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;background-color:#d9e8f1;border-color:#daf2fc;color:#0066cc;}
.AJAXCalendar .ajax__calendar { position: relative; left: 0px !important; top: 0px !important; visibility: visible; display: block; }
.AJAXCalendar .ajax__calendar iframe { left: 0px !important; top: 0px !important; }
ASP.NET comes with a very handy calendar control. This control will allow a user to click on a calendar icon and view a calendar. They can browse the different years and months and select a date. Once a date has been selected, it is displayed in the .NET control wired to the calendar control.
While this calendar control is very handy, the default styling is very generic. Below is my attempt at styling the calendar. I have found the control to be very finicky with using CSS. So, therefore, I am using a combination of control properties and CSS.
For the control properties, I am using this:
<asp:Calendar ID="calRunDate" runat="server" OnDayRender="calRunDate_DayRender" CssClass="myCalendar" DayNameFormat="FirstTwoLetters" ShowGridLines="true" CellPadding="1" TitleStyle-BackColor="Transparent" OtherMonthDayStyle-BackColor="white" OtherMonthDayStyle-ForeColor="gray" PrevMonthText=" <img src='images/caltriangleleft.gif' border='0'>" NextMonthText="<img src='images/caltriangleright.gif' border='0'> " TitleStyle-CssClass="calTitleStyle" OtherMonthDayStyle-CssClass="calOtherMonthDayStyle" NextPrevStyle-CssClass="calNextPrevStyle" DayHeaderStyle-CssClass="calDayHeaderStyle" TodayDayStyle-CssClass="calTodayDayStyle" SelectorStyle-CssClass="calSelectorStyle" WeekendDayStyle-CssClass="calWeekendDayStyle" SelectedDayStyle-CssClass="calSelectedDayStyle" DayStyle-CssClass="calDayStyle"></asp:Calendar>
For the CSS, I am using this:
.myCalendar { border: solid 1px #CDCDB5; width: 180px; background: url(images/calendarbg.gif) repeat-x; z-index: 1000; }
.myCalendar .calDayStyle a { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: bold; }
.myCalendar .calDayStyle a:hover { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; }
.myCalendar .calSelectedDayStyle { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; }
.myCalendar .calWeekendDayStyle a { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: bold; }
.myCalendar .calSelectorStyle { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; }
.myCalendar .calTodayDayStyle a { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: bold; }
.myCalendar .calDayHeaderStyle { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; }
.myCalendar .calNextPrevStyle { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; }
.myCalendar .calOtherMonthDayStyle a { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; }
.myCalendar .calTitleStyle { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; height: 10px; }
The textboxwatermark extender is a nice little AJAX function that enhances the user experience. The main idea is that a "watermark" can be placed in a text box to give the user some direction about what they need to do in that text box. Once the user clicks inside of the text box the watermark disappers.
Follow these steps to add a textboxwatermark extender:
1. Create the text box.
<asp:TextBox ID="txtSearch" runat="server" CssClass="textbox" Width="160px"></asp:TextBox>
2. Create the textboxwatermark extender.
<cc1:TextBoxWatermarkExtender ID="tbweSearch" runat="server" TargetControlID="txtSearch" WatermarkText="Enter package name" WatermarkCssClass="watermarked" />
The three important parameters are:
a. TargetControlID - Put the name of the text box here.
b. WatermarkText - Place the text box directions here.
c. WatermarkCssClass - Put the name of the css class the watermark should use here.
Often when you insert a date in a datetime field, there is no associated time. (because you didn't provide one!) So, when you compare or join on a date field that did record a particular time of day, or you capture the current time of day "GETDATE()" you do not get a match.
You can set all time values associated with a date to the same value (00:00.0000) using the following code:
CAST(FLOOR(CAST(@yourdate AS FLOAT)) AS DATETIME)
While the autocompleteextender is a great way to deliver a searchable list to a user, inevitably we need to know what item the user selected. Usually, this is so we can retrieve that item's additional information. For example, if we had a contact database and the autoextender was retrieving contact names, we may want the ability to click on a certain contact and get their additional information. I.e. phone number, address, etc.
In order to do this we have to involve a little bit of javascript and some additional hocus pocus. The example below is pulling some advertising packages. The idea is to let the user search for a package name and then select the particular package they would like to order for a client. Packages are basically ads that are sold as a combination.
Use these steps:
1. Place an autoextender tag in your html and link it to your text box.
For instance:
<asp:TextBox ID="txtSearch" runat="server" CssClass="textbox" width="160px"></asp:TextBox>
<cc1:AutoCompleteExtender ID="aceSearch" runat="server" TargetControlID="txtSearch" FirstRowSelected="true" ServiceMethod="GetPackages" ServicePath="packagemanager.asmx" MinimumPrefixLength="1" CompletionInterval="500" CompletionListCssClass="AutoCompleteFlyout" CompletionListItemCssClass="AutoCompleteFlyoutItem" CompletionListHighlightedItemCssClass="AutoCompleteFlyoutHilightedItem" OnClientItemSelected="GetPackageID" />
<asp:TextBox ID="txtPackageID" runat="server" Style="display: none;">0</asp:TextBox>
Notice the OnClientItemSelected parameter of the autocompleteextender. It is has a function. In this case it is called GetPackageID and will run the GetPackageID function. Also, notice the text box called txtPackageID. This text box is a hidden text box that will hold the package ID that is selected by the user.
2. Create the javascript function.
function GetPackageID(source, eventArgs )
//This function runs when the user selects an item in the txtSearch
//text box after the user has run the auto complete extender for the txtSearch
//text box. Essentially, this is needed to extract the ID of the item that the
//user selected in the auto complete extender
{
document.getElementById('txtPackageID').value = eventArgs.get_value();
}
The end result is that the txtPackageID hidden text box now contains the ID of the item the user selected and since this object is a .NET object is now available to the code behind.
