ASP.NET AJAX Date Picker

    Recently, while working on my Tai Chi club’s website, I realized that my club’s website is lacking the capability of scheduling a Tai Chi class (or any other type of event for that matter). In order to schedule any type of event, I would need to specify that event’s date and time, location, and maybe some kind of description or explanation of what’s going to be happening during that event. So, I started looking at different ways to create a Date Picker. After some research, I found out that it is very easily achieved with Ajax Control Toolkit, which provides CalendarExtender control.

     The CalendarExtender control is designed to extend a TextBox. Its default behavior prompts the end user to pick a date from a calendar when the user clicks inside a textbox associated with the CalendarExtender.

This is what it looks like:
It is also possible to add a button to the right of the textbox and have the calendar popup whenever the user clicks that button (all you need to do is specify the button's ID as value of PopupButtonID property).

To customize the look of the popup calendar, add all or some of the following classes to your stylesheet and customize them appropriately:

To achieve the look above, I added the following class to my stylesheet:

.ajax__calendar_active
{
    border: solid 2px green;
   font-weight: bold;
}

and then in my page’s Page_Load event added the following line of code:

this.CalendarExtender1.SelectedDate = DateTime.Today;

.ajax__calendar_container
you can change the style of outer container of calendar control. Outer container holds the .ajax__calendar_header, .ajax__calendar_body, .ajax__calendar_footer as child container css classes.

.ajax__calendar_header
This css class holds the previous arrow, next arrow and current Month, Year. Child Css Classes are .ajax__calendar_prev, .ajax__calendar_next, .ajax__calendar_title.

.ajax__calendar_prev
This class is associated with an element that displays the left side arrow to view the previous month, year or decade based on the current view of calendar.

.ajax__calendar_title
This class is associated with an element that displays the month name, year or decade range according to the current view of the calendar control.

.ajax__calendar_next
This class is associated with an element that displays the right side arrow to view the next month, year or decade based on the current view of calendar.

.ajax__calendar_body
It is a container of the elements for displaying the different views of calendar such as month view, year view and day view. This class holds the .ajax__calendar_days, .ajax__calendar_months and .ajax__calendar_years as child css classes

.ajax__calendar_days
It changes the look of day view of month. Child Css Classes are .ajax__calendar_dayname and .ajax__calendar_day.

.ajax__calendar_dayname
It changes the look of day name at the top of day view of month.

.ajax__calendar_day
This class is associated with the day layout of month.

.ajax__calendar_months
It controls the month layout of month view. Child Css class is .ajax__calendar_month.

.ajax__calendar_month
It controls the look and feel of month names of month view.

.ajax__calendar_years
This class controls the layout of year view of calendar control. Child css class: .ajax__calendar_year.

.ajax__calendar_year
It changes the look and feel of years in the year layout of year view.

.ajax__calendar_footer
It is associated with Footer container that holds the current date.

.ajax__calendar_today
It displays the current date in the footer container of calendar control.

.ajax__calendar_hover
Dynamic color behavior onmouseover can be modified by using this class. It can be used with .ajax__calendar_title, .ajax__calendar_day, .ajax__calendar_month, .ajax__calendar_year, .ajax__calendar_today to change the mouse over behavior.

.ajax__calendar_active
It sets the style of currently selected date.

.ajax__calendar_other
It sets the style of day, month name or year that is outside the current view e.g. days that don’t belong to the currently visible month.

Passing Parameter to a Subreport

A few days ago I was revising my application and made some modifications. One of the modifications were that now all of my subreports required an additional parameter, which was not required for the main report. The SetParameterValue(parameterName, parameterValue) method did not work, because it only works with main report object and can't be used with subreports. So, this is what I did to make it work:

1. I included additional parameters in the main report and then linked them to their corresponding counterparts in my subreports.

2. After that was done, I only had to pass their values to the main report using the SetParameterValue(parameterName, parameterValue) method.

Everything worked after I did that, which was a big relief for me, considering my deadlines :)

Passing Parameter to Crystal Report

Recently, I was developing a pretty sophisticated Crystal Report that included multiple sub-reports and used multiple stored procedures as data sources. All of those stored procedures accepted the same parameter, which made my life a little easier, since I only had to deal with one parameter that I needed to pass to my Crystal Report.

In order for all sub-reports to be able to recognize the parameter, which I am passing to the main report, I had to link all of my sub-reports to the main report using that parameter.

In order to link a sub-report to the main report, the following actions should be performed:

To link a subreport to the data in the primary report

1. If you are creating a new subreport or importing an existing report as a subreport, from the Insert menu, click Subreport. Choose or create a report and click the Link tab.

   - or -

   If you have already placed a subreport in the primary report, but did not create a link at setup, navigate to the Subreport Links dialog box by choosing Subreport Links from the Edit menu.

   The Subreport Links dialog box appears.

2. Choose the subreport you want to link from the For subreport list (if it is not already selected).
3. Select the field you want used as a link field in the primary (containing) report from the Available Fields list.
4. Click the > arrow.

   The field is added to the "Field(s) to link to" list box, and is now selected as a link field.

