Matt Berseth

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

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

If you have been working with Microsoft's ASP.NET AJAX components, you are probably very familiar with the $get and $find JavaScript shortcut functions.  If not, here is a quick refresher. $get Overview $get can be used as shorthand for the document.getElementById and element.getElementById functions.  The $get shortcut function points to the Sys.UI.DomElement.getElementById JavaScript function which is defined as part of the ASP.NET AJAX client side library (which means you will need to include a ScriptManager on the page to be able to use it).  $get accepts two parameters, the first is the ID of the DOM element you want to retrieve, the second is the parent element of where the search starts.  The second parameter is optional and when it is not supplied defaults to the document element.  Here is the official API reference. If you happen to step into $get during a debugging session you will find that it basically comes down to the following function ... function get(id, element) { // validation code...

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

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

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

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

Ever run into one of those really tough technical problems at work?  The type of problem that persists through hours of googling.  The kind that remains unsolved even after downloading numerous CodeProject samples?  I think every developer has been there one time or another.  It comes with the territory, but there is a solution: Microsoft's MSDN Forum Website.  The MSDN Forums are patrolled around the clock by some of the most talented technical people in the industry.  If anyone is going to be able to help you solve your problem, it is one of these people.  The trick is that you need to craft your question in such a manner that it is appealing to answer.  If want your question answered first you need to make it stand out.  What makes a post attractive to other developers?  CODE SAMPLES!  Shame on you if you answered that incorrectly.  At some level, forum threads are similar...

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

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

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

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

In the web application I am currently working on I use the ModalPopupExtender control in a handful of places.  When I first added it to a page, I noticed the browser (tested in both IE and FireFox) would display the contents of the popup for a split second before hiding it.  In IE, the popup contents is visible long enough that I was able to snag a screen shot of it in only 3 tries (in the screen shot below, 'Hi' is supposed to be displayed in the popup when the button is clicked).  Demo With Flicker | Demo Without Flicker To get around this, I explicitly set the display style to 'none' on the popup Panel.  This has solved the problem.<asp:Panel ID="pnlPopup" runat="server" style="display:none"> Hi </asp:Panel> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem...

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