Matt Berseth

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

Comments (13) | TrackBacks (0)

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

Comments (15) | TrackBacks (1)

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

Comments (14) | TrackBacks (0)

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

Comments (12) | TrackBacks (1)

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

Comments (10) | TrackBacks (0)

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

Comments (12) | TrackBacks (2)

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

Comments (6) | TrackBacks (3)

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

Comments (26) | TrackBacks (3)

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

Comments (26) | TrackBacks (1)

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

Comments (7) | TrackBacks (0)

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

Comments (31) | TrackBacks (3)

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

Comments (22) | TrackBacks (0)

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

Comments (10) | TrackBacks (0)

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

Comments (12) | TrackBacks (1)