Ajax ModalPopup Extender Example.

There is a nice example at HERE

Why Invisible Column?

One might ask that why should I use an invisible column in the first place. There are many reasons of making the column invisible. You might want to use a column as the primary key which retrieves the value from the database and display it using the GridView control. Since, primary key is a confidential data you want might to hide it from the users. Another reason of making the column invisible is that you might want to have some additional information to save an extra trip to the database. Please note that the second scenario should not be used to display many columns as this will increase the View State and thus the size of the page large.

Using the DataKeys Property:

The simplest way to access the primary key is by using DataKeys property of the GridView control. DataKeys property represents the column which is to be used as the primary key. In this article I will use my custom database "Tasks" and display the columns "Title", "Description", "DateCreated" in the GridView control. Apart from the columns from the database the GridView also contains a CheckBox Template Column which is used to check the tasks which are completed. Take a look at the HTML below to have a clear idea.

<asp:GridView ID="gvInComplete" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" DataKeyNames="TaskID"> <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> <Columns> <asp:BoundField DataField="Title" HeaderText="Title" /> <asp:BoundField DataField="Description" HeaderText="Description" /> <asp:BoundField DataField="DateCreated" HeaderText = "Date Created" /> <asp:TemplateField HeaderText="Select"> <ItemTemplate> <asp:CheckBox ID="chkSelect" runat="server" /> ItemTemplate> asp:TemplateField> Columns> asp:GridView>

As, you can see in the code above the DataKeyNames property is set to "TaskID" which, is the primary key in the table. Now, let's see how we can access all the TaskID of the rows which are checked using the CheckBoxes.

DataKey key; foreach (GridViewRow row in gvInComplete.Rows) { bool result = ((CheckBox)row.FindControl("chkSelect")).Checked; if (result) { key = gvInComplete.DataKeys[row.RowIndex]; Response.Write((int)key.Value); } }

In the code above I am iterating through all the rows in the GridView control. If I find a row that is checked then I gets the primary key of the row using the GridView DataKeys collection. The Row class property RowIndex will contain the index of the current row.

This is pretty simple right! But what if I want to access another column which is not a primary key. This can be done by using a Template Column inside the GridView control.

Accessing Invisible Column Using Template Field:

To access the invisible column using Template Field is very straight forward. All you need to do is to make the Template Field invisible and use the control inside the Template Field to access the values. Check out the following HTML code:

<asp:TemplateField Visible="False"> <ItemTemplate> <asp:Label ID="lblTaskID" runat="server" Text='<%# Eval("TaskID") %>' /> ItemTemplate> asp:TemplateField>

In the above HTML code I have simply defined a Label control inside the ItemTemplate property of the Template Field. The Template Field is made invisible so, the user will not see it on when it is bound to the GridView control. You can access the TaskID using the following code:

int taskID = 0; Task task = new Task(); foreach (GridViewRow row in gvInComplete.Rows) { bool result = ((CheckBox) row.FindControl("chkSelect")).Checked; if (result) { taskID = Convert.ToInt32(((Label)row.FindControl("lblTaskID")).Text); task.UpdateTask(taskID); } }

In the above code I am simply iterating through the GridView rows and when I find that the checkbox is checked then I get the value from the Label control which in this case is TaskID. After, I get the TaskID I can perform any function on it in my case UpdateTask.

I hope you liked the article, happy coding!

Copied From:http://www.highoncoding.com/Articles/178_Access%20GridView%20Invisible%20Columns.aspx

This is just for educational purpose only....

Sending Email From Web Page using asp.net

Hope this link will help you find the solution you are looking

http://www.4guysfromrolla.com/articles/072606-1.aspx

Adding Images to Hyperlinks in Grid view.

---

A HyperLinkField enables authors to display text or image hyperlinks that users can click to navigate to another page.

The text or image of the hyperlink can either be static — the same for every row — or obtained from a field in the data source.

Similarly, the target page for the hyperlink can be a single page for all the hyperlinks, or a URL derived from the data source.

To add a hyperlink field

1. Set the GridView control's AutoGenerateColumns property to false.

     autogeneratecolumns=false
   
     ...
   
   >

2. Within the GridView declaration, declare a element.
3. Within the Columns element, define the you intend to display, specifying at the very least the required DataTextField and DataNavigateUrlFields properties.
4. Optionally set the HyperLinkField control's other properties, such as the HeaderText and DataNavigateUrlFormatString. For syntax, see GridView Control Syntax.

   
   
   
   
     hyperlinkfield headertext="Title"
   
        datatextfield="title"
   
        datanavigateurlfields="title_id"
   
        datanavigateurlformatstring="details_title.aspx?titleid={0}" />
   
   
   
     ...
   
   
   
   

