Geeks With Blogs

News
Welcome to my blog.
Here's what we've got on the menu today:

Lorin Thwaits A geek says what?

Yesterday the question was posted to the Arizona Groups list:

How do you use client-side code to read the selected value in a drop-down list contained in a DataGrid cell when the user clicks on an <img> tag in an adjoining cell?

This can be done quite easily with JavaScript.  One cool thing about HTML elements in general is that from wherever you are, you can navigate four ways: to an element's parent, first child, previous sibling, or next sibling.  This allows you to effectively "walk" throughout your entire document, element by element.  With DataGrids, where stuff is stored in an HTML table, you can use nextSibling or previousSibling to walk to cells at the left or right.  Here's a quick DataGrid in edit mode as rendered by ASP.NET 1.1, including a couple custom columns with drop-down lists.  Of prime interest is the column with buttons that use generic JavaScript to find the choices made in the drop-downs:

  NameGroupRoleTest
Update CancelDelete
EditDeleteIma HoggLas VegasClerk
EditDeleteElla VadorRenoStocker

The code to create the button that finds the Role drop-down choice is simply:

<input type="button" onclick="alert(this.parentElement.previousSibling.firstChild.value);" value="Grab Role drop-down" />

So in the JavaScript it basically navigates from this (the button) to its parent (the TD) to the previous sibling (the TD at the left) to the first child (the SELECT which is the drop-down list) and from there gets whatever value is currently selected. In this way you could walk to any point in the entire grid if you wanted. It's easiest and most reliable to navigate to cells at the left or right of where you are, though. Note that if the column order were to ever change then this code would of course break since it totally dependant on the order of the columns.

Compared to the Role button, the other button that grabs the Group drop-down has to go one more cell to the left, and as such just has two occurrences of “.previousSibling“ stacked together instead of just one.  This same generic code could be put in absolutely any Datagrid with drop-downs and it would always find what the drop-down value is on the cells at the left.  If you want to search over to the right instead, just use “.nextSibling” where it currently has “.previousSibling“.

An important caveat: although this code works perfectly with IE, with Netscape or Mozilla in every case where you use a "nextSibling" or "previousSibling" you have to double it up and use two. I haven't dug through to see if there are any additional issues with this sample and NetScape, but just know that it's screwy the way those browsers handle previousSibling and nextSibling.  IE is so much nicer for this kind of stuff!

Posted on Friday, December 16, 2005 2:28 AM ASP.NET | Back to top


Comments on this post: Scouting around the cells in an ASP.NET DataGrid using JavaScript

# re: Scouting around the cells in an ASP.NET DataGrid using JavaScript
Requesting Gravatar...
I would love to know how you put in the drop down lists on datagrid in edit mode. Do you have any sample code for that part?
Left by Big Roll Tide on Mar 07, 2006 8:16 AM

# re: Scouting around the cells in an ASP.NET DataGrid using JavaScript
Requesting Gravatar...
oh..vb if possible
Left by Big Roll Tide on Mar 07, 2006 8:17 AM

# re: Scouting around the cells in an ASP.NET DataGrid using JavaScript
Requesting Gravatar...
can i get the code for this example..
Left by mallika on May 10, 2007 5:29 AM

# re: Scouting around the cells in an ASP.NET DataGrid using JavaScript
Requesting Gravatar...
can you sent this code for me
Left by karthik on Sep 13, 2007 7:34 PM

# re: Scouting around the cells in an ASP.NET DataGrid using JavaScript
Requesting Gravatar...
can you send this code for me please
Left by sunil on Dec 03, 2007 1:34 AM

# re: Scouting around the cells in an ASP.NET DataGrid using JavaScript
Requesting Gravatar...
Can you pls send me the code
Left by DG Beginner on Dec 03, 2007 9:57 AM

# re: Scouting around the cells in an ASP.NET DataGrid using JavaScript
Requesting Gravatar...
Can you pls send me the code for testing
Left by DG Beginner on Dec 03, 2007 9:58 AM

# re: Scouting around the cells in an ASP.NET DataGrid using JavaScript
Requesting Gravatar...
no comments. only for testing .
How i should display html taga in the datagrid's cell in asp.net 1.1
Left by <manas> on Jun 19, 2008 8:50 PM

# re: Scouting around the cells in an ASP.NET DataGrid using JavaScript
Requesting Gravatar...
html taga in the datagrid's cell in asp.net
Left by Tiffany co Necklaces on Oct 17, 2009 11:57 PM

# re: Scouting around the cells in an ASP.NET DataGrid using JavaScript
Requesting Gravatar...
I have a Tranny that goes into "limp Mode" after about 80 miles of local driving.
Left by DDos Protection on Nov 06, 2009 8:52 PM

# re: Scouting around the cells in an ASP.NET DataGrid using JavaScript
Requesting Gravatar...
I would love to know how you put in the drop down lists on datagrid in edit mode.
Left by ed hardy clothing on Apr 10, 2010 1:37 PM

Your comment:
 (will show your gravatar)


Copyright © Lorin Thwaits | Powered by: GeeksWithBlogs.net