ok, so I have a gridview with a panel inside of it. the panel has the complete details of a particular gridviewrow, and you can only see them when you click on an image for that row. AJAX is used with a popupControlExtender to show this details panel. Here is the markup for this gridview...
<asp:UpdatePanel runat="server" ID="upCalls" >
<ContentTemplate>
<asp:GridView runat="server" ID="grdCalls" AllowPaging="false" PageSize="25" AutoGenerateColumns="False"
CssClass="standardGridview" AllowSorting="true" CellPadding="2" ForeColor="#333333" GridLines="Vertical"
RowStyle-HorizontalAlign="Center" AlternatingRowStyle-HorizontalAlign="Center">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Image runat="server" ID="imgDetails" CssClass="center" ImageUrl="images/details.gif" />
<cc1:PopupControlExtender ID="pceDetails" runat="server" TargetControlID="imgDetails" PopupControlID="pnlDetails" OffsetX="20" OffsetY="10" BehaviorID=""/>
<asp:panel runat="server" id="pnlDetails" CssClass="reportDetails">
<div class="top"></div>
<div class="middle">
<div class="row">
<div class="label">Customer Name:</div>
<div class="value"><asp:Label runat="server" ID="lblCustomerName" Text='<%# Bind("CustomerName") %>' /></div>
</div>
<div class="row">
<div class="label">Customer Phone:</div>
<div class="value"><asp:Label runat="server" ID="Label1" Text='<%# Bind("CustomerPhoneNumber") %>' /></div>
</div>
<div class="row">
<div class="label">TSR:</div>
<div class="value"><asp:Label runat="server" ID="Label2" Text='<%# Bind("TSRNumber") %>' /></div>
</div>
<div class="row">
<div class="label">Agent:</div>
<div class="value"><asp:Label runat="server" ID="Label3" Text='<%# Bind("UserName") %>' /></div>
</div>
<div class="row">
<div class="label">Cat Call ID:</div>
<div class="value"><asp:Label runat="server" ID="Label4" Text='<%# Bind("CatCallID") %>' /></div>
</div>
<div class="row">
<div class="label">Loan Purpose:</div>
<div class="value"><asp:Label runat="server" ID="Label5" Text='<%# Bind("LoanPurposeName") %>' /></div>
</div>
<div class="row">
<div class="label">Application ID:</div>
<div class="value"><asp:Label runat="server" ID="Label6" Text='<%# Bind("LoanApplicationID") %>' /></div>
</div>
<div class="row">
<div class="label">Reservation #:</div>
<div class="value"><asp:Label runat="server" ID="Label7" Text='<%# Bind("ReservationNumber") %>' /></div>
</div>
<div class="row">
<div class="label">Call Started:</div>
<div class="value"><asp:Label runat="server" ID="Label8" Text='<%# Bind("StartTime") %>' /></div>
</div>
<div class="row">
<div class="label">Call Ended:</div>
<div class="value"><asp:Label runat="server" ID="Label9" Text='<%# Bind("EndTime") %>' /></div>
</div>
<div class="row">
<div class="label">Call Length:</div>
<div class="value"><asp:Label runat="server" ID="Label10" Text='<%# Bind("CallLength") %>' /></div>
</div>
<div class="row">
<div class="label">Disposition:</div>
<div class="value"><asp:Label runat="server" ID="Label11" Text='<%# Bind("DispositionName") %>' /></div>
</div>
<div class="row">
<div class="label">Inbound Callback?:</div>
<div class="value"><asp:Label runat="server" ID="Label12" Text='<%# Bind("IsInCallBack") %>' /></div>
</div>
<div class="row">
<div class="label">Outbound Callback?:</div>
<div class="value"><asp:Label runat="server" ID="Label13" Text='<%# Bind("IsOutCallBack") %>' /></div>
</div>
<div class="row">
<div class="label">Spanish?:</div>
<div class="value"><asp:Label runat="server" ID="Label14" Text='<%# Bind("IsSpanish") %>' /></div>
</div>
<div class="row">
<div class="label">Notes:</div>
<div class="value"><asp:Label runat="server" ID="Label15" Text='<%# Bind("Notes") %>' CssClass="notes" /></div>
</div>
</div>
<div class="bottom"></div>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="StartTime" HeaderText="Call Start" DataFormatString="{0:HH:mm MM/d/yy}" SortExpression="StartTime" />
<asp:TemplateField HeaderText="Call Type" SortExpression="CallType">
<ItemTemplate>
<asp:Label runat="server" ID="lblCallType" Text='<%# Bind("CallTypeName") %>' CssClass="center" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Disposition" SortExpression="Disposition">
<ItemTemplate>
<asp:Label runat="server" ID="lblTSRNumber" Text='<%# Bind("DispositionName") %>' CssClass="center" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="LoanApplicationID" HeaderText="Application ID" />
<asp:BoundField DataField="ReservationNumber" HeaderText="Reservation" SortExpression="Reservation" />
<asp:BoundField DataField="LoanPurposeName" HeaderText="Loan Purpose" />
<asp:BoundField DataField="TSRNumber" HeaderText="TSR" />
<asp:BoundField DataField="UserName" HeaderText="Agent" SortExpression="UserLastName" />
<asp:BoundField DataField="CallLength" HeaderText="Call Length" />
<asp:TemplateField HeaderText="Spn">
<ItemTemplate>
<div>
<asp:Label runat="server" ID="lblSpanish" />
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Out">
<ItemTemplate>
<div>
<asp:Label runat="server" ID="lblOutCB" />
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="In">
<ItemTemplate>
<div>
<asp:Label runat="server" ID="lblInCB" />
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Notes">
<ItemTemplate>
<div class="NotesField">
<asp:Label runat="server" ID="lblNotes" ToolTip='<%# Bind("Notes") %>' />
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerStyle BackColor="white" ForeColor="#0074bc" HorizontalAlign="Center" Font-Size="11pt" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#0074bc" Font-Bold="True" ForeColor="White" />
<FooterStyle BackColor="#0074bc" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#ee7733" />
<AlternatingRowStyle BackColor="White" />
<RowStyle BackColor="#E3EAEB" />
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="grdCalls" EventName="Sorting" />
</Triggers>
</asp:UpdatePanel>
As you can probably tell, the panel is very large and when the gridview databinds, it takes forever since a typical resultlist can contain upward of 1000 results. Is there a better way of doing this (efficiency wise)? I really don't need every single record rendering this panel at runtime, is there an efficient way to find the details upon clicking the image?