Click here to Skip to main content
11,634,796 members (68,758 online)
Click here to Skip to main content

Expandable panel inside a GridView

, 28 Sep 2008 CPOL 179.5K 10.2K 197
Rate this:
Please Sign up or sign in to vote.
Another way to expand a detail panel inside a GridView.

Introduction

A few weeks ago, a client asked me: "We need a simple listing, and we need to click and see details, inside the listing - not a pop-up - not another page - not reloading the entire page". I started to search, read, test. I found some interesting articles and samples, but not exactly what my client wanted. Then, I thought: I can merge some solutions and, maybe, satisfy the customer. The AJAX DynamicPopulate extender offers the mechanism. Let's open the sources and learn. Some interesting articles present some good ideas. Let's read and learn.

I would like to share the results of that work in this article.

You can see the sample project running (with simulated data only) here.

Background

When the AJAX DynamicPopulate extender is started, it calls a method on some page or web service, receives some results, and fills a control.

We can use a JavaScript function to start the extender, and we can capture the results and fill another control. The JavaScript function is activated when the user clicks the button, in the first column of the grid.

Using the Code

The main page has a GridView with three columns: an image that mimics a button to show and hide details, the name of the store, and the sum of the sales value.

The scenario is the Adventure Works Cycles, the fictitious large, multinational manufacturing company. The grid shows the top stores. When the user clicks a button, a panel is expanded and the top five models are displayed.

The onclick event of the image/button calls a JavaScript function (ExpandModels) with these parameters: customer ID, row of the grid view, destination panel, and the button clicked.

// Default.aspx.cs :
protected void gridStores_RowDataBound(object sender, GridViewRowEventArgs e) {
...
Image btn = gridViewRow.FindControl("imgModel") as Image;

btn.Attributes["onClick"] = String.Format(CultureInfo.InvariantCulture,
    "ExpandModels('{0}', '{1}', '{2}', '{3}');",
    contextKey,             // customerID + some data
    newRow.ClientID,        // Row of gridview, below the row that was clicked
    internalPanel.ClientID, // Destination panel, wich will receive the details
    btn.ClientID);          // The clicked button
...
}

The JavaScript function ExpandModels does some preparations, and starts the populate method of the 'behavior' dpBehaviorMod of the DynamicPopulate extender, passing the customer ID. The 'behavior' will send a callback to the WebMethod ExpandModelsService, which will build an HTML table and send it back to the browser.

// ExpandPanel.js :
var expPainelId    = '';  // ID of the internal panel where the details will be inserted
var expPainelAuxId = 'painelAux';  // Receives the results from the WebMethod

function ExpandModels(customerId, trId, painelId, buttonId) {
...
var tr = $get(trId).style;
tr.display='block';                         // Shows the panel ('table-row' for Firefox)
lastBehavior = $find('dpBehaviorMod');
expPainelId = painelId;
lastBehavior.add_populated(ShowTopModels);  // Sets the handle
lastBehavior.populate(customerId);          // Calls the WebMethod
}

<!-- Default.aspx -->
<cc1:DynamicPopulateExtender ID="dinPopMod"
                             runat="server"
                             BehaviorID="dpBehaviorMod"
                             CacheDynamicResults="false"
                             ClearContentsDuringUpdate="true"
                             EnableViewState="False"
                             ServiceMethod="ExpandModelsService"
                             TargetControlID="painelAux">
</cc1:DynamicPopulateExtender>

When the extender returns, it fills the auxiliary panel 'painelAux' (indicated by the property TargetControlID), then another JavaScript function (ShowTopModels) copies the result into the destination panel. The panel ID is saved in the variable expPainelId by the function ExpandModels.

// ExpandPanel.js :
function ShowTopModels(s, e) {
    // The internal panel where the details will be inserted
    var p1 = $get(expPainelId);
    // The aux panel filled by the DynamicPopulateExtender
    var p2 = $get(expPainelAuxId);
    ...
    // Details HTML table
    p1.innerHTML = p2.innerHTML;
    ...
}

Inside the web method, the program builds a simple HTML table with the details.

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static string ExpandModelsService(string contextKey) {
...
    StringBuilder sb = new StringBuilder("<table class = 'tab-mod'> \n"
    + "<tr> \n"
    + "<th>Model</th> \n"
    + "<th>Qty</th> \n"
    + "<th>Total price</th> \n"
    + "<th>Last sale</th> \n"
    + "</tr> \n",
    topModels.Count * 180);
...
    sb.Append("<tr> \n");
    sb.AppendFormat(CultureInfo.CurrentCulture,
        "<td>{0}</td> ",
        modelRow.Name);
...
    sb.Append("</table> \n");

    return sb.ToString();
}

The above code snippets were extracted from the sample project and simplified. The full source code is available for download.

Points of Interest

