March 17, 2009

HTML/CSS-Only Data Pager Control

After reading these two articles I thought it would be interesting to see if I could this technique to create a HTML/CSS-only (i.e. no background images) data pager control. Here are some screen shots of what I came up with (the second and third screen shots show the roll-over states) … You can check out the live demo here.  I tried it in the major browsers (FF, Opera, IE7, Safari and Chrome) and it worked great.  Unfortunately it looks like crap in IE6 … If you didn’t know it was possible to render angled shapes using straight HTML/CSS - I recommend checking out the following articles … Using borders to produce angled shapes A Study of Regular Polygons   That’s it.  Enjoy!...

February 05, 2009

.NET GoogleReader API

I received some emails last night requesting the source for the console app (download here) that I am using to extract my feeds from google reader, so I figured I would write a quick post about it.  Just to be clear, as far as I know the API is still unofficial and I have no idea when or if google plans on making it public.  So it goes without saying that it could go away, or change dramatically at anytime.  But if you are still interested, here is what you need to know. The best resources I could find on how the API works are pyrfeed Google Reader API Also, there is a project setup on codeplex that is similar to what I have done.  It wasn’t exactly what I was looking for, so I passed it up, but you might also find that helpful as well. Google’s API works...

Topics: Other , Prototype

February 04, 2009

ASP.NET MVC, GoogleReader's Unofficial API and PostRank.com == TheDotNetDaily.com

I had some spare time this past week so I thought it might be a good time to finally take a look at asp.net's new mvc framework.  My plan was to start out by building a very simple application that I could add features to slowly over time.  I figure I will start out with a handful of read-only screens and then as I learn more about mvc and gain confidence, I could start looking at some of the more advanced/complicated stuff.  Just sort-of start out slow with some of the basic stuff and go from there. The app I decided to build is going to allow me to browse the feeds I have subscribed to in google reader.  I have more feeds that I can keep up with, so I plan on running each feeds individual posts through a ranking service and using the my new asp.net mvc...

Topics: ASP.NET , Prototype

June 29, 2008

Using jQuery Plugins with ASP.NET

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

June 17, 2008

Getting jQuery Goodness into ASP.NET AJAX - Take II

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

June 15, 2008

Getting jQuery Goodness into ASP.NET AJAX

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

June 12, 2008

Rewriting the TextBoxWatermarkExtender as an ASP.NET AJAX Plugin

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

June 11, 2008

ASP.NET AJAX: Creating Reusable JavaScript Components (that are not Controls)

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

May 15, 2008

ASP.NET AJAX Progress Bar Control

If you use AJAX in your web app's, you no doubt have made use of some sort of progress/status indicator that lets the user know that some operation is currently executing.  In the app I am currently working on we use an animated gif for this.  It works great, but sometimes you might find it nice to have more control over the indicator - i.e. interacting with it via JavaScript and styling it using CSS. So I did a little research and found a nice example of one built using script.aculo.us.  The demo page looked great so I downloaded the source to get a feel for how it worked.  I liked what I saw so I thought I would create a new AjaxControlToolkit control based on this example.  My original goal was just to port it over to ASP.NET, but as I started playing around with it I thought I...

May 04, 2008

Bulk Inserting Data with the ListView Control

I am working on a project that needs a new screen for bulk entry tasks.  We have a few business scenarios coming up where we have people inputting 5 to 8 records of data at a time.  I met with a few of our analysts last week and hashed out a rough outline of what they were looking for.  About 10 times or so during the 30 minute meeting some form of the phrase 'kind of like excel' was mentioned.  Our data entry personnel are familiar with excel and our analysts thought an excel styled grid would make a lot of sense.  'An excel grid with a Submit button' was the phrase I had underlined twice in my notes.  I wasn't too worried about the grid's styling, but I wasn't quite sure what the best way to handle the 'bulk insert' requirement.  Most of our other grids require an explicit...

April 08, 2008

Using a DataPager with the GridView Control - Implementing IPageableItemContainer

