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 the elements are identified it wires up the focus, blur and click to some JavaScript handlers that add or remove the watermark based on the current value of the element.

Here the script is in all of its glory …

$(document).ready(function(){
  $("input:text, textarea, input:password").each(function(){
    if(this.value == '')
    this.value = this.title;
  });
  $("input:text, textarea, input:password").focus(function(){
    if(this.value == this.title)
    this.value = '';
  });
  $("input:text, textarea, input:password").blur(function(){
    if(this.value == '')
    this.value = this.title;
  });
  $("input:image, input:button, input:submit").click(function(){
    $(this.form.elements).each(function(){
      if(this.type =='text' || this.type =='textarea' || this.type =='password' ){
        if(this.value == this.title && this.title != ''){
          this.value='';
        }
      }
    });
  });
});

Step 2: Rearrange the code so it fits into an ASP.NET AJAX JavaScript based Component

So I implemented a very simple Sys.Component JavaScript object that uses the getElementsByClassName function to pull out all of the input elements with the watermark CSS class applied to them. The jQuery version extracts the elements by tag names, but I thought this might be grabbing elements I don’t want to apply the watermark to so I chose to use a css class instead.

To do this I setup my majax.watermark Component to handle the Sys.Application.load event. When this event fires I grab all of the elements that have the watermark class applied to them and apply the watermark logic to them as follows:

• If the element doesn’t currently have a value, set the value to the title attribute and add the watermark CSS class to the element
• When the focus event for the element fires check to see if the value is the same as the title. If it is remove the watermark text and as well as the watermark CSS class
• When the blur event fires check to see if the value is empty. If it is reapply the title value and add the watermark CSS class back

apply : function(e) {
    //  if the field is empty, show the watermark
    if(e.value == '') {
        e.value = e.title;
        Sys.UI.DomElement.addCssClass(e, 'watermark');
    }
    //  when the field has focus hide the watermark
    $addHandler(e, 'focus', function(){
        if(e.value == e.title) {
            e.value = '';
            Sys.UI.DomElement.removeCssClass(e, 'watermark');
        }
    });
    //  when the field loses focus and the
    //  input is empty, show the watermark
    $addHandler(e, 'blur', function(){
        if(e.value == '') {
            e.value = e.title;
            Sys.UI.DomElement.addCssClass(e, 'watermark');
        }
    });
}

Step 3: Add the Script References to your Page

After the watermark plugin component is written all we have to do to use it is let the ScriptManager know about it like so …

And of course make sure the scripts have been saved to the appropriate file paths on the web server …

And finally, just set the ToolTip and CssClass attributes for all of the ASP.NET TextBox controls that should have the watermark applied to them …

<asp:TextBox ID="TextBox1" runat="server" CssClass="watermark" ToolTip="First Name" />
<br />
<br />
<asp:TextBox ID="TextBox2" runat="server" CssClass="watermark" ToolTip="Password" TextMode="Password" />
<br />
<br />
<asp:TextBox ID="TextBox3" runat="server" CssClass="watermark" ToolTip="Example Text" TextMode="MultiLine" />
<br />
<br />

Step 4: Enjoy!

Conclusion

Well I am pretty much sold on this as a potential plugin pattern for getting some of the jQuery goodness into ASP.NET AJAX. What about you?

That’s it. Enjoy!

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 generously provides a solution to the problem. He describes a technique he is using for hooking into the PageRequestManager’s beginRequest and endRequest events to tuck away the scroll bar position before the partial page is reloaded. He then reapplies the scroll position after the panel has been refreshed. I look at the code he provides for this and I am thinking – Yep, that looks great. I want it.

And I want that on every page except I don’t want to copy/paste everywhere and I don’t want to have to edit the JavaScript every time I add a new panel to the page. The thing is, solving this problem via a reusable solution is a little tricky. We could create an extender control that would hook onto the Panel’s using the TargetControlID, but that seems a little heavy when all we have is a touch of JavaScript. And besides the direct reference to Panel1′s ClientID in Mustafa’s solution – the script is completely reusable. So I did a little reading up on some of ASP.NET AJAX’s client side components to see if there was anything I could use to pull this code together into some sort of non-visual component that I could re-use across pages that wouldn’t require me to write any server side code.

Hello Sys.Component

And that is when I came across this bit of documentation …

This sounded promising so I decided I would try to refactor the original JavaScript into a Sys.Component and see where it takes me. So I moved Mustafa’s original code into a Sys.Component class called majax.MaintainScrollPosition. Within the Components initialize function I grab a reference to the PageRequestManager object and wire handlers to the pageLoading and pageLoaded events. When pageLoading fires (this happens after the async-postback has completed but before the DOM is rewritten with the resulting data) I tuck away the scroll positions of the elements I am interested in and when pageLoaded is invoked I look up those elements again and set the scroll positions to what it was before the async-postback fired. Here is the bit of JavaScript I am using to handle this …

