Matt Berseth

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

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

Last week DiscountASP upgraded to .Net 3.5 SP1 - so I took sometime this weekend to publish demo's for my 5 Dynamic Data posts.  Here is a quick summary of what is out there ...    ASP.NET Dynamic Data - Simple 5 Table Northwind Example Very simple DD site based on the 5 core Northwind tables.  Read more ... Download | Live Demo   Dynamic Data and Custom Metadata Providers DD enabled controls take rendering hints from the metadata you apply to your data model.  This post shows how you can create a custom metadata provider that will provide sensible default values for the DisplayName and DisplayFormat attributes.  Read more ... Download | Live Demo   A Dynamic Menu For Your Dynamic Data This post continues the custom metadata theme and shows how you can use the existing Category attribute to create a 2 level navigation bar.  Read more ......

I spent a few hours putting together a Dynamic Data web site using the YUI DataTable and DataSource components.  I mostly just did this out of curiosity to see how easy or difficult it would be to use the DD API with other components besides the GridView and DetailsView controls.  So I created a DD web site that provides read-only access to Northwind's Customer, Employee and Supplier tables, but I am not using ASP.NET's GridView, DataSource and UpdatePanel controls to render the grid.  Instead I have replaced these components with YUI's client side DataTable and DataSource and serve the data using a web service (paging included!).  Below are a few of the highlights, and don't forget to download the sample and try it out for yourself.  Its experimental, but if you are new to DD or YUI you might find it interesting.  [Update: 9/21/2008]: Added live demo link  Download |...

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

So I am still playing around with building a Northwind Dynamic Data web site.  Tonight I thought it would be interesting to see what it would take to create a menu for navigating the tables in the site.  I was particularly interested in seeing if I could get some grouping or categorization to the metadata so I could create a multi-leveled menu.  It turns out it wasn't too difficult at all (see the screen shot below - the menu is on the left).  I have my tables organized into 4 categories: Sales, People, Products and Reports.  And the cool thing is that this menu is completely dynamic.  You can add, remove or reorganize the categories without touching the UI.  And depending where you are keeping your metadata you could even do this without recompiling your app.  The grouping is automatically discovered from the metadata and the menu is built solely...

In my previous post on Dynamic Data, I mentioned that you can use the MetadataType attribute to point Dynamic Data at class that contains additional metadata for your model.  This additional metadata will give you more control over how your UI elements render.  If you don't want a column to display in your GridView, want to change the column header text from EmployeeID to Employee ID or want the cell values formatted a little differently this metadata class is where this information gets specified.  The code snippet below shows how this class can be used for customization. [Update: 9/21/2008]: Added link to live demo Download | Live Demo 1: // Attach the Employee Metadata to the Employee 2: // entity that the LINQ to SQL designer generates 3: [MetadataType(typeof(EmployeeMetadata))] 4: public partial class Employee 5: { 6: } 7:  8: // Attach some additional metadata 9: public class EmployeeMetadata 10:...

I have been anxiously awaiting the Dynamic Data release.  And now that it is here (it was released with VS 2008 and .Net 3.5 SP1) I decided I would start getting a feel for what is has to offer by building a real simple Dynamic Data web site that allows you to browse the 5 core Northwind tables - Customers, Employees, Orders, Products and Suppliers.  Read on for the details and don't forget to download the code.  DiscountASP hasn't quite upgraded to SP1 so I don't have a live demo setup.  Hopefully they will get the upgrade completed soon, but I made sure to include lots of screen shots so you can get a good idea of what the screens look like.  [Update 9/21/2008] : Add link to the live demo Download | Live Demo   What is Dynamic Data? I try to keep a close eye on ASP.NET, but...

So, guess who just got the memo ...   Dear Matt, Uploading large files with ASP.NET is difficult.   Sincerely, Every ASP.NET Developer and their Mother   After sufficiently embarrassing myself with my earlier post, I decided it was high time I spend a little bit more time understanding this problem.  And lo and behold Jon Galloway has already written up a nice survey on the topic.  So to bone up on the issues I followed all of the links Jon provided as well the ones provided by all of the one-off emails I received in response to my previous post (thanks everyone). Of all the upload components I checked-out (SWFUpload, FileUp, Flajaxian FileUploader, RadUpload, NeatUpload, ASP.Net File Upload/Download Module, etc...) I was the most interested in the last 2 (NeatUpload and ASP.Net File Upload/Download Module).  They are both free, have my kind of licensing and come with the full...

