Wrox Programmer Forums
Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 2.0 > ASP.NET 2.0 Basics
|
ASP.NET 2.0 Basics If you are new to ASP or ASP.NET programming with version 2.0, this is the forum to begin asking questions. Please also see the Visual Web Developer 2005 forum.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the ASP.NET 2.0 Basics section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old February 3rd, 2006, 11:40 PM
Authorized User
 
Join Date: Jan 2006
Posts: 91
Thanks: 0
Thanked 0 Times in 0 Posts
Default Identify physical position of row in gridview

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!
 
Old February 4th, 2006, 05:04 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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.
 
Old February 4th, 2006, 12:20 PM
Authorized User
 
Join Date: Jan 2006
Posts: 91
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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!
 
Old February 4th, 2006, 12:36 PM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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.
 
Old February 7th, 2006, 08:38 PM
Authorized User
 
Join Date: Jan 2006
Posts: 91
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks for your input. I'll put that in my kitbag...should be using it soon.
 
Old February 9th, 2006, 08:15 PM
Authorized User
 
Join Date: Jan 2006
Posts: 91
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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!
 
Old February 10th, 2006, 04:28 PM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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:
Code:
<!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>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="Row2">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="Row3">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="Row4">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="Row5">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="Row6">
    <td>&nbsp;</td>
    <td>&nbsp;</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.
 
Old February 10th, 2006, 09:28 PM
Authorized User
 
Join Date: Jan 2006
Posts: 91
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.
 
Old February 11th, 2006, 05:22 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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.
 
Old February 11th, 2006, 05:43 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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.
Code:
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.





Similar Threads
Thread Thread Starter Forum Replies Last Post
change position of New Record row? Kimber Access VBA 3 June 27th, 2008 07:10 AM
Gridview with only one row mallikalapati ASP.NET 2.0 Professional 0 February 25th, 2008 06:46 AM
SSTab row position dthrun VB How-To 3 March 30th, 2007 11:02 PM
Changing row position of gridview at runtime rameshsamiappan ASP.NET 2.0 Basics 0 September 25th, 2006 10:02 AM
Line/Row Position jmss66 Classic ASP Databases 7 July 28th, 2003 07:56 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.