Dynamic Data - Experimenting with YUI's DataTable and DataSource Controls
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
The List Page Template
The markup for my List page template is pretty simple and fairly similar to the DD sites I have blogged about previously. I use the table's DisplayName and Description attributes to render the title bar. But, for this sample I am also including three extra DIV's - #paging-top, #grid and #paging-bottom. These three DIV's will be used as the containers for the YUI pager and grid widgets.
- Line 5 - 10: Create the YUI DataSource.
- Lines 13 - 18: Describe what the response is going to look like.
- You need to tell the DataSource what the elements returned from your data look like. In lines 15 - 17 I am letting the DataSource know what it can expect to be returned from my web service. If you notice the fields array is dynamically created by invoking the FetchDataFields method on my List.aspx template page. FetchDataFields queries the MetaTable for the current request and includes the names of all of the columns that need to be scaffolded. Here is the source for this method.
- Notice that I am retrieving the reference to the MetaTable from the DynamicDataRouteHandler - keeping my template unaware of the entity type the page is being requested for (line 4)
- Lines 21 - 27: Initialize the data pager controls.
- I wanted to use 2 pagers - one above the grid and another below it so I added DIV's to the List template for both of these items. When I create the Paginator widget I supply YUI with the ID's of the DIV's that should contain the paging controls.
- Lines 30 - 39: Setup the config options for the table.
- Line 42: Create the DataTable.
- I need to tell the DataTable about some basic metadata regarding the grids columns. For this example I have included only the most basic information - the mapping between my column headers and the fields from the object returned from my web method that fills the grid ...
- Finally, I use all of the settings and objects created previously to initialize a new DataTable instance - pointing it to the #grid DIV that I have already added to the page
The FetchAll Web Method
Finally, here is the source listing for my FetchAll web method. I have configured the YUI DataSource to pass through the name of the table to retrieve the data for. This is what is allowing me to use the same web method for all of the tables. So this is the first parameter, the second and third parameters are the paging arguments. Other than that the method is pretty simple ...
- Line 6 - 8: Use the tableName argument to get the MetaTable its corresponding IQuerable objects
- Line 11: We need to total row count for our paging math - so execute a count(*)
- Line 14: We only need to retrieve the columns we are scaffolding, so get the list of columns we want to include in the select
- Line 20 - 26: Create the object that we will return to the YUI DataSource
- Include the total row count
- Use Skip and Take to handling the paging parameters
- Use Select to make sure only the columns we are using are being returned
Well, like I said it was just an experiment. Probably not ready for production and I haven't quite worked out how the edit/delete scenarios are going to work, but I thought it was interesting enough to write up a quick post about. And DiscountASP is upgrading to .NET 3.5 SP1 sometime this week, so I should have the demo's up for my DD posts soon.
That's it. Enjoy!