Temporary Gridviews to mimic a "pop up" window in ASP.net

Lets say for example you have some data you want to show your users that is small by nature, like a list of items or a list of names. And lets say the user should control as to how they view the data (like sorting by column headings) and be able to dismiss (hide it) the data when no longer required.

Sounds like a pop-up screen doesn't it? Well it could be, but in this case it is not necessary because programming pop-up screens in ASP.net is fraught with hours of frustration unless you use AjaxControls or jQuery or some other fancy plugin.

By nature an ASP.net website is "flat" and so things like pop-ups are actually another flat page overlaid over the previous page.

This is an example of where you can quickly create a GridView control with data from your database, to show some information, and allow users to hide that information when no longer needed. It's simple, to the point and it works!

One of the biggest problems with Gridviews that rely on database binding and parameters, is how to pass the true and correct values into the parameters for the SQL to return some data. Many times I've seen developers design their Gridviews, with nice formatting and layouts, but the whole thing comes stuck when linking it to a datasource (<asp:SqlDataSource> to be exact). But that's another story!

We'll explore a simple way to place a gridview on your website, write some fancy code-behind (C#) to bind the datasource the way *we want* and how to hide and display it using a simple link (<asp:linkbutton> actually).

First lets drop a gridview (you can ignore the formating if you wish) ...

<asp:GridView ID="myGV" runat="server" AllowPaging="False" AllowSorting="False" AutoGenerateColumns="False"
    CellPadding="2" ForeColor="#333333" GridLines="None">
    <RowStyle BackColor="#EFF3FB" />
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <EditRowStyle BackColor="#2461BF" />
    <AlternatingRowStyle BackColor="White" />
    <Columns>
        <asp:BoundField DataField="StudentPreferredName" HeaderText="Preferred Name" />
        <asp:BoundField DataField="StudentFamilyName" HeaderText="Surname" />
    </Columns>
</asp:GridView> 
 
Now lets drop a couple of link buttons. One to fire up the gridview and the other to hide it ...
 
To show it ...

 
<asp:LinkButton ID="labShowList" runat="server" Text="Show List" OnClick="labShowList_Click" Visible="true"></asp:LinkButton>
 
To hide it ... 
 
<asp:LinkButton ID="labHideList" runat="server" Text="Hide List" OnClick="labHideList_Click" Visible="false"></asp:LinkButton> 
 
Note the predefined visible properties. One is set to true and the other is set to false. The first link will always be visible to allow users to show the gridview in the first place
and the other is set to false, because we only want to hide the gridview after it's been displayed. 
Note also the gridview does not have a direct link to any datasource. This is deliberate because we want to control this at the back end only when the user clicks the link button
to show the gridview. There is no point showing the link AND the gridview at the same time (unless that's what you really want to achieve).

Now lets look at some of the code behind the scenes ...
 
 
protected void labShowList_Click(object sender, EventArgs e)
{
    //You may not need this line of code, but it's usefil to find the 
    //gridview control we created above, so it can be used in code below.
    GridView dvStudentsExpected = (GridView)dvUnit.FindControl("dvStudentsExpected"); 
 
    //test if the gridview exists! Meh.. I like to test everything 
    if (dvStudentsExpected != null)
    {
        String strSQL = "SELECT <put your SQL command here>";
        SqlConnection cnn = new SqlConnection("<<put your connection strin to the database here>>");
        cnn.Open();
        SqlCommand cmd = new SqlCommand(strSQL, cnn);
 
        cmd.CommandTimeout = 1500; //for debugging more than anything
        cmd.Parameters.Add("@myParm1", SqlDbType.VarChar).Value = <<what ever value you need to search by>>;
        cmd.Parameters.Add("@myParm2", ... etc

        //Note: Cannot use SqlReader with a gridview as readers are forward only.
        //You have to use a dataset and dataadapter to load the data to the gridview as a whole. 
 
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        da.Fill(ds);

        //test if anything was returned from the query. Otherwise do nothing
        if (ds.Tables[0].Rows.Count > 0)
        {
            //Find the Hide List link and if found, show it or hide it if not found
            LinkButton lb = (LinkButton)dvUnit.FindControl("labHideList");
            if (lb != null)
                lb.Visible = true;
            else 
                lb.Visible = false;

            //bind the data to the gridview and "pop up" the gridview
            dvStudentsExpected.DataSource = ds;
            dvStudentsExpected.DataBind();
            dvStudentsExpected.Visible = true;
        }

        //clean up
        ds.Dispose();
        da.Dispose();
        cnn.Close();
    }
} 
 
So you can see from the above code that we are controlling the datasource ourselves, we are controlling what parameters to feed into the SQL command
and we are controlling when to display the gridview. 

Now we need code to manage hiding the gridview from the users when they no longer need it.

protected void labHideList_Click(object sender, EventArgs e)
{
    //find the Students Expected gridview
    GridView dvStudentsExpected = (GridView)<<whatever control you need to find it in>>.FindControl("dvStudentsExpected");
 
    if (dvStudentsExpected != null)
    {
        //hide the gridview of students
        dvStudentsExpected.Visible = false;

        //hide the link itself
        LinkButton lb = (LinkButton)dvUnit.FindControl("labHideList");
        if (lb != null)
            lb.Visible = false;
    }
} 
 
And that's really all to it.

Conclusion: 

You saw how to define a gridview, how to control the data source required for it to display something, how to create a link to hide it and one to show it.

Comments