April 29, 2008

Master-Detail with the GridView, DetailsView and ModalPopup Controls

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

April 08, 2008

Using a DataPager with the GridView Control - Implementing IPageableItemContainer

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

April 06, 2008

Building a VS2008 Styled Grid with the GridView Control

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

Topics: ASP.NET , GridView

November 04, 2007

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

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

November 01, 2007

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

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

October 29, 2007

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

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

October 23, 2007

GridViewControlExtender - Row MouseOver and Click Styles

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

October 15, 2007

YUI Style AJAX Progress Indicator

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

October 14, 2007

Improving the Presentation of an Extra-Wide GridView

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

October 06, 2007

A YUI DataTable Styled GridView

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

Topics: ASP.NET , GridView

September 17, 2007

Freezing GridView Column Headers using Only CSS

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

Topics: ASP.NET , GridView , Prototype

September 13, 2007

Freezing GridView Column Headers with CSS and a ControlAdaptor

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

Topics: GridView , Prototype

August 30, 2007

Creating a GridView with Resizable Column Headers

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

August 22, 2007

Recreating the Google Analytics Table as an ASP.NET GridView

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

August 10, 2007

How To: Use the HoverMenuExtender for GridView RowCommands

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

August 01, 2007

Disable UpdatePanel Contents During Async PostBack

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

July 30, 2007

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

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

July 24, 2007

AJAX Style Folder Browser, Part II

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

July 15, 2007

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

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

How To: Show Header and Footer Rows in an Empty GridView

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

Topics: ASP.NET , GridView

July 12, 2007

Confirm GridView Deletes with the ModalPopupExtender

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

July 10, 2007

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

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

July 05, 2007

Google Analytics like AJAX Progress Indicator

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

June 29, 2007

ASP.NET AJAX: Canceling an async postback

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

June 24, 2007

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

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

May 21, 2007

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

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

May 01, 2007

7 simple steps to ajax-enable your ASP GridView

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

April 25, 2007

Export GridView to Excel

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

Topics: ASP.NET , GridView


Consulting Services

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

Recent Comments

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