April 29, 2008

Master-Detail with the GridView, DetailsView and ModalPopup Controls

A while back I wrote a post describing how the DetailsView, GridView, UpdatePanel and the AjaxControlToolkit's ModalPopup controls could be used to implement the common Master/Details UI pattern.  I cheated a bit when creating my original example in that I didn't really complete the implementation - the Save button on the popup didn't actually do anything.  Since writing that post I have received a lot of email and a number of people left comments asking me to complete the example - so here it is.  If you plan on reading through this article, I recommend playing around with the demo site to get a feel for how the page works.  All data changes are only persisted to memory, so don't worry about messing up the data set. Live Demo | Download Scenario I am sure everyone is pretty familiar with Master/Details style of editing data, but just in case -...

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

October 15, 2007

YUI Style AJAX Progress Indicator

If you follow my blog, you have no doubt noticed that I have been taking a tour through the Yahoo! User Interface Library (you can read my previous posts here, here and here).  Well, I think I have finally made my way through a majority of the content and feel like I have come out with a few new UI components that I can incorporate into my current web app.  But before I move on, I thought I would write one last brief post describing how you can incorporate the YUI style progress panel into your existing ASP.NET AJAX web application. Live Demo (FF, IE6 and IE7) | Download The markup for the progress panel is below.  <asp:Panel ID="pnlPopup" runat="server" CssClass="progress" style="display:none;"> <div class="container"> <div class="header">Loading, please wait...</div> <div class="body"> <img src="img/activity.gif" /> </div> </div> </asp:Panel> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode...

August 27, 2007

Using the AJAX Timer Control as an UpdatePanel Trigger

In the web application I am currently developing there is a page which allows user's to start an off-line process.  There are a number of parameters the user can configure that will effect how long each of the processes take to complete.  When the system in under a typical load an operation can take anywhere from 30 seconds to 30 minutes depending upon how it is configured.  After the user kicks off the operation, we redirect them to a status page that contains a list of all of the finished, queued and currently executing operations in the system.  The idea being that the user could see where there process is in the queue so they could get an idea of when it might complete.  After the page was in production for a few months, we started getting feedback from our users saying they would like it if this status page would automatically refresh every 30 seconds or so so they can continuously view the most up to date state...

August 22, 2007

Recreating the Google Analytics Table as an ASP.NET GridView

I really like the grid in Google Analytic's 'Top Content' grid (see below).  I like it because it incorporates a number of useful grid features without taking up too much room.    I thought it would be interesting to see what it would take to have an ASP.NET GridView render in a similar fashion.  In particular, I was interested in incorporating the following features Include each records row number as the first column in the table Improve the column sort presentation.  The grid in the image above is currently being sorted by the Pageviews column.  Notice how there is not only an icon that indicates the sort order (ascending or descending), but the column becomes a darker shade of gray (both header and data rows) Add a 'Go to' textbox that will take the user to the specified page Add a DropDownList for changing the page size Include the current page offset as a status message (i.e. '1 - 10 of 69')  Provide 'next'/'previous' navigation between pages Live...

August 06, 2007

UpdatePanelAnimationExtender - OnUpdating Will Always Play

Did you know that the when a partial postback starts, the OnUpdating animation for all of the UpdatePanelAnimationExtender's on the page will play.  Here is part of the documentation taken from the UpdatePanelAnimationExtender page It is important to note that because of the UpdatePanel architecture, the OnUpdating animation will always play when any partial postback starts, but the OnUpdated animation will only play at the end of a partial postback if its UpdatePanel was changed (note: setting the UpdatePanel's UpdateMode="Always" will ensure the OnUpdated animation plays when every partial postback completes). Unless I am mistaken, I believe this behavior is for the scenario where an UpdatePanel's UpdateMode is set to Conditional, and the code on the server handling the partial postback explicitly calls Update on the UpdatePanel.  In this case, where logic on the server decides if an UpdatePanel is refreshed, the UpdatePanelAnimationExtender has no way of knowing if it should have played the...

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 30, 2007