I had a number of people email me asking how the ProgressBar Toolkit control I blogged about last month could be used to provide progress for file uploads.  So I thought I would spend some time and see how this could be done.  Thankfully, there are a ton of resources available on the internet that discuss this in pretty good detail.  But I didn't see any good examples of how to include the real-time count of the number of bytes that have been transferred.  So I thought I would try to tackle that problem while building my example.   Update 7/27/2008: This post is bogus - I have over simplified the problem.  My goal was to display the number of bytes that have been transferred to the web server, not the number that have been saved to disk.  As atashbahar pointed out, this will require a little bit more work that...

Dave Ward had another great post this past week.  He took the time to not only read the ASP.NET Ajax Road Map document, but he also wrote up a post outlining what he thought about it.  So I thought I would join Dave's efforts and throw in my 2 cents as well.  Of course, most of this post will not make too much sense if you aren't familiar with the Road Map document.  So if that's you, here is what I recommend reading (in order) ... ASP.NET Ajax Road Map The feedback forum Dave's Post: The Future of ASP.NET AJAX (make sure you include the comments) Bertrand Le Roy's post (really only the comments are important)   My Comments ... My goal is to be direct without being rude, lets see if I can do it.    $query Any plans on providing an extensible selector engine?  If you have to...

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

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

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

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

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

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

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

Nearly 6 months ago a wrote a post showing how you can use ASP.NET 3.5's new ListView and LinqDataSource controls to create a pretty sweet looking grouping grid.  Well I recently created a few additional skins for my original grid that I thought I would share.  You can follow the link to the demo site to see them in action and if you are interested in learning more you should read my original post and then download the sample site and step through some of the code. All of the themes use exactly the same markup.  All images (including expand/collapse icons, sorting icon and pager icons) are controlled via CSS.  My original post used ImageButtons, but I replaced these with LinkButtons.  This seems to be working out pretty well - I can use the CommandName and CommandArgumnet properties to hook into some the ListView and DataPager's advanced features, but I...

I am lovin' the total control the ListView control is giving me.  This past week a link to Telerik's new RadGrid control was floating around the office - and the general consensus was that the in-line editing capabilities control was pretty cool.  And I completely agree - the in-line edit feature is pretty useful.  But ... you don't need to buy the RadGrid to create a grid like this.  ASP.NET 3.5's ListView control provides excellent out of the box support for scenarios like this. Check out the screen shot below (or even better, open up my live demo).  This grid provides the same in-line editing support as the RadGrid, it is incredibly flexible if you want to tweak the layout, and best of all there is absolutely zero codebehind logic!  Did I mention I am lovin' the new ListView? Below are some of the implementation details - read on if...

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

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

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

Here are three quick tips you might find useful when using the Toolkit's Tab control.  I included demo's for all three tips so you can get a feel for how it looks and behaves. Live Demo (IE6, IE7, FF, Opera) | Download   #1: How To Change the Selected Tab When the Tab Header is MousedOver By default the tab control will switch the selected tab when a different tabs' header is clicked.  Depending upon the content you are displaying, you might find it useful to change the selected tab as the user mouses over a different tab.  I saw an example of this on designflavr.com.  This site has a tab control that displays the categories and tags and some other miscellaneous links.  These items are collected into a tab control that has been placed in the right hand sidebar.  You can get this mouseover style navigation by adding only...

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

I received some positive feedback from my most recent post describing how to create a VS 2008 styled datagrid by using ASP.NET's ListView and DataPager controls.  A few people left comments, but I also received a handful of emails asking how to achieve this same look using the GridView.  So while this VS style skin was still fresh in my mind I thought I would write up a quick post on it.  Live Demo (IE6, IE7, FF and Opera) | Download    Sorting To apply the custom sorting icon to the datagrid's header, I used the GridView's RowDataBound event to apply a custom CSS class to the header cell.  I then use the background image style to apply the sorting icon to the right of the header text.   Border Just like in my previous post, I use a series of DIV's to define the datatables frame.  I then use...

