Back in September last year (2008), I posted a demo about Username Availability Validator Control. This control developed by the community on a contest initiated by Dave Ward on August 2008 as I remember. At that time the control was in beta.

On October 2008 the control was released to public on its first version. And finally I wrote a a very simple documentation on the project Wiki.

In this post I am going to update my previous demo as well as provide new feature on the control which is SuccessMessage property to be displayed if the Username is available. This update is not available so far on project at CodePlex. This is a private update which I provided on this post only. [View Demo]

More...

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

I posted about how to build and extender control using ASP.NET AJAX with jQuery. During my work I fall into few issues that I resolved and wished to share them with you.

These issues are related to callback functions in jQuery. For example when calling slideUp(speed, callback) or slideDown(speed, callback). Same thing when calling each(callback) function except that the callback in each(callback) function takes 2 arguments while those in Effects functions take no arguments by default -refer to jQuery documentation for more details-.

What are the issue exactly?

In all callback function in jQuery, "this" keyword will reference the DOM Element. For example in slideUp or slideDown functions if you specified a callback like this:

//Collapsed is your callback function
$('#elementId').slideDown(Collapsed);

function Collapsed() {
  //"this" refers to dom element
}

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

UPDATE: ALWAYS DOWNLOAD LATEST SOURCE CODE FROM PROJECT PAGE ON CODEPLEX

Few weeks ago Dave started the Advanced ASP.NET AJAX Server Controls book giveaway contest. And yesterday he announced that the control is almost completed, but the contest door is still open. So I thought to grape the bits and start testing it and build a simple sample. [View Demo]

The sample that I am going to demonstrate here will use ASP.NET Create User Wizard control with UserName Availability Validator. In this sample I'll show the important properties of this control as well as the current issues exist.

Prerequisites:

I'll assume that you already know how to configure and use the existing built in ASP.NET Membership provider. You'll need a sample database with ASP.NET Membership services installed on it.

The sample provided has ASP.NET Membership already installed and configured, you can download the sample and start explore it.

You page must have ScriptManager control on it, of course this is an ASP.NET AJAX control at the end.

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.

I've seen different type of tooltips around. And actually jQuery tooltip plugin was one of the best I ever seen. And then I thought to build some tooltip similar to those tooltips available on asp.net learning items. Just simple one to be displayed on left or right of the tooltiped item (element). And I decide to build that using jQuery.ui widgets.

Very simple and straight forward, all I needed is the following:

• A tooltip fully UI customizable to be displayed to the right or left of the desired element. And it should detect if the desired element is closer to right or left on the screen; so the tooltip to be displayed correctly to the right or left of the element.
• Ability to control when the tooltip to be displayed, on hover or focus on the element or manually using tooltip widget methods such show and hide.
• Callback upon on show and hide of the tooltip.
• Optional fancy show/hide animations.

I built a sample which you can download to demonstrate how this tooltip should work and you can view the demo here.

Before go through the code, I recommend first to read the following posts:

• jQuery.UI ProgressBar Widget
• jQuery.UI Messenger\Outlook like message notification Widget

More...

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

Introduction:
Last month I posted about Building a grouping Grid with GridView and JQuery. And I got feedbacks about how to do the same thing using AJAX (on demand retrieving of detail data). In fact I was thinking of that too, and I had couple of ideas in mind. One of them it to use nested update panels, or use AJAX Data Controls with page method/web service method calls along with ASP.NET AJAX. You can view the [demo here].

I didn't like the nested update panel idea, although it is the easiest I think. And was started to think about the second idea but I was about to check another way other than ASP.NET AJAX as long as I'm using jQuery. So I was thinking of using jQuery AJAX. That was just after reading Dave Ward's post Using jQuery to consume ASP.NET JSON Web Services.

More...

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

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