I got many feedbacks in my previous posts "Building a grouping Grid with GridView and ASP.NET AJAX toolkit CollapsiblePanel" & "GridView Grouping Master/Detail Drill Down using AJAX and jQuery"  asking to for toggle all (Expand All or Collapse All) feature in CollapsiblePanelExtender as well as to in jQuery. Actually I didn't have much time to walkthrough this and provide a demo about it.

Today I got a chance to write few code snippet to run this feature. It was very simple for both jQuery also for ASP.NET AJAX.

More...

In the previous part I talked about how to build the client control. In this part I'll show how to put it all together to build an ASP.NET AJAX Enabled Server Control. You can view the demo that demonstrate control usage here.

The good thing about ASP.NET AJAX is that it supports fully programmable interface for both Server and Client control. And make a connection between both control. So you just need to put the control declaration on the ASPX page and ASP.NET will make it work for you. On the other hand, you have full access to the client APIs so that you can do some manual calls to the client APIs as well.

Building the Server Control:

This is an ASP.NET AJAX Extender control. Means it extends existing ASP.NET control to enable ASP.NET AJAX on it. In this case this extender extends ASP.NET Panel control, that is why it is called CollapsiblePanelExtender. Here is an article to show you in details How To build Extender Controls.

Basically jQueryCollapsiblePanelExtender I am building here inherits directly from ExtenderControl. This required to implement 2 methods GetScriptDescriptors and GetScriptReferences which I am going to explore later. But now, I want to take your attention that I am using jQuery, and I wanted the developer to have the option to specify the path of the jQuery library. If he/she did not specify the path, the default path is used, which is the the one hosted by google at http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js. To do that I made a property and Call jQueryScriptPath that gets and sets jQuery javascript library path.

More...

At the end of the last month (September 2008) Microsoft announced that it will be shipping jQuery with Visual Studio going forward. It was a great news for all ASP.NET developers who are jQuery fans as well as jQuery and ASP.NET AJAX folks like me. Before and after that, there were many posts made around the same subject. It will take a full post to list all these posts. But it would be easy for me to list ASP.NET jQuery heroes around such Rick Strahl, Dave Ward and Matt Berseth. There are many other heroes around such as Bill Beckelman who made a great collection of ASP.NET with jQuery Demos.

For specific posts around ASP.NET AJAX and jQuery I recommend to refer to the following posts by Dave Ward's blog:

• Using jQuery to display a modal UpdatePanel confirmation.
• Using jQuery to enhance ASP.NET AJAX progress indication.
• Avoid this tricky conflict between ASP.NET AJAX and jQuery.
• Use jQuery and ASP.NET AJAX to build a client side Repeater.

Introduction:

We all heard about and maybe worked with ASP.NET AjaxControlToolkit! A set of wonderful controls, but they are heavy, maybe not all of them but many of of them. Beside they require lots of script files which increase the response size.

I was thinking of building jQuery UI Widgets to clone some of AjaxControlToolkit controls. And after Microsoft announcement about jQuery I had another idea! I always liked how ASP.NET AJAX component model, both client and server models. It is easy to build ASP.NET AJAX Enabled Controls especially for ASP.NET control developers. ASP.NET AJAX client and server architecture really ease the development ASP.NET AJAX Enabled Controls and also the core ASP.NET AJAX client library has no massive performance issues, and it is widely used.

On the other hand, I loved the ease of using jQuery as well, how fancy it provides UI Effects and manipulation of DOM. Many many things I wished to have in ASP.NET AJAX were exist in jQuery. So I though of building an ASP.NET AJAX Enabled Control to clone the existing AjaxControlToolkit's control CollapsiblePanelExtender. And use ASP.NET AJAX client and server component model while using jQuery for UI Effects. In this case it would be collapsing (Slide Up) and expanding (Slide Down). [View Demo]

More...

Last year, Matt posted a cool post about How To: Use the HoverMenuExtender for GridView RowCommands. Last month I got an e-mail from Justin Riggs, he was trying to combine to things. The usage of HoverMenuExtender as described in Matt's post, and the Master\Detail GridView with CollapsiblePanelExtender I posted about few months ago.

He already made the sample which ease the job for me in this post, but he had and issue that the functionality wasn't work properly. So I fixed that and thought to share it here in case anyone would love to apply same feature. You can view demo here.

It is a must that you return to How To: Use the HoverMenuExtender for GridView RowCommands by Matt, and Building a grouping Grid with GridView and ASP.NET AJAX toolkit CollapsiblePanel by me before you go a head in this post.

More...

Well, I'm done with this article that show in details how to build on demand loaded details from master data using GridView and CollapsiblePanelExtender control. Read the article.

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 read my article and view Demo here.

Comments can be left on this post as currently pages feature of BlogEngine.Net doesn't support comments.

UPDATE: I've posted an update to this post to apply on demand loading of Details data using ASP.NET AJAX PageMethods. I'm demonstrating the usage if CollapsiblePanelExtender client events on the new post. Check it out.

I admit, Matt Berseth is really inspiring me! Few days ago I pass through 2 of his great posts:

• Surrounding your Data Table and Dialog Controls with ComponentArt Styled Panels
• Building a Grouping Grid with the ASP.NET 3.5 LinqDataSource and ListView Controls

The first one is pure design tips one which I used for making good presentation of my demo here. The 2nd post is actually the idea.

Here I'll do the same idea Matt presented in his post, but I'll user ASP.NET 2.0 simple stuff plus ASP.NET AJAX Toolkit CollapsiblePanel control.It is required that you have ASP.NET AJAX Extensions installed to be able to run the sample code.

I'll not go through the presentation tips mentioned in Matt's post, I'll just show my technique to implement grouping idea with GridViews and CollapsiblePanel along with SqlDataSource which of course can be replaced with ObjectDataSource. I should mention that I'm using same style sheets provided in Matt's sample code along with images [View Demo]. More...