I took a break from my recent Silverlight explorations to work on a new datagrid skin.  I thought the skin turned out fairly well so I figured I would pass it along just in case anyone else could find a use for it.  Like some of my other skins, it makes use of ASP.NET 3.5's ListView, DataPager and LinqDataSource controls.  Here is the run down of the features ...    VS 2008 style border blue border  Vimeo-ish style data pager Row hover effects (except for IE6) Sort icons Live Demo (IE6, IE7, FF, Opera) | Download VS 2008 Style Border To create the border, I used a variation of the rounded corners technique Josh outlines here.  Below is the markup.  It is pretty much just a handful of DIV elements that are used for holding the images.  If you are thinking about using this technique, you should check out Josh's site...

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

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

Here are a couple more themes for the AjaxControlToolkit's Tab control based on the tabs found on LinkedIn.com.  Below the screen shots are a few bullet points discussing how I created them.  If tab theming is new for you - it might be helpful to check out these other samples as well ... Five AjaxControlToolkit Tab Themes created from DynamicDrive.com Dev.Opera.com Style TabContainer Theme JQuery TabContainer Theme with Tab Transition Animations Using CSS Image Sprites with the XP Themed TabContainer More Sample AjaxControlToolkit TabContainer Themes ... Creating a YUI TabView Style Theme for the AjaxControlToolkit's TabContainer Control As usual, here are the links for the demo and download ... Live Demo (IE6, IE7, FF, Opera 9.26)  | Download (.Net 3.5 and AJCT 3.5.11119.0) Tab Header Images Different images are used all three tab states: {Default, Hover, Active}.  Each tab is made up of 2 images, the left edge and the...

LinkedIn has a nice looking address book widget that displays all of your connections partitioned by last name.  To the left of the contact listing is an index that allows you to jump right to a section.  This control isn't overly fancy, but I was curious what HTML/CSS/JavaScript was used to create it.  So I took it apart using the IE Developer Toolbar and rebuilt it using ASP.NET 3.5 - making use primarily of LINQ to XML, the LinqDataSource and a couple of ListView's.  Feel free to browse the source code by following the download link.  And, of course I recommend checking out the live demo as well.  If you are interested in how I created the sample, a quick description of the implementation details can be found just below the screen shot.  And the best part - excluding the CSS, only 115 lines of markup/code are required to build...

Last November Josh Stodola wrote a detailed post discussing how great looking fluid-width rounded corners can easily be created using Paint.NET, a handful of DIV tags and a small amount of CSS.  The basic technique Josh outlines isn't new, but he does a great job walking through the steps with just the right amount of detail.  I remember reading the article sometime after I struggled through creating an AjaxControlToolkit control based on NiftyCorners (being completely uncreative, I called my custom extender control the NiftyCornersExtender) and I found it very interesting.  I recently went back through and re-read Josh's article this past week and went through his tutorial again. It turns out this was great timing - I am working on a project where the client has requested a sleek, soft and simple interface - those were their exact words.  So I used Josh's tutorial to frame a couple of my...

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

Lately, I have been playing around with ASP.NET's new LinqDataSource.  Most of my data resides in a SQL Server database, so I always configure the LinqDataSource to work with the LINQ to SQL DataContext and Entity objects.  These components are still pretty new to be, so I am still kind of in awe at how it all works together so seamlessly.  I guess maybe I am a little paranoid, but I don't like that using LINQ to SQL seems like magic.  Sooner or later something is not going to work, and I am going to have to figure out why that is.  Maybe it's a performance problem, maybe it's a data integrity issue, but sooner or later I am going to have to understand (at least a little bit) about how LINQ to SQL works so I can effectively debug my problem.  I found that displaying the SQL statements the...

One of the projects I am working on is on the verge of failure.  For a while now the writing has been on wall, but this was the week that everyone finally realized it.  Its a rotten feeling and I hate it.  So to cheer myself up and to keep the creative juices flowing I thought I would play around a little bit with ASP.NET 3.5's new ListView, DataPager and LinqDataSource controls.  A while back, I came across a really nice looking data grid that I wanted to create a ListView skin for.  Besides the nice soft blue color scheme, I liked the data grid's sorting icons, all caps headers, alternating row styles as well as the simple text-based data pager.  So I used the ListView and DataPager controls to build the visual elements of the data grid and used the LinqDataSource to source the grids data.  I have written...

