Grid FX Survives a Red Sox Workout.

Grid FX Survives a Red Sox Workout.

I root for two baseball teams: The Boston Red Sox® and whoever beats the New York Yankees®.

Launch Live Sample

The funny thing is that I learned this from my 10 year old son, Danny, who developed a unique fascination for this MLB eternal underdog. For the non-baseball fan it's tough to comprehend, but attending a game at Fenway Park and watching Big Papi blast a 3-run homer to win the game in the 9th inning made me a believer... which, by the way, came with some strings attached like $200 game tickets, a pact to eternally hate the New York Yankees and a Boston Red Sox branded MasterCard® with a ridiculously high APR so I could potentially spend a zillion dollars and receive complimentary tickets to a World Series game.

Believe it or not, this short story has something to do with technology.

I thought it would be cool to use Grid FX™, the latest addition to the Software FX family of products for developers, to build a web-based application with stats and other Red Sox resources that Danny and I could enjoy at home. During this process, I could demonstrate Grid FX's unique capabilities and features to build visually sophisticated and composite web-based applications with Visual Studio® 2005/2008. Because much of the building process is done right on the Visual Studio design surface with virtually no-coding at all, I decided to use a screen recorder¹ and produce flash movies; I am confident you will enjoy and learn more from this format than just static screen shots. In addition, I have made the sample pages available for access online.

Finally, I strongly encourage you to take a look at the professionally made Grid FX samples and documentation. Hopefully, you'll see that Grid FX can also do wonders with your enterprise data and become an essential data presentation tool for corporate intranet sites and dashboards, as well as, other mission critical web-based applications. If you want to try it yourself, you can download a FREE Grid FX Development License at

I hope you enjoy this presentation as much as I enjoyed developing it for Danny.

Rene Garcia

Software FX, Inc.

P.S. To my son Danny: This effort is dedicated to you. I really hope the Red Sox make it to the World Series® this year, just don't hold your breath on those complimentary tickets from MasterCard.

Go Sox!

It is important to mention Software FX conceived and designed Grid FX specifically for Visual Studio 2005/2008, the .NET framework 2.0 and ASP.NET applications. We focused our development efforts on three major areas:

  1. Design-time experience to improve accessibility and shorten the development cycle.
  2. Integration of visualization components (namely Chart FX™) to broaden the scope of the product.
  3. Run-time interaction through the use of AJAX to let end-users unleash unprecedented data visualization and analysis scenarios with minimal development efforts.

This presentation will focus mostly on the Grid FX design-time experience. In future chapters, I will demonstrate Chart FX integration and Grid FX run-time features, respectively.

This application would not have been compelling or attractive to Danny (my customer) without the players' current stats, so I went ahead created a script to screen-scrape information from different online sources and store it in my own Red Sox Access™ 2007 database (for those SQL Server™ fanatics out there, I chose Access for simplicity and portability reasons). Additionally, I used a Windows Vista™ box in our home network to develop, stage and deploy my application in IIS 7. After all, I did not expect a lot of scalability or performance issues based on the number of clients I had.

The first movie in our series is about creating your project and adding the necessary resources to commence development. If you are familiar with Visual Studio 2005/2008 ASP.NET projects you can simply skip this step.

Setting Up a Grid FX Project • 1:07 mins View Movie

Ok, so I didn't impress you with my first movie... after all, there's not much to learn about creating a web forms project, dropping a control on a form and adding a couple of files to the project. I'll raise the bar and introduce the first interesting Grid FX feature: Card Views.

Grid FX Card Views extend on the power of traditional grids. Card Views give developers an alternative method of displaying data in a non-columnar way. Developers can define custom templates and use these templates to display your data items in any particular layout. In this next movie, I will connect to my database and create a fully graphical Red Sox presentation cards (player photo included!) without a single line of code!

Card Views in Grid FX • 3:22 mins View Movie

A few weeks ago, I enthusiastically yelled to Danny so he could take a look at my first grid showing his everyday heroes. To my surprise, Danny was not happy. Actually, I saw him disgusted by my initial efforts.

"What? What's wrong?" I said.

Danny replied, "But Dad, it's the New York Yankees colors. I don't like it... If it's not red, it's not the Red Sox. Fix it and then call me." (..and away he went on his Razor RipStick®)

Too quickly, you find out that your kids are no different than your customers, whining about every little detail in your perfect application. So, to satisfy my customer, I had to put more attention to these little details (making him happy was not going to be as easy as I had thought. All of a sudden, the $200 game tickets and the $18 Hot Dogs looked like a bargain). But, to quickly solve this problem, I resourced to the Grid FX Auto Format Wizard which provides Motifs and Palettes.

