Using JavaScript to select gridview rows

Sample table used

I am actually using Microsoft SQL Server 2005, with the attached demo app. You will need to changeWeb. configFile to point to your own SQL Server Installation. ForGridviewData I have chosen to use the master database,DBO. spt_valuesTable, that comes with SQL Server 2005

The master table structure, and the query that the demo app uses are as follows:

How it works

It's very easy actually, all we do is use<Asp: sqldatasource/>Web Control to bind to the master database (remember you'll need to change the connection section inWeb. configTo point at your own database).GridviewData is obtained using a simple SELECT statementSelect top 5 * From DBO. spt_values table, And then haveGridviewControl use this<Asp: sqldatasource/>. Then we include<Asp: commandfield showselectbutton ="True"Visible ="False"/>Field which we set to be invisible.

One more point to note is that the page must have the following directive set in order to allow the Javascript PostBack mechanic that is described below.

So in the page declarations section, ensure the following is setEnableeventvalidation ="False"

So that's the aspx file (web form), but we also need to write some code in the code behind and use a little bit of JavaScript. so the code behind (C # For the attached demo) Looks like:

Collapse

Using system; using system. data; using system. configuration; using system. collections; 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; public partial class grid: system. web. UI. page {protected void page_load (Object sender, eventargs e ){} /// <Summary> /// Check the item being bound is actually a datarow, if it is,  /// Wire up the required HTML events and attach the relevant javascripts  /// </Summary>  /// <Param name = "sender"> gridview1 </param>  /// <Param name = "E"> the event ARGs for the rowdatabound event </param> Protected void gridview1_rowdatabound (Object sender, gridviewroweventargs e ){ // Check the item being bound is actually a datarow, if it is,  // Wire up the required HTML events and attach the relevant javascripts If (E. Row. rowtype = datacontrolrowtype. datarow) {e. Row. attributes [ "Onmouseover" ] ="Javascript: setmouseovercolor (this );" ; E. Row. attributes [ "Onmouseout" ] = "Javascript: setmouseoutcolor (this );" ; E. Row. attributes [ "Onclick" ] = Clientscript. getpostbackclienthyperlink (this. gridview1, "Select $" + E. Row. rowindex );}} /// <Summary>  /// Show the 1st cell value in the web pages textbox to show the user  /// It is actually selecting rows at client side  /// </Summary>  /// <Param name = "sender"> gridview1 </param> /// <Param name = "E"> the event ARGs for the selectedindexchanged event  /// </Param> Protected void gridview1_selectedindexchanged (Object sender, eventargs e) {textbox1.text = gridview1.selectedrow. cells [1]. Text ;}}

This works by attaching 2 extends cripts to the currentGridviewRow.

• OneOnmouseoverWhich simply sets the current row to be highlighted a certain color. I chose yellow, but you can change that.
• OneOnmouseoutWhich simply resets the current row to be the original color

There is also a clever line as given below:

E. row. attributes [<SPAN class = "CPP-string"> "onclick" </span>] = clientscript. getpostbackclienthyperlink (this. gridview1, <SPAN class = "CPP-string"> "select $" </span> + E. row. rowindex );

This cunningly creates a client hyperlink which posts back the current aspx web form, usingSelect $0To select row 0 say.

The aspx pages Javascript is as follows:

& Lt; script Language = <SPAN class = "CPP-string"> "JavaScript" </span> type = <SPAN class = "CPP-string"> "text/JavaScript" </span> & gt; vaR oldgridselectedcolor; function setmouseovercolor (element) {oldgridselectedcolor = element. style. backgroundcolor; element. style. backgroundcolor = 'yellow'; element. style. cursor = 'hand'; element. style. textdecoration = 'underline';} function setmouseoutcolor (element) {element. style. backgroundcolor = oldgridselectedcolor; element. style. textdecoration = 'none' ;}& lt;/script & gt;

And that's it. So what we get is now a niceGridviewControl, that we select rows with using JavaScript, and it looks like a table, rather than a table plus some nastySelectButton, or a hyperlink column (that is only being used as a row Selection Method anyway ).