I found a few images on dynamicdrive.com and thought they would make a nice theme for the AjaxControlToolkit's Tab control.  Check out the live demo page to see if it is something you can use.  If it is - help yourself to the download. Live Demo (IE6, IE7 and FF) | Download If you haven't worked with theming the Tab control before, here are a few links ... Creating a YUI TabView Style Theme for the AjaxControlToolkit's TabContainer Control More Sample AjaxControlToolkit TabContainer Themes ... Using CSS Image Sprites with the XP Themed TabContainer JQuery TabContainer Theme with Tab Transition Animations Dev.Opera.com Style TabContainer Theme Below are the style rules I used for these tabs.  And here are the rules for the red tab.  The rules for all of the other colored tabs are exactly the same, only the background image url changes. That's it.  Enjoy!...

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

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

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

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

One of the designers on our UI team requested a screen mockup with a page layout that is similar to your typical email client.  The page is divided vertically into 2 panes.  The left pane contains a 2 level hierarchy of categories and subcategories.  As the user selects different subcategories the designer wants the right pane's content to be updated with the corresponding information.  Just like Outlook, the designer wants the subcategories to be displayed within expanding and collapsing panels. I am familiar enough with the AjaxControlToolkit's Accordion control to know that it should be the right tool for the job here, but I haven't actually used it before.  So I did a little research on the Accordion and created a small demo page that we used to get a feel for how the control behaves and what it takes to build and style it. Live Demo (IE6, IE7 and...

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

As far as web development goes, I came a little late to the party.  I started life as a developer working on the absolute guts of a fairly complex object persistence engine.  At my next stop I hand-coded an obscene number of business objects that fed our presentation layer (which is pretty ironic considering I just worked on an ORM!).  Needless to say I didn't stay at that place too long.  From there I finally took a stab at user interface when I took a gig as a WinForms developer.  I did that for a little over a year and it was OK.  Finally I ended up where I am now, about 60% of my day to day activities includes web developer on Microsoft's ASP.NET 2.0 platform.  I did a little bit of web development with 1.1, but nothing substantial.  Hands down, I enjoy web development the best (I have never once been complimented on how nice...

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

Now that .Net 3.5 and VS 2008 have shipped, I thought it would be a good time to take a look at the new ListView control.  I use the GridView quite frequently, and I am curious what the tradeoffs I would encounter if I used the new ListView control for rendering our tabular datasets.  I figured a good way to learn would be to create a ListView that generates one of my favorite looking HTML tables. So I re-implemented my existing YUI DataTable Styled GridView using the ListView.  My main goal for this task is just to get a better feeling for how the ListView control works.  Unfortunately my asp.net hosting service won't support .Net 3.5 until sometime next week so until then there isn't a demo.  But you can download the code for this sample. Live Demo | Download ListView Overview If you aren't familiar with the ListView control, here is a quick overview from MSDN.  I...

I use Yahoo! for my email client.  The main screen has the standard email client three section layout.  One area for selecting a folder (Inbox, Drafts, Sent Items, etc...), another area that displays the messages in a table or grid, and the last region shows a preview of the selected message.  You can select messages to delete, forward, move by clicking a checkbox to select the messages, and then by clicking the button that corresponds to the action you want taken.      Live Demo (IE6, IE7 and FF) | Download (This includes the complete AjaxControlToolkit solution plus the code for my patch) I am currently building a new screen for a project I am working on and I would like to use a similar design.  I want to allow the user to use checkboxes to select rows.  Once one or more rows are selected, clicking a command button (Delete, Copy, Export) will execute the actions...

While doing some research this afternoon I ended up on dev.opera.com.  Its a nice looking site.  The combination of colors, fonts, and images make browsing the sites content enjoyable.  I was especially impressed with the tabbed menu that sits at the top of the page.  The tabs are rounded, have rollover states and are very professional looking.  So during some downtime this afternoon I created a new theme for the AjaxControlToolkit's TabContainer control using the same images and styles as dev.opera.com.  Because I have created a few themes before (jquery, yui and technorati), I was able to reuse the general structure of one of my previous stylesheet's and just plugged in my new images.   Live Demo (IE6, IE7 and FF) | Download (.Net 2.0 and Toolkit Version 1.0.10920.0)  Tab Header Images This tab theme uses images to form the rounded corners.  The original images on dev.opera.com didn't have transparent background, so I used Paint.NET to set the background transparency (if you haven't used...

A few posts back I described a technique you could use to add Animation effects to your ModalPopup controls.  A similar technique can be used to implement a JQuery style fade animation that runs as the user navigates between selected tabs.  While the technique I used is very similar to the one I blogged about before, I thought I would pass along the stylesheet for the JQuery tab theme as well as a quick overview of how I implemented the transition. Live Demo (IE6, IE7, FF) | Download (Uses Toolkit Version 1.0.10920.0) JQuery Tab Theme Creating this JQuery theme wasn't too difficult.  I grabbed one of the stylesheets from a theme I had created before and tweaked the style attributes to what was required to look like the JQuery tabs.  My JQuery themed stylesheet is divided into 3 sections: common styles, styles for the inactive tabs and finally the styles for the active tab.  Just...

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

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

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

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

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

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

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

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

If you have read a few of my most recent posts (here and here) you have probably noticed that I have been spending some time with  Yahoo!'s YUI control library.  During my most recent visit I came across a great looking confirm dialog.  It's simple and straight to the point ... Live Demo (FF, IE6, IE7) | Download The team I currently work on had already been debating whether or not we needed to replace our existing standard confirm dialog with something a little better looking.  Watching the demo pretty much sealed it.  So I signed up for investigating what markup and style classes were needed to get this dialog into our application and working with the AjaxControlToolkit's ModalPopupExtender control.  The following are the steps I did to accomplish this ... Design the HTML Structure and CSS Classes Our existing confirm dialog is not CSS friendly.  That made tweaking the look and feel a little harder than it should have been.  So this time around, I...

Lately I have been spending more and more time browsing through the YUI Developer pages.  I have worked exclusively with Microsoft's .Net Framework for the past 5 years, but I find it interesting to learn about other competing technologies as well (I even went so far to get certified on Sun's Java platform).  I don't know if it is boredom or curiosity, but I generally find it interesting to see what tools, development environments, programming languages and other techniques non-Microsoft engineers are using.  I try to come out of these research projects with something concrete that I can potentially use in my day to day activities as a .Net web developer. During my most recent effort I came across what I thought was a slick looking GridView like control (YUI calls it a DataTable Control).  You can play around with the interactive demo for it here.  The control renders as an HTML Table, and has a few sorting features that are sometimes a little difficult...