When the page is sent to the browser, only the main listing will be sent (stores). The models will be sent dynamically when the user clicks the button on each row. We could use another approach to load all the data during the first time and hide/show at the onclick event. That approach could cause a long time to load the entire page.

The 'loading.gif' file is pre-loaded by the panel 'painelAux', to speed the display when the user clicks the button.

I included the WebMethod ExpandModelsService inside 'Default.aspx'. If the project contains a lot of WebMethods, we can create one or more 'asmx' files to help us to organize the project.

Conclusion

If this article can help you in any form, I will be happy.

Certainly, you can find many mistakes, bugs, and not-so-good code in the sample project. I thank you in advance for tips, suggestions, and corrections.

References

There are many good articles already written on this subject:

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

AmauriRodrigues
Software Developer Ápex Logik D'ata
Brazil Brazil
Born and lives in São Paulo - Brasil.
Programmer since 1982, and in 'tailor' mode since 1995, I had the oportunity to work for many kinds of business.
Today I create Windows Forms applications, Web projects and Palm OS applications.
My experience :
Languages : Cobol, Fortran, Basic, Clipper, Turbo Pascal, Data Flex, C, C++, Turbo C++, Borland C++ Builder, C#, Javascript.
DBMS : Adabas, DBF, Paradox, MS Access, DB2, Oracle, MS SQL Server.
I Know and experienced a little : Natural, Prolog, Lisp, Assembly IBM/370, Assembly Z80, Assembly 8080, MS Visual Basic (5/6).

You may also be interested in...