One of the new controls that shipped with ASP.NET 3.5 is the DataPager.  It's a flexible control that renders the paging elements data-bound controls that implement the IPageableItemContainer interface (currently only the ListView control).  The big change with the DataPager is that it is decoupled from the data-bound control it provides paging support for.  It can be embedded somewhere within the data-bound control's control hierarchy (like contained within the LayoutTemplate of the ListView), but it doesn't have to - It can exist on its own outside of the data-bound control as well. When I was writing my last post, I kind of wished the 3.5 GridView implemented the IPageableItemContainer interface.  It sure would have made things simpler for me.  So I thought I would take a shot at extending the GridView myself.  Read on for the details. Live Demo (IE6, IE7, FF, Opera) | Download      Implementing IPageableItemContainer This is a...

March 23, 2008

A Quick Look at Silverlight 2's DataGrid Control

If you follow my blog, you have probably noticed my obsession with data grids.  I haven't actually checked my archives, but if I had to guess I would bet somewhere around 70% of all my posts in some way include ASP.NET's Repeater, GridView or ListView controls.  Lately I have been taking a look at Silverlight 2 so naturally I was curious when I saw Scott Morrision's post titled Using the Silverlight DataGrid.  I eagerly read through his post and started working on creating a very basic demo app.  I thought a good way to introduce myself to the DataGrid would be to build a page that allows me to set the values of the DataGrid properties so I could watch how it effects how the DataGrid presentation (usually this is what a designer is for, but it wasn't working so well for me.  I am sure it's user error.).  Anyway,...

March 18, 2008

Creating a Custom Skin for Silverlight 2's Button Control