I recently stumbled across the following post.  In the entry, the author describes a simple modal popup he has created for his hotel reservation ASP.NET AJAX web application.  While developing the popup control, he ran into a problem when trying to include both a 'Close' button at the bottom of the dialog as well as a close 'X' button in the top right corner: I ran into a bit of a stumbling block because I wanted to have multiple buttons close the popup.  I had the OK button and the cancel button centered and vertically aligned at the bottom of the window, but I also wanted a cancel button in the top right  (ie "Cancel [X]") - with the familiar [X] that we know and love for closing something.  The problem is, I couldn't figure out how to assign more than one control to the CancelControlID.  Live Demo | Download [Update 10/3/2007]: As Koen points out, the...

I recently blogged about how to create a YUI TabView theme for the AjaxControlToolkit's TabContainer control.  As a follow up to this entry, Peter Kassenaar asked the question: I just don't quite get how the CSS is able to extract the different (background) images from a single sprite.png file. I've googled for this, but that didn't help me much. Can you point us to a direction where this is further explained? This would give me the perfect opportunity to clean up my /images folder on the various themes of a project... In the YUI theme I created, I used a single sprite image and used CSS to pinpoint the location within the sprite for the background image of the tab panel header's.  Peter is asking how I did this.  To be honest, I just reverse engineered the CSS style attributes from Yahoo!'s demo site along with the exact same sprite image...

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

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

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

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

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

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

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

I recently read a dotnetkicks article where the author laid out an approach for using the ASP.NET AJAX client-side framework to synchronously execute a WebMethod that does some sort of server-side validation or computation.  I believe the idea here was while this validation is executing the page designer does not want the end user interacting with the other elements on the page.  I had not encountered this issue before, but I started working out how I would have approached it.  I enjoyed the authors article and I liked how he leveraged the existing ASP.NET AJAX framework and that the solution should would work with the existing ASP.NET CustomValidator.  Because the operation is synchronous, you can invoke the WebMethod from the ClientValidationFunction and set the IsValid bit to true or false depending upon the result.  However, I am not sure if I would like having the page go unresponsive while this validation is taking place.  Especially if it is unclear to me that the field I entered data into was going to require...

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

