Matt Berseth

I am playing around with a couple new data grid skins roughly based on what iTunes looks on my Vista box.  Here is how it is looking so far ... iTunes on Vista ...    My iTunes data grid ... Live Demo | Download   Blue and Gray Skins I actually created 2 slightly different skins- a blue and a gray one.  The gray one is above and is a little bit darker.  The blue one is slightly softer and looks like this ...    The Markup The markup for the grid consists of a HTML table with wrapped in a DIV.  I am using the odd/even classes for zebra striping and I also have a DIV above the TABLE for the title bar.  1: <div class="grid"> 2: <!-- title bar ... --> 3: <div class="title">The title goes here</div> 4: <table class="datatable" cellpadding="0" cellspacing="0"> 5: <thead> 6: <!-- header row...

I made a few more modifications to the Live Traffic page I posted about previously.  Here is what I changed ... New IP to Location Database I replaced the WIPmainia database with the GeoLite City one that Richard Lawley recommended.  For some IP's it can potentially provide location information down to Region/City/Postal Code level (and its still free).  teebot raised a good question about the accuracy of these free IP to Location databases.  The GeoLite web site claims it's database is over 99.3% accurate on a country level and 76% on a city level for the US.  Not too bad ...      Using ASP.NET to Simulate a Windows Service Decoding an IP address to a location isn't an instantaneous operation.  And I have a feeling as I build out the rest dimensions for my Visit/PageView cube it would be nice to run some of the data scrubbing processes some where...

I put a screen on top of the pageview data that I recently started collecting.  Thought I would pass along some of the interesting stuff I encountered while building it ... I used the jQuery jTemplate plug-in Dave Ward blogged about to build the rows for the grid.  The data is fetched from a webservice and then sent through the jTemplate templating engine to build the markup for the rows I looked into finding a free IP to Location database that I could bounce incoming IPs against to get some high level geographic information about my visitors (I need something like this anyway for my PageView/Visit cube) Below is what the end product looks like (you can check out the live version here).  And below the screen shot is some additional information regarding the two points above.   Using jTemplate and a Webservice to Populate the Grid I used jQuery's...

I spent some time customizing the delete confirmation dialog in the Dynamic Data site I have been blogging about recently.  Specifically, I looked at ... replacing the browsers default confirm dialog with a jquery thickbox displaying a confirmation message that includes contextual information regarding the row being deleted Below is a screen shot showing how it turned out.  You can read on for the details, or you can download the site and browse the code for yourself.  Hopefully DiscountASP will get upgraded to .Net 3.5 SP1 soon so I can get back to providing demos as well ... [Update: 9/21/2008]: Added live demo link   Download | Live Demo   The Default Confirmation Dialog If you use the Dynamic Data Web Site template to create your DD web site, the List.aspx page template will already include a default delete confirmation dialog that uses the browsers confirm dialog to prompt the user...

This is a pretty important question when in comes to DOM programming.  Start manipulating the DOM to early and bad things happen.  Do it too late and the users may see that annoying flicker.   So what's the best technique for figuring this out?  Well, I was curious about this myself so I took a look at how some of the popular Ajax libraries (jQuery, MooTools, YUI, Prototype and ASP.NET AJAX) are doing this.  Here is what I found out ...   Update: 08/11/2008: I came across an article that sheds more light on ASP.NET AJAX's init technique.  There is a lot of good content in the comments as well (look for the ones left by Dave Reed).  Here are a few snippets of what Dave has to say ... His comments with respect to the location of where the ScriptManager injects the call to Application.initialize ... ScriptManager does not put...

I don't know squat about building widgets with jQuery, so I thought I would fix this by rearranging my trusty progress bar code once more and see how it would look as a jQuery.ui widget.  The jQuery.ui documentation is still a work in progress so it was a bit of an adventure, but once again the elegance of jQuery kept my frustrations to a minimum and I think I ended up with something pretty useful.  Read on if you are interested in the details and don't forget to check out the demo page (progress bar's don't show so well as static images). Live Demo | Download | ui.progressbar.js   What is jQuery.ui? Assuming you aren't real familiar with jQuery.ui (I certainly wasn't until yesterday), here is a quick overview ... jQuery UI provides abstractions for low-level interaction and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that...

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

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