Comments and Discussions

 
QuestionMaintain expanded state on refresh Pin
keishii13-Jan-15 22:04
memberkeishii13-Jan-15 22:04 
AnswerRe: Maintain expanded state on refresh Pin
AmauriRodrigues14-Jan-15 0:02
memberAmauriRodrigues14-Jan-15 0:02 
GeneralRe: Maintain expanded state on refresh Pin
keishii14-Jan-15 2:40
memberkeishii14-Jan-15 2:40 
GeneralRe: Maintain expanded state on refresh Pin
AmauriRodrigues14-Jan-15 23:53
memberAmauriRodrigues14-Jan-15 23:53 
Questionhow to open the source code in vs2012 professional? Pin
Member 1081471713-Jan-15 10:03
memberMember 1081471713-Jan-15 10:03 
AnswerRe: how to open the source code in vs2012 professional? Pin
AmauriRodrigues13-Jan-15 23:59
memberAmauriRodrigues13-Jan-15 23:59 
QuestionGridview compilation-time creation Pin
Member 1092489118-Sep-14 2:56
memberMember 1092489118-Sep-14 2:56 
AnswerRe: Gridview compilation-time creation Pin
AmauriRodrigues18-Sep-14 3:14
memberAmauriRodrigues18-Sep-14 3:14 
QuestionWon't animate when running on server Pin
bits&bytes26-Dec-13 20:03
memberbits&bytes26-Dec-13 20:03 
QuestionElegant Solution - One question on retrieving data Pin
bits&bytes23-Dec-13 21:01
memberbits&bytes23-Dec-13 21:01 
QuestionWeb Service not firing Pin
jenrenee20-Sep-13 4:48
memberjenrenee20-Sep-13 4:48 
SuggestionSub-grid data isn't cached. Pin
Mr. Truong Pham27-Mar-13 18:17
memberMr. Truong Pham27-Mar-13 18:17 
GeneralRe: Sub-grid data isn't cached. Pin
venkatesun29-May-13 2:23
membervenkatesun29-May-13 2:23 
GeneralRe: Sub-grid data isn't cached. Pin
Pham Dinh Truong1-Jun-13 1:32
memberPham Dinh Truong1-Jun-13 1:32 
QuestionWant to expand multiple row Pin
Mustufa13-Mar-13 20:41
memberMustufa13-Mar-13 20:41 
AnswerRe: Want to expand multiple row Pin
AmauriRodrigues15-Mar-13 11:15
memberAmauriRodrigues15-Mar-13 11:15 
QuestionWant to expand multiple row Pin
Mustufa13-Mar-13 20:36
memberMustufa13-Mar-13 20:36 
QuestionScriptManager doesn't respond when a postback occurs Pin
Mr. Truong Pham31-Jan-13 17:50
memberMr. Truong Pham31-Jan-13 17:50 
AnswerRe: ScriptManager doesn't respond when a postback occurs Pin
AmauriRodrigues15-Mar-13 11:09
memberAmauriRodrigues15-Mar-13 11:09 
GeneralRe: ScriptManager doesn't respond when a postback occurs Pin
venkatesun14-May-13 1:27
membervenkatesun14-May-13 1:27 
GeneralRe: ScriptManager doesn't respond when a postback occurs Pin
venkatesun14-May-13 23:45
membervenkatesun14-May-13 23:45 
GeneralRe: ScriptManager doesn't respond when a postback occurs Pin
venkatesun15-May-13 2:57
membervenkatesun15-May-13 2:57 
QuestionIt doesn't work in Chrome Pin
Mr. Truong Pham31-Jan-13 17:41
memberMr. Truong Pham31-Jan-13 17:41 
AnswerRe: It doesn't work in Chrome Pin
AmauriRodrigues15-Mar-13 11:09
memberAmauriRodrigues15-Mar-13 11:09 
AnswerRe: It doesn't work in Chrome Pin
Member 1091156319-Sep-14 23:19
memberMember 1091156319-Sep-14 23:19 
SuggestionA very important detail for VS2010 users Pin
MarkyMarc21-Nov-12 2:23
memberMarkyMarc21-Nov-12 2:23 
GeneralRe: A very important detail for VS2010 users Pin
Member 105476414-Sep-14 6:24
memberMember 105476414-Sep-14 6:24 
GeneralRe: A very important detail for VS2010 users Pin
Member 1091156319-Sep-14 23:20
memberMember 1091156319-Sep-14 23:20 
GeneralMy vote of 5 Pin
Member 352414827-Sep-12 19:19
memberMember 352414827-Sep-12 19:19 
Excellent post, comments helped me to work this in Master page. Thanks
QuestionHow to handle postbacks Pin
Marty Spallone22-Mar-12 5:28
memberMarty Spallone22-Mar-12 5:28 
GeneralMy vote of 5 Pin
Member 858001919-Jan-12 6:23
memberMember 858001919-Jan-12 6:23 
GeneralMy vote of 5 Pin
stevefortner6-Jan-12 10:39
memberstevefortner6-Jan-12 10:39 
QuestionGreat Sample - But Problems with MasterPage PostBacks Pin
Marty Spallone13-Dec-11 15:37
memberMarty Spallone13-Dec-11 15:37 
AnswerRe: Great Sample - But Problems with MasterPage PostBacks Pin
Marty Spallone13-Dec-11 17:18
memberMarty Spallone13-Dec-11 17:18 
QuestionGetting web service call failed: 500 on production server Pin
Peer Grønnerup16-Aug-11 20:40
memberPeer Grønnerup16-Aug-11 20:40 
AnswerRe: Getting web service call failed: 500 on production server Pin
AmauriRodrigues17-Aug-11 1:31
memberAmauriRodrigues17-Aug-11 1:31 
QuestionIs there someone like this control in .NET WinForm? Pin
weberypf15-Aug-11 23:11
memberweberypf15-Aug-11 23:11 
AnswerRe: Is there someone like this control in .NET WinForm? Pin
AmauriRodrigues17-Aug-11 1:27
memberAmauriRodrigues17-Aug-11 1:27 
GeneralVB Way Pin
Hernan K. Cabrera30-Apr-11 23:44
memberHernan K. Cabrera30-Apr-11 23:44 
GeneralRe: VB Way Pin
AmauriRodrigues17-Aug-11 1:32
memberAmauriRodrigues17-Aug-11 1:32 
GeneralWorks fine but not inside tabpanel control Pin
Member 447272129-Mar-11 8:28
memberMember 447272129-Mar-11 8:28 
GeneralMy vote of 5 Pin
Rajesh Kumar Chekuri4-Mar-11 0:28
memberRajesh Kumar Chekuri4-Mar-11 0:28 
GeneralMy vote of 5 Pin
burak2991-Mar-11 11:20
memberburak2991-Mar-11 11:20 
QuestionProblem using Panel within a Master Page [modified] Pin
Brian Davidson9-Jan-11 14:21
memberBrian Davidson9-Jan-11 14:21 
AnswerRe: Problem using Panel within a Master Page Pin
mini11930-Jun-11 23:18
membermini11930-Jun-11 23:18 
GeneralRe: Problem using Panel within a Master Page Pin
mini11930-Jun-11 23:30
membermini11930-Jun-11 23:30 
GeneralPerforming a similar task in C# Pin
SGall_Merc18-Oct-10 6:25
memberSGall_Merc18-Oct-10 6:25 
Questionhow to change the sample to link to sql server Pin
linuxsuperfans12-Aug-09 5:20
memberlinuxsuperfans12-Aug-09 5:20 
AnswerRe: how to change the sample to link to sql server Pin
AmauriRodrigues17-Aug-09 12:35
memberAmauriRodrigues17-Aug-09 12:35 
GeneralWhen you click on plus (+) image all of them disappear. Pin
rogercute20026-Aug-09 18:11
memberrogercute20026-Aug-09 18:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150728.1 | Last Updated 28 Sep 2008
Article Copyright 2008 by AmauriRodrigues
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid