|
Subject:
|
Identify physical position of row in gridview
|
|
Posted By:
|
wirerider
|
Post Date:
|
2/3/2006 10:40:35 PM
|
I'm looking at the option of selecting a gridview row (using the built in select button) and popping up a context menu to select from a set of actions. Purpose is to save footprint on the page, and help the user maintain focus on the data.
How might it be possible to identify the relative physical position of the selected row within the sub-page window (possibly a user control) where the gridview resides? Purpose is to be able to position the pop-up context menu to interfere the least with reading the record.
There are lots of alt's if I can't get this to work, but I'd like to have the option, if it's possible.
Any guidance on this would be appreciated.
Thanks!
|
|
Reply By:
|
Imar
|
Reply Date:
|
2/4/2006 4:04:22 AM
|
Maybe you're better off posting this in one of the JavaScript forums.
I think it's much closer to that as you probably need to find out the location of the row using client side JavaScript....
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
|
|
Reply By:
|
wirerider
|
Reply Date:
|
2/4/2006 11:20:16 AM
|
Thanks for the suggestion. Before I head off that way, thought, I'm wondering, how javascript is going to know about specific rows inside in the gridview. Any thoughts about general approaches there?
Thanks!
|
|
Reply By:
|
Imar
|
Reply Date:
|
2/4/2006 11:36:21 AM
|
JavaScript can be used to determine what element was clicked. You can then get that element's ID so you now what row was clicked. When you then store that ID in a hidden field, and submit the page using .NET submit functions, you can read out that ID at the server...
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
|
|
Reply By:
|
wirerider
|
Reply Date:
|
2/7/2006 7:38:31 PM
|
Thanks for your input. I'll put that in my kitbag...should be using it soon.
|
|
Reply By:
|
wirerider
|
Reply Date:
|
2/9/2006 7:15:16 PM
|
I think I see how this might be done in javascript, by counting rows and knowing row heights. This might be complicated by the fact that I'm going to be scrolling the gridview records. So a question that comes to mind is:
Do the state properties "DataKeyNames" and "DataKeys" for the Gridview contain the values of gridview rows that are visible in the scrolled region, or of the rows that have been sent to the client for display (as in a page) independent of the scroll position. (I suspect the latter, but thought I would ask an expert!)
Thanks!
|
|
Reply By:
|
Imar
|
Reply Date:
|
2/10/2006 3:28:21 PM
|
You don't have to count rows, you don't have to know the height of a row and you don't have to keep track of scrolling.
All you need to do is give each row a unique Client Id (by reusing the DataKeyNames of your GridView) and use the following bit of JavaScript:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function DoAlert(e)
{
alert(e.id);
}
function InitializeTable()
{
if (document.getElementById)
{
var tds = document.getElementById("MyTable").getElementsByTagName("tr");
for (i=0; i < tds.length; i++)
{
node = tds[i];
if (node.nodeName.toLowerCase() == "tr")
{
node.onclick = function()
{
DoAlert(this);
}
}
}
}
}
</script>
</head>
<body onload="InitializeTable();">
<table width="200" border="1" id="MyTable">
<tr id="Row1">
<td> </td>
<td> </td>
</tr>
<tr id="Row2">
<td> </td>
<td> </td>
</tr>
<tr id="Row3">
<td> </td>
<td> </td>
</tr>
<tr id="Row4">
<td> </td>
<td> </td>
</tr>
<tr id="Row5">
<td> </td>
<td> </td>
</tr>
<tr id="Row6">
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
This code sets up onclick handlers for each row in the table dynamically. Then, in the DoAlert it alerts the Id of the row.
Instead of alerting it, you can store it in a hidden field so it's available on the next post back.
HtH,
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
|
|
Reply By:
|
wirerider
|
Reply Date:
|
2/10/2006 8:28:31 PM
|
Thanks for your message. Perhaps I'm not understanding your suggestion. The initial objective was to cause a pop-up context menu to appear on the screen, in some physical proximity to a Gridview record that was just selected. I appreciate that the technique you described can identify the row to the system. I'm not how to turn that into the "left", "top" coordinates that need to be fed into the algorithm that's going to position the pop-up menu.
It seems that there has to be a translation of some kind between the logical identity and relative position of the row, as the system sees it, to the physical position of the row, as it is viewed by the user. Even if the logical row id could be used to capture through style properties of left and top within the table, or the table's div or panel, the physical appearance would still depend on the scrolling position (which, I learned, can be easily had...
However, in my newbie-ness, I could be missing something there, or in your suggestion.
|
|
Reply By:
|
Imar
|
Reply Date:
|
2/11/2006 4:22:07 AM
|
The idea is that once you have a reference to the row that caused the event (in this case, onclick, but others are possible as well) you have everything you need.
In this example, I just alert the row's Id. However, you can also use it to retrieve information about its InnerHtml and other css properties.
Since the Id of the row maps to the primary key for the record in the database, you also know which "database item" was clicked, and at what location. Isn't that all you need?
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
|
|
Reply By:
|
Imar
|
Reply Date:
|
2/11/2006 4:43:05 AM
|
To make things a bit clearer, the following function shows the primary key of the GridView row that was clicked, and the mouse coordinates of the location where you clicked.function DoAlert(e)
{
var posx = 0;
var posy = 0;
var orgObject = window.event;
if (orgObject.pageX || orgObject.pageY)
{
posx = orgObject.pageX;
posy = orgObject.pageY;
}
else if (orgObject.clientX || orgObject.clientY)
{
posx = orgObject.clientX + document.body.scrollLeft;
posy = orgObject.clientY + document.body.scrollTop;
}
alert('GridView row with primary key ' + e.id + ' clicked');
alert('Mouse cursor position at at X: ' + posx + ' Y: ' + posy);
}I think that's enough info to display a right click menu for the relevant row, isn't it?
Maybe it's better to take this to the JavaScript forum as I suggested earlier. It's a lot more about JavaScript now than it is about ASP.NET 2....
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
|
|
Reply By:
|
wirerider
|
Reply Date:
|
2/11/2006 11:38:28 AM
|
Imar,
Thanks for your response. I think I get it now. It's my newbie-ness that caused the problem...being un-familiar with the "space" in which all this is happening, I did not see that at the time you are processing the "select" click, you can immediately inspect the mouse X,Y properties, which will be persistent since their last setting (here I'm making an assumption...but it makes sense: the mouse event just happened). That connects the dots...I'll run some detailed tests on this. I agree this is now a javascript questinon, and I'll pursue any remainining details there. Thanks for your patience and perserverance on this!
|
|
Reply By:
|
jameslin288@yahoo.com
|
Reply Date:
|
10/30/2006 8:21:47 PM
|
quote:
Originally posted by wirerider
Imar,
Thanks for your response. I think I get it now. It's my newbie-ness that caused the problem...being un-familiar with the "space" in which all this is happening, I did not see that at the time you are processing the "select" click, you can immediately inspect the mouse X,Y properties, which will be persistent since their last setting (here I'm making an assumption...but it makes sense: the mouse event just happened). That connects the dots...I'll run some detailed tests on this. I agree this is now a javascript questinon, and I'll pursue any remainining details there. Thanks for your patience and perserverance on this!
|
|
Reply By:
|
jameslin288@yahoo.com
|
Reply Date:
|
10/30/2006 8:34:30 PM
|
The was very helpful. But how does the JavaScript OnChange() event of Row3Column1 change the value of Row3Column2 to Row3Column1 * 2 in GridView. In other words, if I change the value in a cell Row5Column1, the Row5Column2 will automatically change to Row5Column1 *2.
Thx,
James
|
|
Reply By:
|
Imar
|
Reply Date:
|
10/31/2006 12:53:34 PM
|
Hi James,
I am not sure what you're asking. Are you trying to update a textbox with a calculation based on another textbox?
If so, you need to get a reference to the textboxes using document.getElementById for example. Or, in the client side onchange of the textbox fire a custom function and pass it this as a reference to the text box.
I think I need more info to be able to give you a better answer. And, maybe just like the OP, you're better off in one of the JavaScript forums here at p2p.wrox.com
Cheers,
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Want to be my colleague? Then check out this post.
|
