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:
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!