Introduction:
Last month Matt Berseth posted very good post about how to build Master-Detail with the GridView, DetailsView and ModalPopup Controls. Today I'm going to clone his post and build the same feature using jQuery with jQuery Plugins; one for popup windows jqModal& and the other is for Color Animation. You can view a demo of this sample here [View Demo].

Prerequisites:
Because I'm using some design tips and styles posted in Matt's posts, I recommend to return to his original posts regarding styling and UI enhancement. I used the styles and design shown on his post Building a VS2008 Styled Grid with the GridView Control.

In my sample I'm using UpdatePanel, and used a client side technique to update the UpdatePanel. To read and review more about this technique please read Dave's post Easily refresh an UpdatePanel, using JavaScript.

It is important also to review documentation of jqModalas I'm not going to explain its APIs.

Implementation:
To make a long story short, I just modified Matt's sample and replaced ModalPopup control of AJAX Control Toolkit with jqModal. Also Matt used to indicate the updated row by setting a style sheet class to the updated row for certain period of time then remove it to make it look as before. I did the same, but I used some kind of animation provided by Color Animationplugin for jQuery.

More...

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...

Introduction:
I was thinking of building ASP.NET AJAX Supported controls inorder to practice both ASP.NET AJAX extensions as well as Script# tool.

Actually I liked the work done by Matt Berseth regarding ASP.NET AJAX very much. So I decided to use his ideas, convert them with Script# and add extra view things. So 99% of this post credit returns to him, I will just show how to use Script# and work around few things [Demo].

Original Reference:
I picked a control Matt built as GridView Extender (Behavior).And he provided few posts about and here they are:

• Improving the Presentation of an Extra-Wide GridView
• GridViewControlExtender - Row MouseOver and Click Styles
• GridViewControlExtender II - Header Cell MouseOver Styles and a Few More Live Examples

Simply the idea is to improve the look and feel of the simple GridView with extra styles. For example when hover over a grid cell/row or when click on a row. The control was built as AJAX Extender also known as Behavior that can be applied on a GridView. More...

Last year (2007) on March I joind CSharp-Online community. It is Wiki Media based community web site. Actually that was the first time to use Wiki. I was always watching Wikies but never touch them. I liked that Wiki. It is easy and smart or may be I'm a dump.

Anyway, I had finalized my first contribution on there and it is about Creating Custom ASP.NET AJAX Client Controls. I've built this article on top of this tutorial
"Adding Client Capability to a Web Server Control Using ASP.NET AJAX Extensions".

Hope it will be useful for someone.

UPDATE:
Matt Berseth posted a detailed information about this tip on his post Bug Bash: Enabling/Disabling the ASP.NET AJAX Timer using the Control's Client Side API. Much clearer and explained in details. [May 08, 2008]
----------------------------------------------------------------------------------------------------------------------------------

from about 2 weeks I wrote an article about how you can use ASP.NET 2.0 AJAX Timer control in a real world scenario side by side with RssToolKit.

The idea it to display RSS feed from deferent location in cycle using ASP.NET AJAX Timer. I also had an idea of pausing the Timer when the user move his mouse over the update-able area "Group Box that display feeds inside it". Of course this should be down from client side.

I searched the documentation for Client Side APIs related to the AJAX Timer control but I didn't find any. I had to hack inside AJAX Timer client library downloaded with ASP.NET AJAX Extensions, and I found what I want.

First I though that by setting client side enabled property using set_enabled(false) of the AJAX Timer I could get what I want; actually I was wrong, this will not pause the Timer.

Dig deeper, but not for too long, I found 2 methods _startTimer() and _stopTimer(), those were excatly what I was looking for.

bellow is a sample client code of how you can use these 2 methods:

   1: function startTimer() { var timer = $find("<%=ajaxTimer.ClientID%>"); timer._startTimer(); }

   2: function stopTimer() { var timer = $find("<%=ajaxTimer.ClientID%>"); timer._stopTimer(); } 

The above code assuming that you have an AJAX Timer control on the page named ajaxTimer. Call these method from your client side code, or add them as event handlers on your target elements.

I don't know why these are not documented, or we are not supposed to use them?! Actually I don't know. I thought that after using these methods the browser will cause a problem regarding client scripts, but both Opera and IE worked just fine without any problem. Also I didn't notice any slow down or hanging in both browsers.

Hope you find it useful.

Back to April 2007 I posted about building an ASP.NET AJAX ComboBox. It was an attempt to rewrite a ComboBox Control I made to fulfil certain issues I faced with 3rd Party Controls. One of those issue was performance as most of 3rd Party control are rendering heavy HTML because of extinsive features they put on their controls which I do not need. So This post is supposed to be an extensions to my old post as well as my article about building Simple ASP.NET ComboBox.

Attached to this post is the ASP.NET AJAX ComboBox. The archive is also containing 3 other very simple controls. The controls are developed using ASP.NET AJAX 1.0. Client Side Controls are written using Script#. I've posted earlier about Script# and my experience with it, so feel free to have a look at that post.

Now back to ASP.NET AJAX ComboBox. The control is very simple, you can consider it as composite control of simple ListBox and TextBox, however it doesn't inherit from CompositeControl. It directly inherit from ListControl to support binding out of the box and many other features that do need any to be rewritten. More...

• AJAX Application Architecture, Part 1
• AJAX Application Architecture, Part 2
• Managing the User Experience in AJAX