5. Repeat steps 3 and 4 for each additional link, as desired.
6. Use the Field link section (which will only appear if you have selected a link field) to set up the link for each link field:
   • Select the field you want linked to the primary report from the "Subreport parameter field to use."
   • Select the "Select data in subreport based on field" check box on and select a field from the adjacent drop-down list to organize the subreport data based on a specific field (this is the quick equivalent of using the Select Expert). If nothing is specified here, the subreport will adopt the organization of the primary report.
7. Click OK.

When you run the report, the program will coordinate the data in the primary report with the data in the subreport.

Below is the code that I used to pass my parameter to the Crystal Report and then display it in PDF format to the end-user:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

GenerateReport(Session("EmpId"))

End Sub

Private Sub GenerateReport(ByVal EmpId As Integer)

Dim theReport As New ReportDocument
theReport.FileName = "C:\myProject\Reports\myReport.rpt"
theReport.SetDatabaseLogon(PCON.APP.UserName, _
PCON.APP.Pass, _
PCON.APP.db_Server, _
PCON.APP.dbName)

'Set the required parameter for Crystal Report
theReport.SetParameterValue("@Id", EmpId)

'Now, present report in PDF format
theReport.ExportToHttpResponse ( _

ExportFormatType.PortableDocFormat, _
Response, _
False, _
"ExportedReport")

End Sub

Character Counter

Recently I was developing a webform (asp.net) where the user could submit his feedback, and one of the requirements was that the user should not enter more than a set number of characters in his message, so I thought it would be real nice for the end user to know how many more characters he still can type until the maximum limit is reached.

In order to allow that functionality, I created a asp.net multiline textbox for text input and an html readonly text field (for displaying number of characters until the maximum).

Then, I created a Javascript function and called it every time the contents of the multiline textbox changed (onKeyUp and onChange events).

Below is the code:

<html>
<head>

<script language="JavaScript">

function CountChars(text,long)
{
   var maxlength = new Number(long);
   var myLength = text.value.length;
   document.forms[0].Counter.value = maxlength - myLength;
   if (myLength > maxlength){
      text.value = text.value.substring(0,maxlength);
   }
}

</script>

</head>
<body>

<form id="Form1" runat="server">

<asp:Textbox mode="multiline" id="txtMessage" runat="server" /><br />

<input type="text" name="Counter" readonly="readonly" />

</form>

</body>
</html>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Util.SetTextBoxPropertiesFull(txtMessage, True)
End Sub

and then, in the SetTextBoxPropertiesFull method I had the following two lines of code that did the work:

txt.Attributes.Add("onKeyUp", "CountChars(this," & txt.MaxLength & ")")
txt.Attributes.Add("onChange", "CountChars(this," & txt.MaxLength & ")")


Another handy code snippet is as follows:

txt.Attributes.Add("onfocus", "this.className='myStyle1'")
txt.Attributes.Add("onblur", "this.className='myStyle2'")

where myStyle1 and myStyle2 are names of css classes defined in the stylesheet.

Converting ASP.NET to PDF

I probably wouldn't be wrong if I said that most developers every now and then are tasked to present specific data contained in a webpage as a PDF document. There are two ways to do it:

1. using the functionality of CrystalReportViewer's toolbar - this toolbar provides a button, which does exactly that. However, to use this approach you would have to actually display the crystal report on the page.


2. programmatically convert the Crystal Report object into a PDF document using the Crystal Reports API

Below is the code for the second approach:

Dim report As CrystalReport1 = New CrystalReport1
SqlDataAdapter1.Fill(DataSet11)
report.SetDataSource(DataSet11)
report.ExportToHttpResponse _
(ExportFormatType.PortableDocFormat, _
Response, _
False, _
"ExportedReport")


Crystal Reports with ASP.NET

When it comes to developing a report for an ASP.NET application, one might find that there is very little information available on how it's done using Crystal Reports.

Visual Studio 2003 comes with a built-in version of Crystal Reports (CR 9). Using that built-in version of Crystal Reports might save you some money, since it's a part of VS 2003, however, from the Crystal Reports design prospective it is much more convenient to use a stand-alone version of Crystal Reports.

The latest version of Crystal Reports at the time of writing this post is Crystal Reports XI, which provides some new features, not available in previous versions (see the www.businessobjects.com website for more info), so in my last development I used that version of Crystal Reports.

In order for the report to display as a webpage, VS 2003 provides CrystalReportViewer control. This is how it works:

Instantiate the DataSet object

Dim ds As New DataSet

ds = GetDataForReport() 'some method that retrieves data for the report

Instantiate the ReportDocument object:

Dim rpt As New ReportDocument

'set the ReportObject as the report you want to display
rpt = New CrystalReport1
'Define the datasource of your report
rpt.SetDataSource(ds)

'define your report as a reportsource for the crystalreportviewer
CrystalReportViewer1.ReportSource = rpt

Below is C# version of this code:

DataSet ds = new DataSet();
ReportDocument rpt = new ReportDocument();
rpt = new CrystalReport1();
rpt.SetDataSource(ds);
CrystalReportViewer1.ReportSource = rpt;


In order for this code to work, the following namespaces must be imported/used:

CrystalDecisions.CrystalReports.Engine
CrystalDecisions.Shared
CrystalDecisions.Web.Design

The following namespaces should be used only if you are planning to convert the report into a PDF, Word, or Excel format.

CrystalDecisions.Shared.ExportDestinationType
CrystalDecisions.Shared.ExportFormatType
CrystalDecisions.Shared.ExportDestinationOptions