If you have worked with the ASP.NET 2.0 GridView control, I am sure you were more than a little surprised when you realized there is no decent way to display the Header or Footer rows of a GridView that is bound to an empty DataSource.  I know I was.  It seems like a bug to me and I am surprised it made it through usability testing.  Anyway, there are basically 2 ways to work around this problem: Make your DataSource's return a special empty row so the grid has something to bind to (see example of this here) Subclass GridView and add this functionality yourself I chose to go with option 2 because because we had already subclassed the GridView for other reasons.  I cheated a little bit and started with the code snippet on the following page.  The GridView control is very complicated and I am not going to claim I understand it entirely, but from what I could...

I was looking for good examples of how the ModalPopupExtender control could be used as a confirmation dialog.  I was especially curious in seeing implementations where the popup is used to confirm deletes performed on rows of a GridView.  I couldn't find any good samples so I figured I would take a shot at it.  Live Demo If you would like to view a running version of the sample, just follow the Live Demo link.  If don't really care about the step by step break down of this implementation you can jump to the bottom of the page to view the full code sample.  As always, feedback is encouraged.      Step 1: Add the GridView to your page, placing it inside an UpdatePanel.  <asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="lblTitle" runat="server" Text="ToDo List" BackColor="lightblue" Width="95%" /> <asp:GridView ID="gvToDoList" runat="server" AutoGenerateColumns="false" Width="95%"> <AlternatingRowStyle BackColor="aliceBlue" /> <HeaderStyle HorizontalAlign="Left" /> <Columns> <asp:BoundField DataField="ID" HeaderText="ID" /> <asp:BoundField DataField="Item" HeaderText="Description" />...

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

Yesterday I was fiddling around with my MovableType blog looking for a plug-in for MovableType 3.2 that could render my category tags as a tag cloud  (by the way, I am still looking).  Along the way I came across the following site that had a nifty way of displaying screenshots of their product by clicking on the corresponding thumbnails.  Instead of having the browser take you to a page with the full image displayed by itself, the site displayed the image on top of the page in an ajax modal style window.  Besides just the image, the modal window also contained a few buttons as well as some additional information that was specific to the image.  Very nice.  I was curious of what this would take to implement using ASP.NET AJAX, so I created a sample web site (screen shot is above-right) that allows uses to browse thumbnail images.  When a thumbnail is clicked, the modal window is displayed showing the user the...

Here is a quick tip that you might find helpful when working with the JavaScript proxy classes the ASP.NET AJAX ScriptManager server control auto-generates.  You can view the source for the proxy by entering the following url into the browser: http://[server]/[website]/[webservice].asmx/js  For example, assuming you have created an ASP.NET AJAX web site called SampleWebSite and within the web site there is a web service called SampleWebService, all you have to do to view the JavaScript proxy is navigate to: http://localhost/SampleWebSite/SampleWebService.asmx/js I recently wrote a post describing how ASP.NET AJAX web services can be used with the Microsoft Virtual Earth Map Control to create a nice web based map application (the article is here, the online demo is here).  You can view the JavaScript proxy for the web service I used to look-up the lat/longs for the zip-codes by clicking on the following link:  http://mattberseth2.com/virtual_earth_polygon/ZipCodeService.asmx/js ...

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

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

Lately I have been working quite a bit with the UpdatePanelAnimationExtender control.  I have been using this control along with the animation framework to spice up my ASP.NET GridViews, DetailViews and Wizards by running a simple animation script before and after the control has been updated via an async postback (typically the animation disabled a button, faded out the control, and/or popped up a progress indicator) .  This has worked great for the past few months, but recently a new requirement came in from the field requesting for a way to cancel an async operation.  Being aware of the abortPostBack method the PageRequestManager, I figured (more like hoped) it would be pretty simple to implement this feature.  I added a 'Cancel' button to my progress indicator and wired the onclick handler to invoke the abortPostBack method.   Live Demo | View Source  Clicking cancel did abort the async postback however, because the OnUpdated animation only runs when the UpdatePanel is updated my indicator was never being hidden and it was appearing as if...

