Project SilverLight 1.1 – Prototype – Part 12 – grid control


SubHeading 6

Here we go … we’re gonna tackle the dreaded  ….  “GRID CONTROL”!

For those that don’t know, im a web designer by trade. And the one part of my job that i hate above all things is. ….. you guessed it ……  designing/developing grid’s.

Every project that i have ever worked on has needed some form of grid, and every time i start a new project i just know that im going to have to design another grid. Yes i do reuse alot of code between projects but that doesn’t change the fact that grids are boring and always troublesome… plus that’s not going to help me today and you’ll see why.

Today we are going to build not just any grid BUT an “AJAX GRID”

The previous post’s were all about SilverLight controls, today is about an Ajax control. If you cast your memory back to my earlier post’s, the design of my prototype was such that i wanted to have many types of webcontrols sitting on a host web page. SilverLight controls, ajax controls and standard general html controls all getting along and behaving themselves.

So where do i start? Firstly i’ll identify the features i want in a grid control. Then ill search the web for anything that exist’s that may fullfill my requirements.

GRID Requirements:

1) Display formated information in a table like structure

2) The grid needs to handle fixed heights and thus show relevant scroll bars when neccessary.

3) The grid should be sortable

4) The grid should allow re-ordering of columns

5) The grid should allow correct date formating and localization

6) The grid should allow themes

7) The column width’s should be easily configurable

8 ) Ability to select rows (single and multi)

9) Easily add buttons to the grid in there own columns

10) The grid should have some databinding framework

This list is very high-level and normally i would go through 3-4 itterations of refining the list, drilling down to a finer detail, but for sake of brevity ill take it as it is.

One thing i will expand on is the “type” of grid i want…. i want a “Client side data driven grid“, in true ajax fashion. 

This is the scenario i want to handle. The grid sit’s on the client’s browser and it accepts asynchronous data from a webservice, the webservice passes ONLY data (no markup) to the client. This is a completely new concept for me.

In my previous ajax applications i’ve only ever passed fully marked up data from the server to the client (all-be-it asynchronously). That is i’ve generated the table html on the server and passed that to the client. Anyone that’s ever worked with optimizing webpages know’s that markup can make up close to 50% of data sent between server and client (see red highlight below in a typical unit of information, takes nearly 50% of the data packet).

markup 101

What i want is to only pass the important data to the client and have the client (via the grid control) render the rest. So basically the grid control needs to be fully self contained on the client’s end!

So i know what i want, the problem is do i have to create one from scratch or is there something out there that does it (and is easy to implement) …… ENTER Scott Guthrie :)

Scott’s blog is an amazing source of information. I found my grid control on there :) :) :)

The control was created by “Kanzi Manzur Rashid” and can be found here. Please take the time to visit the site and check the control out.

Rashid’s control, i’ll refer to it as the “grid control”, does exactly what i want. It is a client side grid that can consume data in it’s raw form and render itself as html. It also has the abilty to do sorting and column arranging etc.

The video at the bottom of this post walks through how i implemented the grid. It’s a very simple narration of how i did it.

So here is the iTunes Grid:

iTunes grid

And here is the AJAX “grid control” that i have implemented in my project (mind you this is just the bare bones version of the grid, it doesnt have sorting or column realignment switched on)

grid 4

This is the wireframe with the “grid control” added:

itunes silverlight grid 1

For the demo sites there are 2 that i have created

1) Basic grid allowing selection – JF000010.ASPX

2) Advanced grid with selection, sorting and column ordering – JF000011.ASPX

Or you can download the source code for the entire project here (JF000010.zip) entry point’s are JF000010.aspx and JF000011.aspx.

From the last week of blogging and playing with silverlight, ajax.asp.net im convinced now more than ever that there is going to be a huge shift in the types and styles of websites. Fully rich and immersive experiences are now available to the masses, you no longer need to be a flash specialist or a guru of photoshop. The expression tools and the microsoft development toolkits really do deliver the goods! Im not trying to intentionally sell microsoft products, im not sponsored by them in any way. Infact i buy all my own software and i pay for my msdn license. The SilverLight team, Expression team, AJAX.ASP.net team and Visual Studio team have really hit the nail on the head this year!!!!

 

One response to “Project SilverLight 1.1 – Prototype – Part 12 – grid control

  1. Science is the most useful legacy in a life Science is more useful than treasure No one got lost because science while many people lost because of treasure

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s