onPageLoading : function(sender, args) {
    // get a list of the panels that are going to
    // be updated
    var updatedPanels = args.get_panelsUpdating();
    if(updatedPanels && updatedPanels.length > 0){
        // clear the array
        Array.clear(this._elements); 
        // find all elements with the 
        // and remember the scroll position 
        for(var i = 0; i < updatedPanels.length; i++) {
            Array.forEach($majax.getElementsByClassName('maintain-scroll', null, updatedPanels[i]),
            function(e){
                if(e.id) {
                    Array.add(this._elements, { "id":e.id, "x": e.scrollLeft, "y":e.scrollTop });
                }
            }, this); 
        }
    }
},
 
onPageLoaded : function(sender, args) {
     var updatedPanels = args.get_panelsUpdated();
    if(updatedPanels && updatedPanels.length > 0){
        // find all elements with the 
        // and remember the scroll position 
        for(var i = 0; i < updatedPanels.length; i++) {
            Array.forEach(this._elements, function(e){
                var element = $get(e.id, updatedPanels[i]);
                if(element) {
                    element.scrollLeft = e.x;
                    element.scrollTop = e.y;
                }
            }, this);
        }
    } 
}

getElementsByClassName

The one thing you should notice with the onPageLoading function is that I am maintaining the scroll position for all HTML elements that have the maintain-scroll class applied to them. To fetch these elements I am using a helper function called getElementsByClassName (taken from here) that scans the panel to find all of the elements that have this maintain-scroll class applied to them. This approach is different from the typical extender control that extends a single control that it knows the ID of.

So for my demo page, I have a DIV contained within an UpdatePanel with a fixed width/height, and have enough content that scroll bars are being applied. To let my component know that we want it to maintain the scroll position of this DIV across partial postbacks all we have to do is tag the DIV with the maintain-scroll class like so …

And to get my majax.MaintainScrollPosition script loaded I let the ScriptManager on the page know about my scripts and it will take care of the rest (the reference to majax.js is the script that contains the getElementsByClassName function. I planned on putting other common scripts in this file as well).

These Path references are pointers to the location on the webserver where my scripts reside.

Is this a one-off Solution or is it something more General?

After creating the component that maintains the scroll position, I started wondering if this was a pattern that could be applied a little more broadly. One of the first Toolkit controls I created extended a GridView control and added a bunch of cool row and column hovering effects. And after I got it build just the way I wanted .Net 3.5 came out and I fell head over heals for the new ListView control. And while I could still use my original extender control, it would take a little more work (i.e. explicit calls to $create for each of the tables I want to apply the behaviors to). So I quick like moved my old TABLE hover behavior script into this new patter to see how it fit. So I …

• Created a new Sys.Component JavaScript class that uses the getElementsByClassName function to fetch all TABLE’s on the page that are tagged with the tablehover class
• After these TABLE’s are located I use the $create function to apply my hover behavior to the control
• Add a reference to my script to the ScriptManager control

• Updated my GridView to include the tablehover CSS class

And the coolest part is that without any code changes I can render the same grid using the ListView control as well …

And they both work exactly the same.

Finally, The Demo’s

The demo page for this post contains 2 sections. The first one demonstrates how the majax.MaintainScrollPosition can be used to persist the scroll position of elements between async postbacks. You can move the scroll bar around, then click the post back button. This will cause the panel to refresh and because this panel has Mustafa’s script tied to it – the original scroll position will be restored.

And the second demo shows how to use the majax.TableHover script with both the GridView and ListView controls. Just hover over any of the table’s cells and you will see how it works.

And you can download the sample site here.

Conclusion

I am kind of impressed with how this is looking so far. I like that …

• I can easily apply the same behavior to elements that match a CSS selector. This is nothing new to the wider JavaScript community, but to those of us using ASP.NET AJAX and the Toolkit it certainly is.
• If I don’t need to interact with the control from the server I don’t need to go through the process of building a server side piece for the component
• I thought it was cool how I could easily apply the same behavior to both a GridView as well as an HTML table rendered by the ListView without changing a single line of code
• I can hook into the PageRequestManager and attach to the ASP.NET AJAX client side life cycle events from within the Component

All of that being said, I spent a total of 3 hours putting this together stream-of-consciousness style, so odds are that I am missing something huge or that none of this is really all that useful to anyone but me. Either way, leave a comment and let me know what you think.

That’s it. Enjoy!

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 different in the queries that fill these grids is the order by clause (SalesYTD desc, SalesLastYear desc, Projected desc), but clearly these queries could be as simple or as complex as needed. 

After configuring the ListView to render the grids, I then gave each of the tabs a title that reflected the data the tab is displaying.  Here is what it looks like …

And of course – here are links to download the code and browse the live demo – Live Demo (IE6, IE7, FF, Opera) | Download

There really isn't much for implementation details for this one because I didn't really hit any snags or gotchas that are worth mentioning.  But if you download the code and run into something that looks puzzling, I would recommend checking out my ListView and TabContainer archive pages for additional information.

That's it.  Enjoy!