GridView HyperLinkField Example Run Sample | View Source

The HyperLinkField class itself does not have a member that directly supports using images. The HyperLink controls that are rendered in the column, though, include an ImageUrl property that can be set programmatically during the RowDataBound event of the GridView control to render image links.

To setup a hyperlink field to display images

1. Set the GridView control's AutoGenerateColumns property to false.
2. Assign the handler that will receive control when the rows are bound to data ( in effect, when the GridView's RowDataBound event occurs ).

     autogeneratecolumns=false
   
     ...
   
     onRowDataBound="getImages"
   
   >

3. Proceed as with using text links above, except omit the Text and DataTextField properties.

   
   
   
   
     hyperlinkfield
   
        datanavigateurlfields="planId"
   
        datanavigateurlformatstring="plan_details.aspx?id={0}" />
   
   
   
     ...
   
   
   
   

4. Define the handler for the event ( see demo ).

The following example shows how to set up a HyperLinkField to display a column of image links in a GridView control.

Dynamically Generated HyperLinkField Images Run Sample | View Source

For additional information, see HyperLinkField in the class library.

This Article is copied from URL:http://authors.aspalliance.com/aspxtreme/webforms/controls/addinghyperlinkfieldstogridview.aspx

This is for Educational Purposes Only.

Another Way to Change Gridview Row Color on Mouse-Over

A need little feature that can jazz up any Gridview is adding a color-change when the mouse is over a row. Thanks to our good friend (or nemesis depending on your point of view) JavaScript, setting up such a thing is only a few lines of code away.

First, setup your Gridview. I’m sure you’ve done this thousands of times, so I won’t bore you with the code of setting up or populating this guy. Add an OnRowCreated event to your GridView. This will run for each row created in your Gridview and allow you to add the necessary JavaScript.

"gvNews"

       runat="server"

       AutoGenerateColumns="False"

       DataKeyNames="BlogID"

       DataSourceID="SqlDataSource1"

       AllowPaging="True"

       PageSize="20"

       BorderStyle="None"

       BorderWidth="0px"

       Width="100%"

       CellPadding="10"

       CellSpacing="4"

       ShowHeader="False"

       OnRowCreated="gvNews_OnRowCreated"

       >

In your code behind, you will need to add a handler for this event. For my example, I’m using alternating background colors on rows (which you should do too, it makes things so much more readable). This causes me to add a couple extra lines so that I make sure I’m setting my rows back to the correct color on MouseOut.

    protected void gvNews_OnRowCreated(object sender, GridViewRowEventArgs e)

   {

       if (e.Row.RowType == DataControlRowType.DataRow)

       {

           if (e.Row.RowState == DataControlRowState.Alternate)

           {

               e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#FFFFE1';");

               e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#f7fff8';");

           }

           else

           {

               e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#FFFFE1';");

               e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#eefef0';");

           }

       }

   }

That’s all there is to it. If you want to see this in action, check out the news section on the main page here.

There is room for improvement here… you could assign a CSS class instead of hard coding the colors. I believe there is also a way you could also get the background color that is assigned in the RowStyle/AlternatingRowStyle section. That would make this much more portable.

Copied From :http://www.krissteele.net/blogdetails.aspx?id=78
Just for Educational Purposes only.

Color Gridview Rows on mouse over.

GridView Component had brought some really nice features to the ASP.Net development. And even those features that it lacks can be easily added via customization or inheritance.

One of the things that GridView lacks are all those client-side bells and whistles that make todays web users happy (or miserable, depending on how developers over-use them ).

For example, very often it is required to highlight the data rows when mouse pointer is over the row (Mouse Hover effect).

This is not something that GridView does by default, but as i said, it is very easy to add new features to the GridView.
We can add few lines of JavaScript and thats it.

But to create this effect in a way as it should be done, a little planning is necessary:

If you ask the almighty Google, it will direct you to the various implementations of this effect for GridView but most of them do not take into account GridView's ItemStyle and AlternatingItemStyle properties and just override them when changing row colors.

What we are going to do is to implement mouse hover row highlighting with respect of all GridView properties, and restoring their original values when the mouse pointer is moved away from the rows/GridView.

In order to highlight the row on mouse hover, we need to add some custom JavaScript code to onmouseover and onmouseout event handlers of the rows of our GridView.

We can do this by placing this code to the RowCreated event handler of our GridView:

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)