How To: Lazy-load TabPanel's within the AjaxControlToolkit's TabContainer Control

I am currently working on a data-centric web application.  The page I most recently worked on allows the user to browse data from six different tables (a primary table, and five other tables that have 1-M relationships to the rows in the primary table).  A row from the primary table is displayed in a DetailsView.  Below the DetailsView is a TabContainer control with five tabs; each tab contains a GridView that displays the related rows in the other five tables.  Below is a screen shot of what the TabContainer portion of the page looks like.  Live Demo | Download Sample Site When I first developed the page, I bound the DetailsView and each of the GridViews to the corresponding DataSources like I usually do.  Everything worked great in our development environment.  The grids filled nicely and I could move around from tab to tab with no problems.  However, when we moved the page into our production environment loading the page was terribly slow.  In production, we have n-times more data and...

July 24, 2007

AJAX Style Folder Browser, Part II

In a previous post I discussed how to use combine the TreeView, GridView and UpdatePanel controls to create an AJAX style folder browser.  I tagged this previous post as 'prototype' with the intentions of coming back to it and updating it to something that is more production ready.  This evening I found some time to work on it again.  I made a couple of enhancements that help both the usability (no more full postback when a folder is clicked in the right hand pane) as well as the codebehind (I created a FileSystemDataSource control for interacting with the file system)   Live Demo: AJAX Folder Browser Download: Sample Web Site [Update 7/25/07] Thanks to some feedback from Bilal, I fixed a bug where clicking on the pdf text would cause the famous PageRequestManagerParserError.  The problem was that I registered the ImageButton as a postback control, but not the LinkButton.  This has now been fixed and...

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

July 10, 2007

ModalPopupExtender Example for Editing Rows in a GridView (Master/Detail Scenario)

The web application I am currently working on is a data-centric, internal facing application targeted at the knowledge workers within our enterprise.  A majority of the pages are our core 'search' pages that contain a GridView and a number of input elements for entering search criteria.  Each row in our GridViews contain a hyperlink to a supporting 'details' page that has additional information for the selected row - usually contained in a DetailsView.  Our standard for implementing this has been to render the values for the GridViews primary key column as a hyperlink that takes the user to the details page passing the PK through the query string.  This all works fine and our users seem to be OK with this type of naviagation.  But when I was recently doing some work with the ModalPopupExtender, I was curious if we could improve this flow by keeping the user on the main search page by moving the DetailsView to the ModalPopupExtender.  See the screen...

July 05, 2007

Google Analytics like AJAX Progress Indicator

Lately I have been playing around with AJAX progress indicators (gmal-like progress indicator, apply an UpdatePanel to an asp.net Wizard, and animated GridViews).  I saw this one (see screen shot below) on one of the Google Analyitics pages.  I liked it - so I figured I would write up a quick sample using it.  I am not going to go into detail regarding the specifics of the implementation, but the complete source for the page is listed below (it requires the AjaxControlToolkit).  Also, here is the animated gif  and here is the link to the tool that I used to create it.  Enjoy! [Update: 7/31/2007] I have included a link to download this sample website.  The site contains 2 pages both displaying the same demo.  The first page (Default.aspx) uses C# for the codebehind and the second one (Default2.aspx) uses VB. View Live Demo | Download Code Complete source for this example:<%@ Page Language="C#" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

July 04, 2007

Delay Load an UpdatePanel

Like most people, I use more than a few of Google's web applications on a day to day basis.  I think what I like best about their applications is the elegance of the user interface.  Just recently I started using their analytics web application to learn more about what drives visitors to my site.  One of the pages within the tool is a dashboard screen that displays a handful of different panels, each containing summary information pertaining to the web traffic for my site.  Some of the panels display charts and graphs, while others contain tables with aggregated data.    As you can see, there is a lot of information being displayed on this page.  And as far as the user experience is concerned, this page is great.  It delay loads each of the panels instead of waiting until all of the data for all of the panels has been processed before serving the page.  As a result, the page loads almost immediately and the panels come to life one at a...

In-Depth: The UpdatePanel ASP.NET AJAX Server Control: Triggers and UpdateMode

