Easy Applications with ComponentOne True DBGrid
Applies To:
True DBGrid for WinForms
Author:
Jeffrey King
Published On:
10/9/2008
ComponentOne Studio for WinForms prides itself on its design-time experience. We not only make tools that provide the interaction you are looking for, we also make them easy to use. As an example of this we'll take a look at True DBGrid for WinForms, which is part of Studio for WinForms, and see what we can do with only minimal code.
For this example let's say that you have been tasked with creating a simple data viewer application. We are going to be using a database from the fictional (and slightly infamous) Northwind company. The head of the sales team wants an app to view all the customers and their orders.
Creating the Application
Getting Started
We'll start at the beginning and create a new .NET Windows Application. If you want, you can do this in 2.0, 3.0 or 4.0. You can also choose Visual Basic or C# as your language. For the little code you will need, both languages are provided in this example. Then choose any name for the solution; I choose DataViewer for this example.
Using the C1RibbonForm
Now that the project has been created, we should have a new form in front of us in the designer. Now, I don't know about you, but I think that the standard Windows Form looks a little bland. So what I would suggest is to use a C1RibbonForm instead. This will provide a nice way to gussy up your application with very little work.
Switching to a C1Ribbon form is easy. Drag and drop the C1Ribbon control from the Visual Studio Toolbox onto the form. After adding it to the form, we can select it and delete it. We are just using the Ribbon to take care of adding the correct reference and licensing. Then double-click on the title bar of the form the get to the forms' code. You should now see something like this in Code view:
C#:
public partial class Form1 : Form
VB:
Partial Class Form1
Inherits System.Windows.Forms.Form
You will want to change that code to:
C#:
public partial class Form1 : C1.Win.C1Ribbon.C1RibbonForm
VB:
Partial Class Form1
Inherits C1.Win.C1Ribbon.C1RibbonForm
Now if you go back to the form's designer you'll see the new Ribbon form.
Add a Grid to the Form
Now that we have dressed up the form a little we'll add a grid to the form. Drag and drop the C1TrueDBGrid control from the Toolbox onto the form. When you do this the grid's smart menu should automatically open for you. If it doesn't you can open it by clicking on the SmartTag in the upper-right corner of the control.
In the grid's smart menu, click on "Dock in parent container" to tell the grid to fill the form. Next, we'll need to give the grid a data source.
Setup the Data Source
To give the grid a data source you can go back to the smart menu again. From the "Choose Data Source" drop-down list, select "Add a Project Data Source..."
You should now be looking at Visual Studio's Data Source Configuration Wizard. For our example we will be working with an Access database that it distributed with ComponentOne Studio for WinForms. The Nwind.mdb database is located in the C:\Program Files\ComponentOne Studio.NET 2.0\Common\ directory. So, in the wizard you will want to select Database and click Next. Then, create a New Connection to the database and click Next. Because we are using an Access database you will be asked if you want to copy the database into your project (for our needs that is not necessary). Continue to click Next until you get to a screen that reads "Choose Your Database Objects". On this screen, check the box next to "Tables". This will give us access to all of the tables. We won't necessarily use all of them but we will use quite a few. Click Finish.
Now that we have our data source set up, lets tell the grid that we want it to display the Customers table. To do this we'll need to go back to True DBGrid's smart menu. This time we should have some more options in the DataSource drop-down list. You'll need to expand Other Data Sources, Project Data Sources, and NwindDataSet to select Customers.
You'll notice how the grid automatically gets the scheme from the data source and creates the columns. If you run the application now you'll see the customer data filled in the grid. That's one part of what we are asked to do, but now we still have to show their orders.
Enable the Filter Bar
Running the application now will show you a grid with all of the customers. It works but it's a little hard to find any particular customer that you are looking for. There are two ways that you can handle this with True DBGrid: you can use a filter bar or Microsoft Outlook style grouping. For this particular application, I think a filter bar is a better fit. To turn on the filter bar go back to the smart menu and check the box next to Enable Filter Bar.
Make a Child Grid
To show the customer's orders we'll need to add another grid to the form. Drag a True DBGrid from the toll box right on top of the grid we already have. Now, we'll go to the smart menu for this new grid. In the DataSource drop down we should see even more options then before. There should now be a customersBindingSource. Expanding that will allow us to select CustomerOrders. So this second grid will now show the orders of a selected customer in the first grid. But, if you run the project now that second grid is sitting right on top of the first one and doesn't look very good.
To make this look better we'll want to have it so that the second grid is hidden till we want to see it. True DBGrid does this by allowing a grid to have a child grid. When a grid has children grids, each row in the grid reveals a plus icon. Clicking the plus icon expands the row to display the child grid under that row.
Setting up a grid to have a child grid is very easy. It can be done with True DBGrid's ChildGrid property. First, select the first grid we put on the form, the Customers grid. Then, from the Properties Windows locate the ChildGridproperty. Click the drop-down button for that property, and select our second grid from the list.
Run the project now you should just see the Customers grid. This time there is a plus symbol at the start of each row. If you click on the plus icon you'll see that the customer's orders display in a grid under that row.
Now we have the customer's orders displaying correctly, but the grid could be more reader friendly. For instance, it has the CustomerID column which is redundant since the grid is a child of the customer grid. It also has the EmployeeID column that just lists a number, which would be much better if it had the Employee's name listed instead. Let's see what we can do about this.
Hiding a Column
Hiding the CustmerID is an easy task. Clicking on the CustomerID column on our second grid will open up that column's tasks in the smart menu. Uncheck Visible to hide that column.
Data Translation with C1TrueDBDropdown
Now, to translate the EmployeeID into a name we'll need a C1TrueDBDropdown. Drag and drop the C1TrueDBDropdown control from the Toolbox onto the form. In its smart menu we'll want to give it a data source. This time, in the Choose Data Source drop-down we'll go to Other Data Sources, Project Data Sources, NwindDataSet, and select Employees. We'll need to tell C1TrueDBDropdown what to translate by setting its Display Member and Value Member in its smart menu. Set Display Member to FirstName and Value Member to EmployeeID. Now that the drop-down knows what to translate, we need to tell it that we want it to translate. You can tell it to translate by going to its property panel and setting the ValueTranslate property to True.
The last thing we need to do is to tell the grid to use the drop-down we just set up. We'll need to go back to the Order grid's smart menu and click on Designer... (if that is not an option for you click on in the C1TrueDBGrid Tasks menu, then Designer should be available). In TrueDB Grid's designer, click on the EmployeeID column in the grid. Then, select the Column tab on the left and set the DropDown property to use the drop-down we just setup. That's all we really need to do, but since the column doesn't really show the EmployeeID we should probably change the caption in the column's header. To do this, go to the column's Caption property and change it from "EmployeeID" to "Employee". Click OK and run the application.
Conclusion
With only half a line of code we created a professional looking application that provides us with an easy way to find customers, view their orders, and see which employee sold it to them. That is the type of benefits that ComponentOne can bring to your design-time experience.
MESCIUS inc.