Introduction

Earlier this year Matt Berseth posted about Building a Grouping Grid with the ASP.NET 3.5 LinqDataSource and ListView Controls. Then I followed his post with 2 other posts discussing same idea but with different implementation:

• Building a grouping Grid with GridView and ASP.NET AJAX toolkit CollapsiblePanel
• Building a grouping Grid with GridView and JQuery

Later I got few comments about how to implement that using AJAX, in order to display the details data on demand. At that time Dave was demonstrating the usage of jQuery AJAX on his post Using jQuery to consume ASP.NET JSON Web Services. So I came up with another demo to apply on demand loading of details data in my post GridView Grouping Master/Detail Drill Down using AJAX and jQuery.

Again I got few other comments on how to apply same approach, but using ASP.NET AJAX Control Toolkit CollapsiblePanelExtender control. So here I'm going to provide how to do that using CollapsiblePanelExtender and ASP.NET AJAX PageMethods call to apply on demand loading of details from the master data. You can download the sample and view Demo here.

A look inside CollapsiblePanelExtender Control

The reason why I didn't implement that earlier is that I though that CollapsiblePanelExtender do not expose client events when a panel is about to collapse or expand. But I turn out to be completely wrong. CollapsiblePanelExtender expose 6 useful client events that I can handle:

1. Expanding
2. Expanded
3. ExpandComplete
4. Collapsing
5. Collapsed
6. CollapseComplete

And you can register for these events using client script just as the following:

function pageLoad(sender, args){
var cpe = $find("CollapsiblePanelExtenderID");
cpe.add_expandComplete(onExpand);
cpe.add_collapseComplete(onCollapse);
}
function onExpand(s,e){
//Code here
}
function onCollapse(s,e){
//Code here
}

I assume that you know that pageLoad function will be automatically registered for Application Load event.
I have no idea why these events is not exposed as Control Properties so registering would be much more easier using ASPX markup code like this:

<ajaxcontroltoolkit:CollapsiblePanelExtender ID="cpe" runat="Server" 
....
OnExpand="onExpand" 
OnCollapse="onCollapse"/>

Extending the Extender

I like this way and I guess this would give much more cleaner code. So I just extended the CollapsiblePanelExtender control by inheriting for it and added 6 properties that map to the client events: