Introducing C1DataSource for Entity Framework

We just released a CTP of our newest dev tool: Studio for Entity Framework. This set of data binding components is built on top of the powerful ADO.NET Entity Framework to make things simpler and even more powerful. Studio for Entity Framework includes 1 key design-time component, C1DataSource, which can be used with your already existing entity data models. You don't have to change the way you're handling your data; you simply plug C1DataSource into the view layer. This blog post shows how you can take a Windows Forms .NET 4.0 application using the Entity Framework, and enhance it using ComponentOne Studio for Entity Framework.

Part 1: Adding the Entity Data Model

This first part is all about setting up an Entity Data Model (.edmx). I've taken it mostly from one of my previous blog posts. If you already know how to do this, then go ahead and skip to part 2. The Microsoft Entity Framework makes it easy to get started. Add a new ADO.NET Entity Data Model, named Northwind.edmx to your project. In the Entity Data Model Wizard, select "Generate from database" and then choose your data connection. For this sample use the Northwind database attached to SQL Server Express (if you have VS2010 you have SQLExpress). Note: When you install Studio for Entity Framework we create a version of the Northwind SQL Server database that will run on YOUR version of SQL Server. You can find it at \Documents\ComponentOne Samples\Studio for Entity Framework\Data\NORTHWND.MDF. So you can attach this database to your SQL Express if you don't already have a copy. Select the Employee, Order and Order Details tables as the Data Objects. Then click Finish. This will generate the full object model for these selected data tables. You can view the data model displayed in the ADO.NET Entity Data Model Designer (Northwind.edmx). If you were to stop here and use this model as your data source you would need to create a data source, load it with some data (write some code) and then bind it to a data grid. The C1DataSource component starts by replacing these steps by making it very easy to bind UI controls to your entity models. Then it takes data binding to the next level.

Part 2: Using C1DataSource

One you have your entity model, add a C1DataSource to your form (after you install Studio for Entity Framework, you should see C1DataSource in your toolbox. If you don't, check to make sure you are targeting the 4.0 framework). Set the ObjectContexType property to the name of your entities (make sure you build the project first if you don't see your entities in the dropdown). In this case, my entities are name NORTHWNDEntities. Then add each entity set to the View Source collection by clicking the ellipse next to the ViewSourceCollection property. For example, add 2 view sources: Orders and OrderDetails by selecting the name from the EntitySetName property. It's from this collection editor that you can unlock many of the server-side features of C1DataSource. Features that help minimize coding.

• AutoLoad - load automatically (true) or explicitly (false)
• FilterDescriptors - bring only some of the data to the client. You can set filter descriptors at design time or in code.
• GroupDescriptors - like FilterDescriptors, you can group data as well.
• Include - includes another entity set with this view source
• PageSize - turn on paging with one simple property. Then add your paging UI or use virtual mode.
• SortDesciptors - You can set preset sorting conditions on the server
• VirtualMode - turns on transparent, asynchronous scrolling. Useful for large data sets.

Next, you can add your UI controls. For example, add 2 DataGridViews to the form. Set each grid's DataSource to the instance of c1DataSource on the form. And then set the DataMember of each grid to Orders and Order_Details, such as this: Build the project and run the form. You will notice that you instantly have a master-detail related form. When you select an Order from the top grid, the relevant Order Details are automatically loaded in the bottom grid. In the background, the C1DataSource is making use of an Entity Framework feature, implicit lazy loading, meaning that order details are only being summoned for new orders as they are selected. If you wish to turn this feature off (let's say you have a bad network and a small dataset), you can include Order Details with Orders by setting it to the Include property of the Orders view source.

Part 3: Automatic Column Lookup

C1DataSource can do a lot of tedious development for you. For instance, in the above sample there is an Employee column automatically added to the Orders data grid (this is thanks to the Entity Framework noticing the objects relation). But by default, we only see the object's type as a String. This is not very useful. Remember we included the Employee table in our Entity Data Model. Wouldn't it be great if our data binding control could notice this Order-Employee relation and property create a useful display in our grid (regardless of what grid we use)? C1DataSource can do this. Just set the extended property called ControlHandler on c1DataSource1 on your DataGridView. Expand that property and you will see a Boolean AutoLookup property. Set this to True to get automatic column lookup and an editable combobox. You can further customize what is displayed for any auto-lookup combobox. Check the documentation for details.

Part 4: Editing and Saving Data

This isn't a real data centric application without editing and saving functionality. Of course, users can edit the grid but their changes are not saved to the database. You do have to write some code for this, even with C1DataSource. For example, in a button's click event you could simply write:

private void btnSaveChanges_Click(object sender, EventArgs e)  
{  
    c1DataSource1.ClientCache.SaveChanges();  
}  

Part 5: Virtual Mode

Probably the coolest feature of Studio for Entity Framework is the Virtual Mode. By just setting the VirtualMode property to true on any view source (in the View Source Collection editor), you can turn on asynchronous scrolling. Transparent to both the developer and the user, virtual mode gets data from the server in chunks as the user scrolls. In addition to setting VirtualMode, you should also set the PageSize to determine how many records are fetched in each chunk. This value should be enough to fill the grid at the maximum size. For this example, I also added OrderID to the SortDescriptors, so that it will grab the first 50 records based on order id. With virtual mode technology you can dramatically improve the performance of your WinForms application with virtually no work. As you scroll fast down through the records you will notice that cells are blank at first and populate on delay. This is because the data is being fetched asynchronously. As you scroll back up through records you've seen before, there is no more delay. This is because of the client-side caching. C1DataSource will cache a certain amount of data on the client for improved performance.

Conclusion

This blog post just covered some of the great features of Studio for Entity Framework. Everything done in this blog post can also be done in WPF and Silverlight, as well as completely at run-time in code. Check out the product page and online documentation for more how-to's and insight on this new suite.