By using asynchronous post-backs with the new ASP.NET AJAX UpdatePanel server control, you have the unique opportunity to improve both performance and user experience of your web pages. [Update: 7/31/2007] Per request I have included the code for the live demo for download Download Code Performance gains are achieved because ... Less data is round-tripped during an asynchronous post-back - keeping the network load light  The browser does not have to rerender the complete page, just the part that was updated The server does not need to generate the full page output, just the portion(s) that are updated User experience is improved because ... Responsiveness is increased as the user can continue to interact with the page while the asynchronous operation is executing The complete page is not always reloading If you are not familiar with AJAX, or if you are familiar but need a refresher, here is a live demo page.  The page contains two GridViews, the top one does not...

June 24, 2007

ASP.NET AJAX: Rendering a Gmail-like 'Loading' Indicator over a Specific ASP.NET Control

I came across a blog post discussing a slick way to use the ASP.NET AJAX UpdateProgress control to add a gmail-like progress indicator to an ASP.NET web page.       I liked the approach the author used and it clearly works great for scenarios where you want to display a single 'something is happening' message to the user while the page is being updated.  However, after the operation completes and the indicator disappears, it is still up to the user to figure out where on the screen (i.e. what control was updated?) to look for the new changes.  If your screens are relatively simple, or if you feel the update should be obvious this is probably not an issue for you.  Unfortunately things aren't so for the web application I am currently working on.  A few of the screens contain a number of different sections and users would like to see the indicator rendered over the control (most commonly a GridView...

June 03, 2007

Quick Ajax Tip: Provide a better asp:Wizard user experience

In a recent post I outlined an technique that I have been using to center an animated gif over an asp:GridView while it is being refreshed via the asp:UpdatePanel.  I like this approach because it provides the user with 2 visual cues (the control fades in/out and the animated gif displays a progress bar) letting the user know the panel is in the process of being refreshed.  In this sample, I use a similar approach and apply it to the asp:Wizard control. Download code | View live demo Here is the outline of the technique: Wrap the asp:Wizard within an asp:UpdatePanel (requires the Ajax.Net) Add an HTML div tag to the page containing the animated gif that will be rendered over the asp:Wizard while the panel is refreshing Set the display style to 'none' so the image is initially hidden<div id="updateProgressDiv" style="display: none; height: 40px; width: 40px"> <img src="simple.gif" /> </div> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier,...

May 21, 2007

Ajax.Net Example: Using an UpdatePanelAnimationExtender to place an animated gif over a GridView

 I recently was working on an Asp.Net project that contained quite a few search pages.  These pages all followed a similar structured pattern where the user had a set of fields they could filter on by typing in values and pressing the search button.  The results were displayed in a GridView where the user could sort by clicking on column headers, export the results to excel, etc...  To help improve user experience, we placed each of the GridViews in an asp UpdatePanel so while the user refined the search (sorting, adding or removing additional filters), only the GridView would be refreshed and not the entire page.  Additionally, we wanted to add a few standard UI cues (disabling the Search button, fading out the GridView, and placing a progress indicator over the GridView) letting the user know an operation was currently in progress. Download Code | View live demo It turned out that adding these UI cues was pretty easy...

May 01, 2007

7 simple steps to ajax-enable your ASP GridView

I recently used the AJAX.NET framework in a project and I was impressed with how easy it was to implement and how much it improved the usability of our pages.  Our project had quite a few advanced search pages where users can enter in a number of different filters and then hit the search button (usually iteratively - filter/search; filter/search; etc...).  Before the Ajax framework and Ajax Control Toolkit were applied to the pages, each time the user would tweak a filter or request a different column sort, the complete page would refresh.  After adding Ajax to the pages, just the GridView is re-rendered giving the user the much nicer web 2.0 user experience.  Anyway, here are the steps I followed for adding these features to our project ... Download code | View live demo Step 1: Download and install the official ASP.NET Ajax Framework Microsoft released the RTM version of the Ajax framework (previously named Atlas) for .Net 2.0...


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