Grid FX Motifs are a powerful and effective way to quickly apply visuals to your grid. Rather than customizing individual grid elements, Grid FX has pre-built professionally designed Motifs for virtually every major application, like Microsoft Office, Outlook®, Sharepoint®, Windows Vista, Dynamics™ CRM and other popular formats such as Gmail™, Yahoo® and iTunes® among others. These motifs not only change colors but also apply fonts, column and row effects and even change the characteristics of buttons and other navigation controls to match the grid's parent container or the application visuals. In addition, palettes are also available to change virtually every grid color with a single mouse click. Just take a closer look at this movie:

Grid FX's Auto Format Feature • 0:55 mins View Movie

I will revisit Card Views and grid visuals in future writings. Let's just go back to a more traditional way of using grid controls in Visual Studio: a columnar layout.

Grid FX takes advantage of the Visual Studio extensibility model to offer a design-time experience that significantly decreases development time and the learning curve over traditional grid controls. For example, when you connect a SQL statement to a grid control, columns will be created based on the actual order you selected the attributes in the database. Should you want to re-arrange the columns or remove them from the grid, you will have to resource to complex dialogs or changing the SQL statement itself. In contrast, Grid FX allows you to change the grid layout right on the Visual Studio design surface via mouse drag & drops and the Smart Tag Wizard. This next movie shows how easy it is to change the Grid's layout at design-time.

Design-Time Layout Editing • 1:36 mins View Movie

As soon as I recorded this movie, I knew this layout would not have passed my son's recently developed project management skills. In the back of my mind, I could almost hear him say, "Dad, everyone knows that player Stats should be grouped, next to the player's name and photograph. What kind of developer are you?"

Ok, to accomplish this, I will make use of Grid FX's powerful in-place template editing capabilities which allows me to create a new template column and drop an HTML table (or any other third-party control) and customize it using Visual Studio's powerful styling tools.

In-Place Template Editing • 3:34 mins View Movie

At this point, I was about to pat myself on the back and wrap this up when suddenly he asked whether he could display his other Red Sox images in the application.

"What other images?" I shrieked.

"Mommy! Daddy's losing his temper," Danny quickly pointed out.

My wife intervened; I had to calm down... As it turns out, the kid has been secretly compiling a library of Red Sox images for months and viewing them on Google™ Picasa®. According to him, now that we were making an integration effort, it didn't make much sense to have disparate systems and applications to view the same information, (sound familiar?) so I had to write a script to categorize and import those images into my database and then determine where and how to display them in Grid FX - all of which seemed too big of an effort for my voluntary development work.

My wife intervened again and I, reluctantly, resumed development.

To my surprise, I found out that Grid FX is not just about rows and columns of data. There is a very cool feature called Sidebars which are areas that are displayed on the side of the grid (top, bottom, right or left) and that allow developers to include additional data that enhances the grid without additional design or development. Sidebars are completely flexible and can be used to display anything from grids, HTML or custom elements like Chart FX objects. In addition, Sidebars provide their own AJAX-driven UI that allows end users to collapse or expand them as desired at run-time.

This next movie shows how to create a sidebar and display Danny's photo library:

Grid FX SideBars • 1:50 mins View Movie

Ok, so at this point I have established a formal email communication protocol with Danny to receive additional application requirements. I not only needed the desired features but detailed specs of what he wanted. So I got a single response:

"I want more players' stats," Danny wrote.

This meant more screen-scraping and development for me, so I called my attorney who recommended drafting an LOU ("Letter of Understanding", a legal agreement describing the details of an understanding between two parties) for Danny to sign.

This last movie shows the Grid FX master-detail capabilities by adding an expandable area that displays child data... now isn't that appropriate.

Cheers and GO SOX!

Grid FX Master-Detail • 2:13 mins View Movie

Coming Soon: Chart FX integration to visualize the Grid FX data within charts, gauges and visual dashboards.

© Software FX, Inc. All Rights Reserved. Chart FX, Grid FX & PowerGadgets are registered trademarks of Software FX, Inc.

Citrix® and Citrix Xenapp™ are trademarks and registered trademarks of Citrix Systems, Inc.

All other names are trademakrs or registered trademarks of their respective owners.

Java and all Java-based marks are trademakrs or registered trademarks of Sun Microsystems, Inc. in the U.S. and other countries.