How would you rate this article?

Rating: 4 user(s) have rated this article Average rating: 4.0
Posted by: retro
Date: 18/12/2008
Category: Web Development
Views: this article has been read 8144 times

Recent Articles Get the RSS feed

Start selling online with Nochex merchant services
(26/06/2010)

Nochex merchant accounts provide you with everything you need to accept payments on your web site. With no monthly fees and support for a number of ecommerce solutions, including nopCommerce, it has never been easier to start selling online!

SCA Web site now live
(25/05/2010)

Check out our latest project for community interest company S.C.A.

Microsoft .NET 4.0 Hosting now available
(25/05/2010)

We are pleased to announce support for version 4.0 of the .NET Framework on all of our hosting plans.

Aerial Spares Web Site Now Live
(11/02/2010)

We have just completed development of a new web site for UK based Aerial Spares.

nopCommerce User Guide now available
(11/02/2010)

Today sees the release of the official nopCommerce user guide. It explains every part of the application in detail and includes a getting started guide so you can get up and running quickly.

read more read more

Selecting GridView items using javascript
Users of Windows form applications will often be used to selecting a row in a grid of data by simply clicking any part of that row. This article demonstrates how you can replicate this behaviour with the asp.net GridView control.

In addition to providing a client side 'onclick' event to select the row, I am going to add some javascript code to the 'onmouseover' and 'onmouseout' events in order to dynamically change the styles of the item when the user hovers their mouse over it. This will in affect, highlight the entire row and change the mouse cursor to make it clear that the user can select the row.

We can add these client side attributes in our GridView's RowCreated event with the following code:

        Protected Sub gvwVehicles_RowCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
        Handles gvwVehicles.RowCreated
            If e.Row.RowType = DataControlRowType.DataRow Then
                e.Row.Attributes.Add("onmouseover", "this.originalstyle=this.style.backgroundColor;" & _
                                                    "this.style.backgroundColor='#FFCC66';" & _
                                                    "this.style.cursor='pointer';")
                e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor = this.originalstyle;")
                e.Row.Attributes.Add("onclick", Page.ClientScript.GetPostBackEventReference(sender, "Select$" + e.Row.RowIndex.ToString))
            End If
        End Sub

You will notice that we first save the original backcolor "this.originalstyle" so that are then able to set it back to this when the GridView item loses focus. This will also work on GridView's that have an  AlternatingRowStyle specified.

The next thing to do is to enable selection on your GridView but hide the select button and it's header. The select button needs to be present (since you are calling it with your javascript) so the easiest thing is to create a new css style like below:

.hidden
{
display: none;
}
 

and then add the following code for your GridView command button:

            <asp:CommandField ButtonType="Link" SelectText="Edit category"
                ShowSelectButton="True" CausesValidation="false">
                <ItemStyle CssClass="hidden" />
                <HeaderStyle CssClass="hidden" />
            </asp:CommandField>

You can obviously play around with the styles to produce a very smart interface:

GridView with Javascript Selection

 

Send to Friend  Send to friend

Comments

04 September 2009 20:07 by Seany
Hey RetroViz, I've been researching this online forever and finally I cam across your post... THANK YOU!!! It's the cleanest, safest, most efficient solution out there. Seany
Comment this article
Name:
E-mail:
Comment:
Add Cancel