Ajax Control ToolKit – Style the invalid date for Calendar extender

The September 2011 release introduces “Date ranges” for Calendar extender control. It is a little surprise that the Css classes to style the out of range dates are not listed in the official website.

I did some search on the web but it returns not relevant results. So I decided to have a look at the css style generated by the control itself and I have found the missing style Css classes for the out of range date.

The name is “.ajax__calendar .ajax__calendar_invalid” and it has four child classes listed below:

.ajax__calendar .ajax__calendar_invalid .ajax__calendar_day {}

.ajax__calendar .ajax__calendar_invalid .ajax__calendar_month {}

.ajax__calendar .ajax__calendar_invalid .ajax__calendar_year {}

.ajax__calendar .ajax__calendar_invalid .ajax__calendar_today {}

If using the following styles:

.calendar .ajax__calendar_invalid

{

    background-color: #FFFFFF;

    text-decoration: line-through;

    color: #C0C0C0;
}

The calendar looks like:

If you need set the day, month and year view individually, you have to set the relevant child class.

How to create ASP.NET Membership database

1. On the SQL server, create an empty database, say "ASPUserDB".

2. Run aspnet_regsql.exe from C:\windows\Microsoft.NET\Framework\v4.0XXX (or whatever version).

3. Follow the wizard and select the database that has been created in Step 1.

Read more on http://weblogs.asp.net/sukumarraju/archive/2009/10/02/installing-asp-net-membership-services-database-in-sql-server-expreess.aspx

ASP.NET Menu Control rendering problem in Chrome

<asp:Menu ID="NavigationMenu" runat="server" Orientation="Horizontal" />

The default layout setting of Menu control will rendering a blank row on top of the menu item which looks like extra padding. This happens to Google Chrome.


To get rid of this, just set SkipLinkText value to ""(empty string):

<asp:Menu ID="NavigationMenu" runat="server" Orientation="Horizontal" SkipLinkText="" />


For more details, please read:


ASP.NET Menu Control Accessibility Feature renders incorrectly in Safari and Chrome Browsers.

Bind data to DropDownList in edit template of GridView or DetailsView

This is straight forward. Set the “SelectedValue” attribute for DropDownList control.

Note. The “SelectedValue” is not in the intelligent context menu. It won’t automatic pop-up when you typing, but it does exist.

For example, we display a product in a DetailsView. In edit mode, we want to use a dropdown list to select the type of that product. Assume the type id is used in the product table, the edit template would be like:

<EditItemTemplate>
 <asp:DropDownList  **** DataTextField="Name" DataValueField="typeid" SelectedValue='<%# Bind("typeid") %>'></asp:DropDownList>

</EditItemTemplate>

This will auto bind the type id to the list and update with the selected id. The update command and parameters are as usual.