Using client script on GridView's SelectedIndexChanged event

Question

Here is the code behind:

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
    DetailsView1.Visible = true;
    string csName = "showDetails";
    StringBuilder sb = new StringBuilder();
    sb.Append("document.getElementById('div_detailsView').style.display = 'block';");
    sb.Append("document.getElementById('overlay').style.display = 'block';");
    if (!ClientScript.IsClientScriptBlockRegistered(csName))
    {
        ClientScript.RegisterClientScriptBlock(this.GetType(), csName, sb.ToString(), true);
    }
    Response.Write(GridView1.SelectedIndex + "<br>");
}

Here is the structure of my aspx page

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Summary.aspx.cs" Inherits="Summary" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server"></asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <div>
         <!-- Grid View Control placed here -->
    </div>
    <div id="div_detailsView">
          <!-- Details View Control placed here -->
    </div>
    <div id="overlay"></div>
</asp:Content>

My intention is to create Lightbox/Graybox kinda effect where we have the DetailsView control placed in the central box of screen while the background grayed out. I am trying the css approach here and using js code should be very minimal.

But for some reason, I keep getting document.getElementByID("div_detailsView") is null error. I don't know why I can't execute the client script in this case. Could anyone give me a hand please? Thanks.

Answer 1

It is possible that script is invoked before page is fully loaded. Try using RegisterStartupScript instead.