ASP.NET Show/Hide Sections in a Datagrid row.

Question

Hi All,

I have a datagrid where each row has information on Employees in a company. I would like to allow each row the ability to show/hide extra information. My first idea was use the CollapsiblePanelExtender from the AJAX toolkit and have each row like this:

<ajaxtoolkit:collapsiblepanelextender
     TargetControlID="panel2">
     ExpandControlID="LinkButton1"
     CollapseControlID="LinkButton1">
</ajaxtoolkit:collapsiblepanelextender>

<asp:panel>
    FirstName | LastName | Phone | Email
    <LinkButton1>  <- this hides/show extra info in panel2
</asp:panel>

<asp:panel2>
     <textbox ="FirstName">
     <textbox ="LastName">
     <textbox ="EmailName">
     ...
     ...lots of textboxes where information is assigned from the database.
</asp:panel2>

This works very well but it can be computationally expensive. The extra information panel has a lot of textboxes/labels, all of which gets its values from the database. Everytime the page loads all the data is got from the database at the start, some of it is hidden.

Is there a better way to achieve my goal? Or is there a way to only load an employees extra details when the Show/Hide button is click?

Thanks in advance!

Answer 1

I´ve done something like this but with a ModalPopupExtender. I had a panel with textboxes and labels, that retrieve information only when the user pushes over an imagebutton. In this example, the imagebutton was in a GridViewRow, and the key for retrieving data was in the DataKeys properties of the Row.

GridViewRow row = ((GridViewRow)((ImageButton)sender).NamingContainer);
//NamingContainer return the container that the control sits in
DataKey key = ((GridView)row.NamingContainer).DataKeys[row.RowIndex];

//Retrieve data with a server method. It can be with wathever you want, I use an ArrayList
ArrayList AL=Domain.GetCustomerData(key[0].ToString());

//Fill controls with data, 
LblDate.Text = AL[0].ToString();
dLectHidro.Value = AL[1].ToString();
idLectHL.Value = AL[2].ToString();
LblEstacion.Text = HttpUtility.HtmlDecode(AL[3].ToString());
TxtLluvia.Text = HttpUtility.HtmlDecode(AL[4].ToString());
TxtLluvia1.Text = HttpUtility.HtmlDecode(AL[5].ToString());

//Show the popup
this.ModalPopupModif.Show();

Hope this helps. Claudia