Matt Berseth

The controls found in the AjaxControlToolkit fit perfectly into the ASP.NET programming model (as to be expected).  You can configure the controls properties through the markup which in turn affects how the control's display and behavior on the client.  Many of the control's properties support databinding so using the controls within a databound control like a ListView or a GridView is no big deal.  Take for example the ProgressBar Toolkit control I blogged about (here and here).  One of the places that I use this control is in a GridView's TemplateField.  Instead of displaying the percentage as a text value, I use the ProgressBar to display the percentage in a more visual manner.  It looks something like this ... Live Demo | Download With the Toolkit, setting this up is really simple.  Just use a databinding expression to set the Value property of the ProgressBar control to the value of...

So I figure what better way to learn more about jQuery than to dig right in and create a plugin or two?  At first I thought this sounded pretty intimidating, but after browsing through some of the existing jQuery plugins I figured it might be easy enough to try and 'rearrange' one of the Toolkit controls that I created.  So that is what I did with my GlowButtonExtender control I created a few months back (and I plan on doing it with the ProgressBar one as well very soon).  I kind of liked this because I thought creating the same UI widget using both the Toolkit and jQuery might give a little more insight into what the relative advantages are between the two frameworks. In case you didn't see my original post on creating the GlowButtonExtender control, here is how it works:  When you mouse over the button, it glows...

When creating my last post I tracked down all of the JavaScript files the ModalPopup Toolkit control loads.  I did this manually by using FireBug to see what script files were pushed out to the client and then I used Reflector to find out the size of the file (the Toolkit embeds the JavaScript files as resources).  That was tedious.  But I found the information pretty useful (I wouldn't have guessed the ModalPopup required the RoundedCorners script) and so I thought it might be useful to view this information for all of the Toolkit controls. So I cooked up a simple console application that rips through the Toolkit's assembly (I used version 1.0.20229.0) and tracks down all of the ClientScriptResources a particular control is using.  As I identified the scripts I ran then each through the minify -> gzip process so I could better gauge how large these scripts are...

And so I continue on messing around with jQuery and looking into ways I can use it in my WebForms applications.  Something I sheepishly admitted to in my last post was that I don't want to use 3 client side libraries {ASP.NET AJAX, AjaxControlToolkit, jQuery}, yet I never really took the time to see what the size of the core jQuery library is.  And for that matter I haven't really looked at what scripts some of my favorite AjaxControlToolkit controls are pulling down either.  I also assumed there is a bunch of overlap between jQuery and ASP.NET AJAX, but I haven't looked into that either.  So I thought I would check some of this out and along the way rebuild my Master-Detail with the GridView, DetailView and ModalPopup Controls and replace the ModalPopup with jQuery's ThickBox.  I found it pretty interesting - read on to see how it went.Live Demo...

So clearly I am obsessing about getting jQuery features into my WebForm applications.  I would seriously love to see the following added ... A more powerful selector.  Finding elements by ID (ala $get) in an ASP.NET page is usually pretty awkward because the ID values isn't known until runtime.  This alone causes many people problems.  Unless I am mistaken the next version of ASP.NET AJAX will include a selector to find items by class name as well, but I have not heard anything for supporting more advanced stuff like ... 1: // good ... 2: var alternatingRows = $select('TABLE TR.alt'); 3:  4: // better ... 5: var alternatingRows = $select('TABLE TR:odd'); 6:  7: // best! 8: var alternatingRows = $select('TABLE TR:nth-child(odd)');   A more fluent programming model.  jQuery seriously embraces the 'find some elements and do something with them' mantra.  And they make it really simple to do - if...

If you have been following along with me over the past few days you have seen that I am looking into ways to incorporate some of the goodness of jQuery into ASP.NET AJAX.  Of course the obvious question is why don't I just switch over to jQuery completely?  Well ... The team I work on is not switching from WebForms to MVC any time soon. And I am fine with that - we have a bunch of good dev's all with plenty of years of WebForms experience so we understand all of the quirks and can get past any of the weirdness that sometimes pops up. But I don't really want to use 3 ajax libraries (jQuery, ASP.NET AJAX and the Toolkit). But I like how easy it is to author and distribute jQuery plugins and I wish there was a similar pattern for ASP.NET AJAX. I posted that bit...

I couldn't help but continue exploring the ASP.NET AJAX JavaScript component topic I wrote about yesterday.  So this afternoon I picked one of the simplest AjaxControlToolkit extender controls, the TextBoxWatermarkExtender, and rewrote it using the plugin approach I wrote about yesterday.  Again, I am very happy with how it turned out.  Read on for the details and don't forget to check out the live demo and download links as well. Live Demo | Download Step 1: Find an existing jQuery watermark plugin in that does what I want So I googled a bit and ended up following a link here.  This looked like exactly what I wanted so I downloaded the JavaScript and took a look at it.  And I was very happy to see that it was incredibly simple - only ~20 lines of code.  The script uses some selectors to identify the textbox elements on the page.  Once...

So I have been working with ASP.NET AJAX and the Toolkit for about a year and a half total - give or take a few months.  Over this period I have played around with building a handful of AJAX controls ... ProgressBar YUI Style Glow Buttons Scrolling Ticker Trace Console Anti-Aliased Rounded Corners GridView Hover Extensions ... and I am generally happy with how each one of these turned out.  However I have learned over time that a new control extender or script control is not always the right fit for the job. Take the problem Mustafa was solving the other day ... I have recently figured out that if there is a scrollbar’ed Panel control inside an UpdatePanel, it looses its scrollbar position after any type of partial postback within that UpdatePanel. There can be a GridView, a DIV container or another similar control instead of this Panel. Mustafa...

As a user, I am a fan of dashboard pages.  Many data centric web applications have these as landing pages (I know the one I am currently building does).  These pages usually display a high-level summary of the data the application is managing for the user.  A few weeks ago when I was playing around with some Google Analytic style skins I tried combining the AjaxControlToolkit's TabContainer control with a simple ListView rendered data table to see if I could mimic some of the dashboard controls that google uses.  I thought it turned out pretty well so I figured I would write a quick post ... For my example app I created a Sales Dashboard control that displays sales figures for all of the sales people in some fictional company.  The dashboard has three different tabs, each provides a different view of the same data.  For my example, the only...

Nearly 6 months ago a wrote a post showing how you can use ASP.NET 3.5's new ListView and LinqDataSource controls to create a pretty sweet looking grouping grid.  Well I recently created a few additional skins for my original grid that I thought I would share.  You can follow the link to the demo site to see them in action and if you are interested in learning more you should read my original post and then download the sample site and step through some of the code. All of the themes use exactly the same markup.  All images (including expand/collapse icons, sorting icon and pager icons) are controlled via CSS.  My original post used ImageButtons, but I replaced these with LinkButtons.  This seems to be working out pretty well - I can use the CommandName and CommandArgumnet properties to hook into some the ListView and DataPager's advanced features, but I...

I am still playing around with the ProgressBar control I blogged about a few weeks ago.  I recently updated it to include a handful of few new features and two new skins -below is a quick run down of what has changed.  I am pretty happy with how the control works in IE and Opera, but the Continuous mode animation is a little choppy in FF - I still need to get that figured out. Live Demo (IE6, IE7, FF, Opera) | Download   New Skins Like I mentioned in my earlier post - I wanted to make sure I could easily apply new skins to the progress control without rewriting the thing.  And I am pretty happy with how this has turned out so far.  I had 8 total skins in the original post and I have just created 2 more.  The first one is very similar to Vista's...