Thursday, March 24, 2011

Using JQuery Datepicker in Master Pages

I will cover 2 points here.
1. Using JQuery's DatePicker
2. Using it in Master Page, Content Page situations

To use JQuery's DatePicker, you should have access to JQuery and JQuery UI libraries. You can either use CDNs(Content Distribution Networks) or have JQuery libraries in your site.
The libraries have both JavaScripts and CSS files.
I have used Google CDN for JQuery & JQuery UI javascripts. And for the CSS part, I have downloaded them to my site. And the reason is, I could not get CSS running if used CDN for it!

Time to get dirty.
In the master page's head section, add the links to the libraries






Once you get the libraries, in the content page, drag & drop a asp:TextBox and add the jquery code to attach the datepicker to the textbox.
It should look like below.





If you are not using master page, you can replace $('[id$=TextBox1]') with $("#TextBox1"). Thats it! Just 4 files to link and 2 lines of code will get you a beautiful Datepicker on your page.
Happy coding!

Wednesday, March 23, 2011

Binding a List or string array to ListView and operating on it

Suppose you have a Object Datasource attached to ListView and you have GetList, Delete and Insert operations set on it that would operate on a db. If that ODS primarily deals with string array, then you are about to face some challenges.
Displaying
The problem with showing a plain string array to ListView is, that array is nameless.
To overcome this, all you have to do is use Container.DataItem where it usually was Bind("Name")



Operating on the data
To delete a row from db, the only information you have in the ListView is string data. So, we have to make use of it and tie that info to every delete button (you get this when you select delete operation on the ODS) for every row. You do that in ItemDataBound event.

protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
{
string venueName = (e.Item as ListViewDataItem).DataItem.ToString();
(e.Item.FindControl("DeleteButton") as Button).CommandArgument = venueName;
}

To make insertion into db, find the input text control inside InsertItem template of ListView as shown below and in ItemCommand event, use the command name property to distinguish between operations.

protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
{
string venueName = (e.Item as ListViewDataItem).DataItem.ToString();
(e.Item.FindControl("DeleteButton") as Button).CommandArgument = venueName;
}
protected void ListView1_ItemCommand(object sender, ListViewCommandEventArgs e)
{
if (e.CommandName == "Delete")
{
string venue = e.CommandArgument.ToString();
Venue.DeleteVenue(venue);
Response.Redirect(Request.Url.AbsolutePath, true);
}
else if (e.CommandName == "Insert")
{
VenueEntity venueEntity = new VenueEntity();
venueEntity.Name = (ListView1.InsertItem.FindControl("VenueTextBox") as TextBox).Text;
venueEntity.AddedBy = User.Identity.Name;
venueEntity.DateAdded = DateTime.Now;

Venue.InsertVenue(venueEntity);
Response.Redirect(Request.Url.AbsolutePath, true);
}
}

Adding Attributes to ListView item in Asp.Net

One problem when switching from GridView to ListView would be to understand that ListView doesn't have rows as GridView. To add attributes to ListView item, it should be done in ItemDataBound event as below.



protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
object objTemp = ListView1.DataKeys[((ListViewDataItem)e.Item).DisplayIndex].Value as object;
if (objTemp != null)
{
string id = objTemp.ToString();
((HtmlTableRow)e.Item.FindControl("courserow")).Attributes["onmouseover"] = "this.style.color='DodgerBlue';this.style.cursor='hand';";
((HtmlTableRow)e.Item.FindControl("courserow")).Attributes["onmouseout"] = "this.style.color='Black';";
((HtmlTableRow)e.Item.FindControl("courserow")).Attributes["onclick"] = "window.location.href = 'ManageCourse.aspx?CourseId=" + id + "'";
}
}
}

You need the runtat attribute set to server for "courserow" row.