For the past couple of weeks I have been reading about Silverlight 2.  I have gone through ScottGu's tutorial, checked out the deep zoom demos (here and here) and even browsed the XAML for some sample control themes.  But I haven't actually tried to build anything myself yet.  So I thought I would put together a small sample around Silverlight's styling and templating features by creating a skin for the Button control that looks somewhat like the a button renders in IE7 on my Vista box.  I know that in a way it's taking a step back (Silverlight's default Button is really pretty sweet looking), but I didn't want to be too overwhelmed for my first sample.  The grid below shows what my Button control looks in each of the 4 states the Button supports.  If you look close at the Buttons background, you can see it has that nice...

March 08, 2008

Building a Vista Style Folder Browser with ASP.NET 3.5 and a Custom Hierarchical DataSource Control

A while back, I wrote a post describing how to create a folder browser with ASP.NET 2.0 using the TreeView, UpdatePanel, GridView (customized to always display header row) and a modified version of the FileSystemDataSource as described on MSDN.  I have used this widget on a few different projects and I generally like how it works (you can view the demo here).  One thing my original implementation is clearly lacking is a professional look and feel.  So I recently had the opportunity to upgrade it to .Net 3.5 and in the process I decided it was time to overhaul the style.  Using the Vista folder explorer as my template, I made the following changes to the original sample ... Replaced the plus/minus icons with dark and light arrows Added soft blue rounded corners to the explorers container Added modified date column to the right hand pane Added a footer the...

March 02, 2008

Tag Cloud Filters with ASP.NET 3.5's LinqDataSource and ListView Controls

This past week I finally set aside some time to take a look at Silverlight.  I started with ScottGu's digg demo application and continued on to silverlight.net to check out what some of the early adopters have already built.  I didn't get too far before I bumped into a control on the Silverlight showcase homepage that thought was pretty interesting.  The control is a datagrid of sorts that allows you to filter the contents of the grid using a tag cloud.  So I took a crack at creating a similar looking grid using ASP.NET 3.5 (the screen shot is below). Notes: The icon images used in this sample are transparent PNG's, so the demo page looks a little goofy in IE6. Live Demo (IE7, FF and Opera 9.26) | Download (.Net 3.5) Update (3/4/2008):  Mark Grubner posted the following comment: A question about this one though - could you comment...

January 27, 2008

YUI Style Glowing Buttons with the AjaxControlToolkit GlowButtonExtender Control

YUI recently added another button type to their control library - they call it the Glowing Button Control.  The Glowing Button Control allows you to add a glossy, glass like effect to your buttons along with a glowing background.  The YUI documentation says the inspiration for the design came from the Aqua buttons found in Mac OS X.  Below is a progression of screen shots that try to show the glowing effect, but you should really check out their demo page to get the full effect.       A project I am working on could use something like this to liven up a few of our screens.  We are prototyping a new design for our landing screen and of course we want it to be as sexy as possible.  The purpose of the landing screen is to let the user know about what our product is about and have them sign...

January 10, 2008

Building a Grouping Grid with the ASP.NET 3.5 LinqDataSource and ListView Controls

I haven't played too much with ASP.NET 3.5's new LinqDataSource control yet - so I figured it was about time I did a little research and checked it out.  Typically, I like to document my research by creating a small prototype application focused on a handful of the new features that I am investigating.  I find building a reference application is helpful because it tends to drive out some of those nasty implementation details that somehow remain hidden if I just browse the documentation or read a reference book.  So for a recent research project, I decided I would look into the LinqDataSource's control GroupBy and OrderGroupBy attributes to see if they could be used to help me build a grid that supports grouping.  Below is the final screen shot for my reference application.  The grid shows the rows in the Northwind Orders table - grouped by the customer that...

January 06, 2008

CNN Style Scrolling Ticker with the Marquee Toolkit Control

I was browsing ajaxrain's catalog yesterday and I cam across a pretty nifty jquery plugin called liScroll that allows you to turn an ordinary HTML UL/LI into a scrolling ticker.  Besides scrolling the items from right to left, the liScroll plugin supports two additional features It allows you to specify the scrolling speed by changing the value of the travelocity parameter The scrolling automatically pauses when you mouse over it After seeing the liScroll demo, I was certain that this was something I could use for some of the sites I am working on.  So I decided to see what it would take to implement a scrolling ticker control using the AJAX Control Toolkit.  In addition to the liScroll features listed above, I also wanted to incorporate a few other enhancements, including Support both left-to-right and right-to-left scrolling directions Support applying a CSS class to the item when it is...

December 28, 2007

Creating a Google Suggest Style Filter with the AutoComplete Control

I spent some time playing around with the AutoComplete control to see if we could use it to provide smarter filtering capabilities for our data tables.  The general idea was that I would allow the user to select a filter column from a drop down list.  Then as they key in characters into the adjacent textbox I would use the AjaxControlToolkit's AutoComplete extender to suggest some values to filter by.  You can see this in the screen shot below.  I selected 'City' in the drop down and then typed 'be' into the textbox and like magic the 3 cities in my data set that have start with 'be' appear.  Live Demo (IE6, IE7 and FF) | Download (.Net 3.5 and Toolkit 3.5.11119.0) If you are interested in how I created this sample, the details are below. The AjaxControlToolkit's AutoCompleteExtender If are familiar with Google Suggest, the concept behind the AutoComplete control...

December 23, 2007

A Slider DataPager with Dynamic Tooltips

A few weeks ago I wrote a post explaining how the AjaxControlToolkit's Slider control could be used as a data pager.  One of the teams I am currently working with has adopted this approach and is implementing it throughout their site.  While this technique seems to work well, one feature the team would like to add is a custom tooltip that not only displays the typical paging statistics (i.e. page X of Y), but also gives the user a hint as to what can be found on each page of data.  It's this last bit of information that increases the value of the tooltip.  Not only are we showing the user the typical paging statistics, but now they can get an idea of what data can be found on the page before actually navigating to it.  Below is a screen shot of how this looks.  Live Demo (IE6, IE7 and...

December 19, 2007

IE7, ClearType, DXImageTransforms and Fade Animation Fuzziness

A while back I wrote a post about adding animation effects to the AjaxControlToolkit's Tab control.  The demo I created for the post used the toolkit's FadeIn animation to fade the selected tab into view as it became active.  I thought this turned out pretty well, however I noticed that after the fade animation finished running the tab's text contents remained a little blurry.  Compare the before and after.   To see this for yourself, open the demo page and click on the 'Play Fade Animation' button at the top of the screen.  Notice how the text looks a little blurry after the animation runs?   Ted Glaza responded to that original post and provided a hint as to what might be causing the problem The problem you're seeing with the FadeIn animation has to do with how IE and ClearType work together. Searching "IE ClearType Opacity" should provide more details....

December 12, 2007

Debugging ASP.NET AJAX Applications with the Trace Console AjaxControlToolkit Control

I was browsing through the YUI developer site and came across another component that I thought would make a nice addition to my ever growing toolbox.  It's their Logger Control.  The YUI guys have created a floating debug console window that displays messages as they are written to the YUI log object.  You can check it out for yourself on their demo page.  Besides just displaying the messages, the Logger Control also supports a few of the other standard log browsing features, including Viewing messages by severity (info, warning, or error) Viewing messages by source (global or LogReader in their sample) Pausing and clearing the trace Collapsing the trace console window Repositioning the trace console window by 'drag and drop' Live Demo (IE6, IE7 and FF) | Download (ASP.NET 2.0 and Toolkit Version 1.0.10920.0) I think this Logger Control could be quite useful.  ASP.NET AJAX has a similar concept, however...

December 02, 2007

Data Navigation with the ListView, DataPager and SliderExtender Controls

As I mentioned in a previous post, I am currently researching what advantages ASP.NET 3.5's new ListView control would have over the GridView.  To continue down this path, I thought it would be a good idea to look into how paging work with the ListView.  To direct my research, I created a sample data table that supports paging via the standard paging buttons as well as with a slider bar.  Below is a screenshot of the table.  As usual you can follow the links below to view the live demo as well as download the code. Download (.Net 3.5 and AjaxControlToolkit 3.5.11119.0) | Live Demo (IE6, IE7 and FF) If you are interested in the implementation details, they are outlined below. Overview of the DataPager Control Before today, I had not yet worked with the DataPager.  So to start off, I went out to MSDN's documentation and read through it.  To summarize MSDN, the DataPager can be used to display paging navigation controls...

November 29, 2007

A Few Options for Dynamically Adding Image Reflections

While waiting for VS 2008 Web Developer to download, I took some time to browse through the Visual Studio Express site.  I am not usually a fan of sites that use a black background, but I thought it actually looked pretty good here.  The contrast between the white text and black background makes it hard to look at for too long, however in general the site gives off that sleek and cool vibe that I am certain the designers were shooting for.  One visual item in particular that caught my eye was the nice reflection effect all of the images on the page had.  Check it out in the screen shot below.    Live Demo | Download (IE6, IE7 and FF) I have briefly looked into this before so I was curious how this page had implemented it.  I opened up the IE Developer Toolbar and took a quick look.  For this page, the developers created a single image that contains both the image and the reflection.  You can...

November 11, 2007

Anti-Aliased Rounded Corners with the NiftyCornersExtender Control

When I was in college I took a course on Software Construction.  With 3 weeks left in the semester, the professor assigned us a project that he knew would take close to 6 weeks to implement.  To meet the deadline he allowed us to leverage 3rd party components where possible.  He encouraged us to think about a solution that was constructed from other components as opposed to one that we developed from scratch.  This professor was good.  This is exactly the same type of problem I encounter everyday. Live Demo (IE6, IE7 and FF) | Download (Uses Toolkit Version 1.0.10920.0) I took this construction approach on a recent project.  Our team is looking to soften some of our UI elements by using the toolkit's RoundedCornerExtender control.  The toolkit's rounded corner implementation does not include anti-aliasing and as a result, the corners look pretty rough. (Anti-aliasing is a technique that is used to make graphics and text easier to read.  Here is...

November 04, 2007

'Don't Ask Me Again' Delete Confirm Using a ModalPopup and ASP.NET's Profile Properties

Like I mentioned in my last post, I have been researching ways to make our web application a little more user friendly by including a handful of personalization features.  This research was oringally spawned from one of our more savvy users that was tired of always confirming deletes via our delete confirm dialog.  Our standard thus far has been to include this confirmation step at every place within the application where we allow the user to perform a delete.  For some users this confirmation step has become a little annoying.  So I nominated myself to look into what it would take to include the typical 'don't ask me this question again' checkbox to our confirmation dialogs. Live Demo (IE6, IE7, FF) | Download (Uses Toolkit Version 1.0.10920.0)        Notes on the Demo: Use the 'Reset Profile' button if you want to see the confirm dialog again I removed the connection string from the download's web.config.  You will need to point to your existing...

November 01, 2007

5 GridView Themes Based on Google's Personalized Homepage (igoogle)

On my work and home PC's I have my browser's homepage set to google.com.  Like the rest of the world, for about the past 7 years or so I have been using google as my starting point for Internet searches.  Sometime within the past year I took the time to setup google's personalized homepage - igoogle.  I configured my homepage with a nice blend of sporting and tech related gadgets.  I like this because it gives me a nice dashboard to the content that interests me most. Live Demo (IE6, IE7, FF) | Download (Uses Toolkit Version 1.0.10920.0) One of the silly features I have found that I like about igoogle is how the pages color palette changes depending upon the time of day.  So as the day progresses from morning to afternoon to evening the colors on the page change as well.  Like I said, I know this is a silly feature, but I like it.  And I have asked...

October 29, 2007

GridViewControlExtender II - Header Cell MouseOver Styles and a Few More Live Examples

I recently wrote a posting showing how GridView mouseover effects can be added to your existing GridView's through the use of a AjaxControlToolkit extender control.  In the last portion of the post I mentioned how I thought it would be useful to add other features into this extender to support column and header cell cell hover and select effects.  So on a recent road trip to Orlando FL I added a couple new features to this extender control and built a handful more grids to show off the new enhancements.  One of the new GridView themes uses the Sharepoint 2007 calendar color scheme and the other is derived from the ExtJs Data Grid.  All of the grids can be viewed on the demo site and of course you can also download the full source.   Live Demo (IE6, IE7 and FF) | Download The GridViewControlExtender now includes support for applying column hover and select CSS classes to cells that are in the same column...

October 23, 2007

GridViewControlExtender - Row MouseOver and Click Styles

In a recent post, I created a GridView that with the help of some JavaScript and CSS rendered similar to the Tablecloth style table shown here.  I like the Tablecloth sample because the presentation of the grid changes as the user interacts it.  It does a good job of keeping the user focused on the data elements the they are currently working with.            Live Demo (IE6, IE7, FF) | Download   The design of the Tablecloth grid is fairly simple.  It boils down to adding and removing CSS classes to the individual HTML Table elements (mostly TD's and TH's) in response to a four different DOM events (mouseover, mouseup, mousedown and click).  For example, when the mouse cursor is positioned over a particular cell in the table, the mouseover event fires and a bit of JavaScript runs and applies a CSS class to all of the cells that share the same rowIndex or cellIndex.  The image below shows how this works.  When the mouse is positioned over...

October 22, 2007

Theming the AjaxControlToolkit's Calendar Control

The calendar control that my team is using in our current web application is terrible for three reasons: it is ugly.  Viewing the control reminds me of the first time I went back to Window's 95 after having upgraded to XP it opens the calendar control in a new browser instance (something our users hate) it has a lot of supporting, custom JavaScript that has had its fair share of bugs If I am not mistaken, somehow the control survived the port from classic ASP to ASP.NET 1.1 and then again from ASP.NET 1.1 to ASP.NET 2.0.  I have no idea where the control orignally came from, but it is time to get rid of it. Live Demo (IE6, IE7, FF) | Download So my latest research tasks was to look into replacing this legacy control with something a little hipper.  I took a look at the AjaxControlToolkit's Calendar control to see if it was something we could use.  Sure enough...

October 14, 2007

Improving the Presentation of an Extra-Wide GridView

The codebase for the web application I am currently working on is pretty new.  We ported our legacy application from .Net 1.1 to .Net 2.0 and in the process we did a complete redesign of our presentation and business logic layers.  However, we did not do the same with our data model.  We upgraded from SQL Server 2000 to 2005, but for the most part we kept the exact same datamodel.  So while from a technology standpoint we have a completely new platform, our data model is about 5 years old.  Over those 5 years most of datamodel changes have been the addition of new columns to existing tables.  As a result, a number of our core tables have become quite wide.  And as the tables in our underlying datamodel get wider over time, so do the grids that present the data.         Live Demo (FF, IE6, IE7) | Download So during a recent visit to the Ajax Rain site, I came across a sample that had a few...

September 19, 2007

Animating the ModalPopupExtender

I recently stumbled upon this site again.  I remember on my first visit, I thought it was pretty cool how the modal popup's incorporate subtle animation effects that give the pages a little extra pop.  If you go to the site you can check it out for yourself.  Try clicking on any of the 3 images on the page and watch closely for the animation.  [Update: 9/20/2007] I followed up with Ted Glaza on his comment and he provided some additional information.  I included the email thread at the bottom of this post. Live Demo | Download This page appears to be using PHP, but I thought it might be interesting to re-engineer the modal popup using ASP.NET AJAX plus the ModalPopupExtender control from the AjaxControlToolkit.  I figured there should be some way to run an AjaxControlToolkit Animation when the dialog is displayed ... It turned out this was a little more difficult that I...

September 17, 2007

Freezing GridView Column Headers using Only CSS

Recently I wrote an article describing how you could use CSS plus a GrdiView Control Adaptor to add the 'frozen column headers' feature to your GridView.  Live Demo (IE only) | Download I received the following comment from a kind reader named Mitch: I have also noticed that applying a skin to the gridview also seems to create TH elements for the headers. I have a simple solution that freezes the headers by doing the following: apply a skin to a gridview. wrap the gridview in a div or fieldset. Apply a css class to the wrapper that sets the overflow to scroll and the TH position to relative. You may need to set the TR height to 0px for IE. I set the height of the wrapper in the local style so I can reuse the css class. I have tested this in IE6 & 7 and Firefox and it works...

Topics: ASP.NET , GridView , Prototype

September 13, 2007

Freezing GridView Column Headers with CSS and a ControlAdaptor

I was recently browsing through some of the CSS samples on Stu Nicholls web site.  I came across one that showed a couple of examples of how CSS can be applied to HTML tables to provide the 'frozen columns headers' feature.  [Update: 10/1/2007]: I wrote a follow-up post describing how to acheive this using only CSS. Live Demo (IE Only - this is just a prototype) | Download In case you missed it, Dan Wahlin also recently created a nice AJAX Extender Control that accomplishes that same task using the ASP.NET AJAX client-side extender framework.  Dan's solution seems to work great (I have downloaded and played with it, but I am not using it in our production application), but I after looking at Stu's CSS only solution, I was curious what it would take to create an AJAX-less solution.  Stu's and Dan's solution are pretty similar.  Both embed the table within a DIV element to handle...

Topics: GridView , Prototype

August 30, 2007

Creating a GridView with Resizable Column Headers

I was recently reading Dan Wahlin's excellent 'How To' for creating a GridView extender control.  While I was going through his code samples, I thought it might be interesting to create another GridView extender that allows you to resize the column widths of the GridView by clicking and dragging the header cell borders.  Before I went down the path of actually implementing the extender control, I wanted to get a feel for what the client side code for handling this might look like.  So I quick created a sample application where I added this functionality to the Google Analytics GridView I blogged about in an earlier post. ** Because this sample is a proof of concept, I only tested in IE7.  If I move the code to an extender control I will go back and test it with other browsers.  Live Demo | Download Before I get into the implementation details, here is a quick screen shot of the grid. ...

August 19, 2007

How To: Dismiss a ModalPopup using the Escape Key

The web application I am currently developing has a handful of cases where modal windows are used to gather user input.  Lately, I have been considering replacing these modal windows with an asp:Panel that is displayed as a modal popup using the AjaxControlToolkit's ModalPopupExtender control.  In the process I noticed a small usability issue with the ModalPopupExtender's behavior.  Unlike other modal windows, the popup is not dismissed when the user presses the 'Esc' key.  I am one of those users that relies heavily on the keyboard and only uses the mouse as a last resort - so I find this rather annoying. Live Demo | Download Hopefully, this functionality will make it into the toolkit one day.  Until then, you can add it to your pages by including a small amount of JavaScript.  In the sample page I created for this demo, I attached a handler to the document's onkeydown event.  In the handler I check to see if the key pressed was the 'esc' key, if so I find the ModalPopup component...

August 15, 2007

Virtual Earth Map Control within a ModalPopup

As mentioned in my previous post, I am currently researching different ways my current projects web application can better leverage the Virtual Earth Map Control. Currently, we have a single page buried deep in our sitemap that users can use to view an aerial photo of a particular property.  Users love the mapping feature and have requested that it be made available on more of our screens.  Our applications most heavily used screen allows users to search for real estate that is currently for sale.  The page is setup as a standard search page with a handful of input elements at the top of the page that the user enters parameters into.  When they click search, we run fetch the records that meet their criteria and populate a GridView with the results.  We thought it might be interesting if we could display the Virtual Earth Map as a popup right on this search screen.  To see what this would take I created a sample page that displays the names, address and geo information from...

August 14, 2007

Master/Detail with ASP.NET AJAX and the MS Virtual Earth Control

I was recently working on a research project with the purpose of exploring how ASP.NET AJAX could be combined with Microsoft's Virtual Earth Map Control to implement the common master - details UI pattern.  Our application allows users to browse zip-codes using the Virtual Earth Map Control and we thought it would be useful to display details for the zip-code as it was being hovered over. While investigating this I created a prototype web application that does the following: Renders purple polygons on the VEMap surface representing the following 3 zip-codes: 32224, 32246, and 32256. When the user hovers over the polygons, 2 things happen: The border of the polygon changes to a thicker width.  This is a visual cue meant to inform the user of their action The information displayed in the table to the right of the map updates.  This table displays some high-level demographic and weather statistics. Live Demo | Download Here is a brief explanation of how I accomplished this.  The example...

August 10, 2007

How To: Use the HoverMenuExtender for GridView RowCommands

I love the AjaxControlToolkit.  The controls are free, the code can be downloaded, and the documentation is well above average.  However, I was a little surprised when I looked at the code and supporting documentation for the HoverMenuExtender's sample page.  The documentation states the following In the sample above, an ASP.NET GridView is populated with data from a database. In each row of the GridView, a HoverMenu associates the content of the row with a Panel containing links that operate on that row. The sample page does contain a GridView, but it doesn't look too much like the GridViews I have created or seen in the web applications I have worked with.  The main differences are the following The sample GridView doesn't support Sorting  The markup for the GridView doesn't use BoundFields, but instead has a single TemplateField that has an embedded table for both the ItemTemplate and EditItemTemplate The first item are show stoppers for me because the DataSources I...

August 09, 2007

PopupControl/RadioButtonList as DropDownList Alternative

My current employer uses a web based tool for project management.  The tool is visually appealing and provides users with a great web experience.  It's an ASP.NET application that relies heavily on ASP.NET AJAX.  One of the AJAX features I like is the use of a popup control for status/type selection (i.e. what state is this bug {Open, Closed, Pending Acceptance, ...}).  Most existing web and windows applications usually present this as a drop down list.  Live Demo | Download Obviously, there is nothing wrong with the drop down approach, but I thought I would create an example showing an alternative technique using the PopupControlExtender found in the AjaxControlToolkit along with the regular ASP.NET RadioButtonList control.  The main advantage the PopupControl/RadioButtonList approach has over the standard ASP.NET DropDownList is that it provides the developer with a finer grained control over the presentation.  Here are a couple of screen shots that show this alternative technique.  Because the RadioButtonList control exposes attributes for controlling the layout, it is easy to configure exactly how...

August 05, 2007

DisableControlExtender

I recently wrote a post showing how the contents of an UpdatePanel can be disabled using a technique similar to what the ModalPopupExtender control does.  The ModalPopup control adds a div onto the page that covers the all other elements by setting the width and height to the windows width and height and then sets the div's z-order to a very high number (like 1,000) ensuring that is it the top most element.  This div covers all of the other elements on the screen which provides the modal behavior. I received two comments from this post It doesn't work with FireFox  It would be nice if this was an ASP.NET AJAX extender control I have not created an AjaxControlToolkit extender control before so I figured this would be a good opportunity to learn something new.  Because I had already developed the code for the previous entry, I figured it would come down to copying and pasting the code into the appropriate methods of the AjaxControlToolkit framework.  Sure...

August 01, 2007

Disable UpdatePanel Contents During Async PostBack

About a month ago I wrote a post describing how an UpdatePanel could be used to enhance the regular asp:Wizard control.  In response to this post, Bilal posted the following comment Is there a good way to disable the wizard control when the updateprogress is showing and not only fade it out? Live Demo 1 | Live Demo 2 | Live Demo 3 | Download [Update: 8/9/2007] I updated the sample site, download and code samples to include the trailing 'px' when setting the width/height so it would work with FireFox. [Update 8/6/2007] I followed a Ryan and MichaelD's advice and converted this example into an extender control.  You can view the posting here.  This posting also provides an interactive demo and the full source code.  It also fixes the FireFox problem. I hadn't tried this before, but I can see how it would be useful.  In the web application I am currently working on,...

July 15, 2007

How To: Create an ASP.NET AJAX Style Folder Explorer

I recently created a folder explorer using a combination of the ASP.NET TreeView and GridView controls as well as the new ASP.NET AJAX UpdatePanel.  You can view a live demo of the folder explorer here. The code for this sample is at the bottom of the page. [Update 7/24/2007]: Here is another post regarding this, except with a few more enhancements [Update 7/17/2007]: Per Ruckus' comments, I would like to make the following clarifications: The sample provides read-only access to the folders and files, making it more of a 'Folder Browser' instead of an Explorer A full-postback is done when a folder is clicked in the right hand pane.  If you have a suggestion to a nice way to have the Folder image buttons cause async-postbacks instead of complete post-backs, let me know.  I thought about possibly handling the RowDataBound event and explicitly calling RegisterAsyncPostBackControl ... Offically the TreeView control is not supposed to...


Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • TimothyP wrote: I work with tons of developers who haven't even got a clue what Twitter of Facebook is. In fact, it'...
  • Janko wrote: Yes it's strange that people think it's ok to blog at work but consider unethical to use facebook. P...
  • Kam Lagan wrote: Hi Matt, The numbers do seem a little "off" to what you perceived the community would be like. But...
  • Siderite wrote: You're kidding me! So the people that don't blog think it is ok to blog at work (maybe because they ...
  • Guy Harwood wrote: Good to see the results. one typo.... 'What best describes your current job title?' appears twice,...
  • sirrocco wrote: One problem with : DEV I DEV II DEV III was that I didn't know what it meant :( .(is it common ...
  • Jack wrote: How many person fill the survery? Blog is very common, so I don't think 71.5% is high. Maybe our bos...
  • Andy wrote: Done. The developer1, developer2 question - not sure how meaningful the results are going to be for ...