{

// only apply changes if its DataRow

if (e.Row.RowType == DataControlRowType.DataRow)

{

// when mouse is over the row, save original color to new attribute, and change it to highlight yellow color

e.Row.Attributes.Add("onmouseover",

"this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='#EEFF00'");

// when mouse leaves the row, change the bg color to its original value

e.Row.Attributes.Add("onmouseout",

"this.style.backgroundColor=this.originalstyle;");

}

}

What this code actually does?

RowCreated event is fired immediately after each row is created in our GridView. So for each created row, we first check if its a DataRow (not Header of Footer for example) and if it is, we add the JavaScript code via Add method of the Attributes collection (AttributeCollection type) that has name-value pairs of the rendering attributes of the GridViewRow.

In onmouseover handler code, we first store (for later restoring) the original background color of the row in a custom attribute we called "originalstyle" and we then change it to a custom color (light Yellow in this case).

In onmouseout handler, we restore the original background color of the row from the "originalstyle" attribute.

And that is it. If you bind this GridView with some data and display it on a page, when you move your mouse pointer over any of the rows, it will change its background color into Yellow. And when you move mouse out of the row, the original background color of the row is restored.

IMPORTANT: This works correctly even if you have set the AlternatingRowStyle of the GridView and even if the row was previously selected (this detail is something that is missing in all other implementations of this GridView behavior we have seen on the internet).

Ok, now that we solved this, why not make a custom WebControl out of it by inheriting the original ASP.NET GridView control and adding highlighting feature to it?

Its really simple, here is the code of the HoverGridView custom WebControl:

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Drawing;

///

/// Summary description for HoverGridView

///

namespace Roboblob.WebControls

{

[ToolboxData("<{0}:HoverGridView runat=server>")]

public class HoverGridView : System.Web.UI.WebControls.GridView

{

public bool MouseHoverRowHighlightEnabled

{

get

{

if (ViewState["MouseHoverRowHighlightEnabled"] != null)

return (bool)ViewState["MouseHoverRowHighlightEnabled"];

else

return false;

}

set { ViewState["MouseHoverRowHighlightEnabled"] = value; }

}

public Color RowHighlightColor

{

get

{

if (ViewState["RowHighlightColor"] != null)

return (Color)ViewState["RowHighlightColor"];

else

{

// default color

return Color.Yellow;

}

}

set { ViewState["RowHighlightColor"] = value; }

}

protected override void OnRowCreated(GridViewRowEventArgs e)

{

base.OnRowCreated(e);

if (MouseHoverRowHighlightEnabled)

{

// only apply changes if its DataRow

if (e.Row.RowType == DataControlRowType.DataRow)

{

// when mouse is over the row, save original color to new attribute

// and change it to highlight yellow color

e.Row.Attributes.Add("onmouseover",

string.Format("this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='{0}'",

ColorTranslator.ToHtml(RowHighlightColor)));

// when mouse leaves the row, change the bg color to its original value

e.Row.Attributes.Add("onmouseout",

"this.style.backgroundColor=this.originalstyle;");

}

}

}

}

}

And here is how to use this custom WebControl on a WebForm:

First we must register it on the top of our aspx page:

<%@ Register Namespace="Roboblob.WebControls" TagPrefix="roboblob" %>

And when we place our custom GridView on the form here is how its declaration looks like:

<roboblob:HoverGridView runat="server" MouseHoverRowHighlightEnabled="True" RowHighlightColor="Green" ID="HoverGridView1" AutoGenerateColumns="False" DataKeyNames="id" DataSourceID="SqlDataSource1">

<Columns>

<asp:CommandField ShowSelectButton="True" />

<asp:BoundField DataField="id" HeaderText="id" InsertVisible="False" ReadOnly="True"

SortExpression="id" />

<asp:BoundField DataField="name" HeaderText="name" SortExpression="name" />

Columns>

roboblob:HoverGridView>

As you can see its really only a few lines of code, and yet we have created a custom WebControl that we can place on any WebForm, switch the highlighting on/off, change the highlight color etc.

This is the beauty of creating and using WebControls and Controls in general...

We could add many other features to our custom GridView, like different colors for alternating rows, for selected rows etc but i will leave that as something for you to play with.

Have fun!

Copied From : http://www.aspdotnetfaq.com/Faq/How-to-correctly-highlight-GridView-rows-on-Mouse-Hover-in-ASP-NET.aspx