Remember which row was made visible with JavaScript

Posted on 2011-02-15
Last Modified: 2012-06-27

not sure whether to post this in the JavaScript section or here.  Anyways, here it goes.

I have a gridView nested inside a GridView. The child gridView has been embedded inside a div tag.  I have written a JavaScript that toggles the visiblity of the div tag on or off.  That works fine.  However, when the page is posting back, the currently visible tag become invisible again.  How can I make "remember" the currently visible div tag.  


Question by:yechan
  • 2
  • 2
LVL 10

Expert Comment

ID: 34902793
Place a hidden field somewhere on your page, probably at the top of the gridview.

<asp:HiddenField ID="hfSelectedRow" runat="server" value="-1" />

In your whenever you use javascript to make a div visable, update this hiddenfield with the row number.


Then on postback have javascript that runs to check if the hidden field holds a value greater than -1, and if it does then make that div visible.

       if ($('#hfSelectedRow').val() > -1)
               $('#NestedDiv' + $('#hfSelectedRow').val()).attr('display', inline);

You get the idea.

Author Comment

ID: 34906838
Good morning,

thank you very much for your response.  If I am not mistaken that's jQuery syntax that you have.  I don't think the marines will allow me to install jQuery library will let me install the the library or make a reference to it.  I have much of it converted into "regular" javascript.  Need additional assistance on how to convert the following into non-jQuery syntax

$('#NestedDiv' + $('#hfSelectedRow').val()).attr('display', inline);

LVL 10

Accepted Solution

P1ST0LPETE earned 500 total points
ID: 34908408
Sorry, I was hesitant when I wrote the script to not use jQuery, but it's used so often these days I went ahead and did it anyway.  Anyway, below is the same script using standard JavaScript.

Note: In both the jQuery above and the script below, I am assuming that the ID's on your <div> tags that you are trying to hide/show are named "NestedDiv1" "NestedDiv2" "NestedDiv3", etc. with the number at the end of the ID corresponding with the grid row that it is in.

Here is the specific line you wanted:

document.getElementById('NestedDiv' + selectedRow).style.display = 'inline';

And here is the standard JavaScript version of the jQuery posted in my original post:

window.onload = function ()
    var selectedRow = document.getElementById('hfSelectedRow').value;

    if (selectedRow > -1)
        document.getElementById('NestedDiv' + selectedRow).style.display = 'inline';

To hide the div you can use:    style.display = 'none'

Author Comment

ID: 34908818
This is beautiful.

thank you.

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
SSRS ReportViewer report timeout 7 105
Syntax error 9 45
Interview questions for support of a legacy ASP.NET site 4 40
Code works but it's slow 24 45
Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
In this Article, I will provide a few tips in problem and solution manner. Opening an ASPX page in Visual studio 2003 is very slow. To make it fast, please do follow below steps:   Open the Solution/Project. Right click the ASPX file to b…
Migrating to Microsoft Office 365 is becoming increasingly popular for organizations both large and small. If you have made the leap to Microsoft’s cloud platform, you know that you will need to create a corporate email signature for your Office 365…
Internet Business Fax to Email Made Easy - With  eFax Corporate (, you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, f…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

27 Experts available now in Live!

Get 1:1 Help Now