Skip to main content

DHTML ToolTip with Calendar Control

Introduction:

In one of my previous articles I talked about how you can effectively use DHTML with Asp.net to make cool tooltip. In this article I will show how you can use the same DHTML tooltip with the calendar control.

Getting Started:

The first thing you need to do is to download the DHTML script from www.dynamicdrive.com. You can download the script from this url http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm. After download the script just place the required css in the head section of the page and the script in the body of the page.

Screen shot of what we are going to do:

Here is a screen shot of what we are going to do in this article. As you can see that when you place your cursor over any date in the calendar it pops out the description in the DHTML box.

The Code:

The code is pretty simple. First you need to pull all the information from the database to your dataset or any other collection.

private DataSet GetArticles()

{

string connectionString = @"Server=localhost;Database=GridViewGuy;Trusted_Connection=true";

SqlConnection myConnection = new SqlConnection(connectionString);

SqlDataAdapter ad = new SqlDataAdapter("SELECT TOP 10 ArticleID,Title,Description,Abstract,DateCreated FROM Articles ORDER BY DateCreated DESC", myConnection);

DataSet ds = new DataSet();

ad.Fill(ds, "Articles");

return ds;

}

Next to display this information in the Calendar boxes you need to implement the Day_Render event of the Calendar Control.

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)

{

DataSet d = GetArticles();

foreach(DataRow dr in d.Tables[0].Rows) {

string dt = ((DateTime) dr["DateCreated"]).ToShortDateString();

if (dt == e.Day.Date.ToShortDateString())

{

e.Cell.Text = dr["Title"] as String;

}

}

string title = e.Cell.Text;

string ab = String.Empty;

foreach (DataRow dr in d.Tables[0].Rows)

{

if (title == dr["Title"] as String)

{

ab = dr["Abstract"] as String;

}

}

string dhtmlBox = "ddrivetip('" + ab + "','lightyellow','200')";

e.Cell.Attributes["onmouseover"] = dhtmlBox;

e.Cell.Attributes["onmouseout"] = "this.style.backgroundColor='#C0C000';";

}

All I am doing is I fill the Calendar cells using the e.Cell.Text property with the title of the article. And since I got everything I need thing I need in the dataset I simply browse the database for the particular description of the article and pops it up in the DTHML tooltip.

Labels:

Comments

Post a Comment

Popular posts from this blog

Athouk & Mohinga

Atho or Athouk . These consist of boiled noodles cooked with spices, shredded cabbage, onions, chili flakes, roasted channa dal powder, tamarind juice, bejo, garlic oil, coriander leaves and etc are the ingredients of Athouk. To give the dish a crunchy feel. This food also eaten with the accompaniment of Mohinga,a soup made with fish broth & plantain stem, onion, ginger, garlic, chili, turmeric and rice flour. It is an awesome combination. Mohinga , which is considered the unofficial Burmese national food. It is essentially rice noodles served in fish broth with fried onions, garlic, ginger and sliced tender core of plantain stem. If you ask for it, it will also be served with boiled eggs. It is essentially a soup meal and a delightful one at that. History: Many Tamils were settled in Burma then and slowly emigrated back here after Independence.Burmese people started migrating to India. Most of them arrived at the Chennai Port and used to leave for other smaller cities by
3 comments
Read more

World Environment Day

This entry is in response to the Conserve, Recycle and Discover contest organised by blogadda.com in association with Pringoo ! World Environment Day, commemorated on 5 June since 1972, is one of the ways focuses world attention on the environment and encourages political action. People from countries all over the world have mobilized for individual and organized environmental action. Activities involve all sectors of society, governments, non- and inter-governmental organizations, businesses, industries, civil society, media and schools. Please take the following Pledge to save our environment. 1, I pledge to Recycle more, use less water and electricity. 2, I pledge to smoke less in 2010. 3, I pledge to send more electronic documents instead of using paper. 4, I pledge to continue using my bicycle to go to work (instead of my motorbike). 5, wash with full loads it is more energy efficient than doing several smaller ones. 6, Incite of dryer I will use hang dry for energy sav
1 comment
Read more

GridView Alphabet Paging

Introduction: GridView paging feature allow us to display fixed number of records on the page and browse to the next page of records. Although paging is a great feature but sometimes we need to view all the items alphabetically. The idea behind this article is to provide a user with a list of all the alphabets and when the user clicks on a certain alphabet then all the records starting with that alphabet will be populated in the GridView control. Populating the GridView Control: The first task is to populate the GridView control. I will be using the Northwind database in my article which, is installed by default for SQL SERVER 2000 and SQL SERVER 7 databases. The code below is used to populate the GridView control. private void BindData() { string connectionString = "Server=localhost;Database=Northwind;Trusted_Connection=true"; SqlConnection myConnection = new SqlConnection(connectionString); SqlDataAdapter ad = new SqlDataAdapter("SELECT P
1 comment
Read more