Ever had the need to read or write a piece of session data from the browser?  Here is an example of an easy way this can be accomplished using ASP.NET AJAX.  The approach is pretty simple.  First, add a couple of static methods to the page for setting and retrieving the session value (SetSession and GetSession) as well as the ASP.NET AJAX ScriptManager control.  Then write the javascript code that calls the PageMethods proxy to invoke these methods on the server (in my simple example, I wired the onclick handlers of 2 buttons). There only 2 details that are really worth mentioning.  The first is that the static methods need to be marked with the System.Web.Services.WebMethod attribute.  The second is that the EnablePageMethods attribute of the ScriptManager needs to be set to true so the ScriptManager will autogenerate the PageMethods proxy for us.  Thats it for the implementation details, but I should probably add a quick disclaimer that the sample below is just for demonstration - showing that...

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

Did you know that with ASP.NET AJAX you can easily invoke static methods declared on your ASP.NET page from script on the client?  To enable this you will need to do the following: Define the method you want invoked and make it static Add the System.Web.Services.WebServiceAttribute to the method Include the ASP.NET AJAX ScriptManager component to the web page and set the EnablePageMethods property to true Once this is done, you can asynchronously invoke the static method by using the PageMethods proxy the ScriptManager adds to the page.  The following markup and code demonstrate this by using the classic AJAX example that retrieves the current time on the server.  Because the method is invoked asynchronously, you need to supply the callback javascript function that handles dealing with the return value. View Demo The example page below demonstrates this.  GetServerTime is the static method on the page that is decorated with the WebMethod attribute.  It returns the...

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

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

In the original article, I showed an example of plotting zip-code boundaries using Microsoft Virtual Earth and Ajax.Net.  I received some feedback from John (SoulSolutions) suggesting that the transmission of latitude and longitude points could be optimized by using googles compression algorithm (described here) which exploits that fact that lat/lons can benefit from compression when there is little difference between adjacent lat/longs within a given sequence.  I thought this was an interesting suggestion so I updated the example to include this compression algorithm.  Here is the rundown of the changes that I made: The ZipCodeService now returns an encoded string of lat/lons instead of the original format that had the individual lat/lons comma separated and the pair pipe separated The ZipCode.js file now contains a routine that decodes the result from the ZipCodeService and builds a VELatLong array from the decoded points I pulled over the javascript/C# source provided by John for encoding/decoding the points.  Download Code I used fiddler to check-out the difference in...

During a recent project, I had the opportunity to play around with the Virtual Earth Map Control from Microsoft (http://dev.live.com/virtualearth/sdk/).  The goal of the project was to display zip codes by outlining its boundary.  In the end we decided to go a different route, but I thought I would share the prototype (~200 lines of code including markup).  The sample app is an asp.net web page with a drop down list that allows the user to select the zip-code they want shaded.  When the search button is clicked, I make a webservice call to the ZipCodeSearch webservice (using ASP.Net AJAX), find the points that make up the latitude/longitudes for the provided zip-code, then hand these coordinates off the the Virtual Earth map control so it can plot them for me.  Download code | View live demo [Update 10/11/2007]:  If you are looking for the zip code data set I used for this post, you can read how to get it here. ...

A recent project I worked on had the requirement of displaying a summary row for a GridView.  Most of the approaches I came across had code that handled the GridView's RowDataBound event handler and then did the summary book keeping if the row being bound was a DataRow, and injected the summary value (total/max/min) if the row was a Footer.  Similiar to the followingprotected void ProductsInCategory_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { ... Increment the running totals ... } else if (e.Row.RowType == DataControlRowType.Footer) { ... Display the summary data in the footer ... } } This appraoch works, but I thought it would be nice if this book-keeping logic could be factored out into its own component and specified via markup.  I started playing around with implementing a prototype to see how it would work.  Here was my basic approach: Create a GridView extension componenet that hooks into the RowDataBound...

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

I thought this sounded like a pretty standard requirement so I figured there would be a nice snippet on msdn or in an msdn publication describing the official Microsoft solution.  I couldn’t find that, or any other approach that I was happy with.  I ran across a few sites that looked promising, but didn’t quite meet my requirements – I had to either override a page level method and do nothing (here) or else turn off event validation (here and here).  It also generally appeared that the people using these solutions were also running into a variety of issues with grids that allow sorting and paging - all of the grids I am working with allow both. The approach I settled on is very similar to the above links, but without the limitations of having to turn off event validation or override any page methods.  This gives me the...