Use the DataGrid control in the Pocket PC application
Christian Forsbergbusiness Anplace.net
September 2003
Applies TO: Microsoft® .NET Compact Framework 1.0 Microsoft Visual Studio® .NET 2003
Summary: How to learn how to effectively use the DataGrid control in your Pocket PC application to view and update. This article will explain why this is important and gives you how to do it.
Download DataGrid_Control.exe
Contents
Table Data the DataGrid Control DataGrid Sample Code Walkthrough Conclusion
Table Data
Almost always need to browse data in a table when realizing an enterprise-level Pocket PC application. Most common solutions are you entering a lot of lookup criteria, get a lookup result set as a table and search or select it from it. A form is a very direct way to display data, which can be used directly in the screen space.
The DataGrid Control
The DataGrid control included in Microsoft® Visual Studio® .NET 2003 is a powerful control that allows you to view data in a variety of ways. This control can be bound to a DataTable, DataView, ArrayList, or any other object that supports ILISTSOURCE or ILIST interface.
Let us see how the DataGrid control is used for a Pocket PC application instance.
DataGrid Sample
This Pocket PC application instance is created using Visual Studio .NET 2003, C #, and Microsoft .NET Compact Framework. It will demonstrate how to view and update data using the DataGrid control. This program consists of an Form:
Figure 1. DataGrid Sample
This instance will be loaded into the order table (a subset of the original order table from Northwind Sample Database) to a GRID and then use a variety of Column Style to create a good-looking interface. Click Column Header to sort each column, and then click Sort Column Header to switch between ascending and descending order.
A very good feature is that every Cell in Grid is editable. When a Cell is clicked and gets the input focus, the value in the cell can be updated (see Figure 1). When other Cells are selected, the edited Cell is updated, and the new Cell becomes editable. Note that when a Cell gets the input focus, the soft keyboard (SIP) is automatically activated (pop-up). A possible enhancement is that the Cell that can be dragged to be visible when it is overwritten by SIP.
Now let's take a look at how the code is implemented.
Code Walkthrough
In the instance code, the DataGrid control is named GRDORDERS. Load your order table (XML file) to the DataGrid control, you only need the following code:
DataSet DS = New DataSet ();
DS.Readxml (@ "/ program files / dgrid / orders.xml");
Grdorders.DataSource = DS.TABLES [0];
In fact, if you only do this, you will get a very simple Grid, and the name of the table field will be displayed on each Column Header. In order to make Grid look better, use Table Styles. A Table Style can contain a variety of table styles - you want to view each column in Grid. In this example, columns include subscription information and consignee names. The following code setting status: DataGridTableStyle Ts = New DataGridTableStyle ();
Ts.mappingname = "order";
// ORDER DATE COLUMN STYLE
DataGridColumnStyle ORDERDATE = New DataGridTextBoxColumn ();
ORDERDATE.MAPPINGNAME = "ORDERDATE";
ORDERDATE.HEADERTEXT = "Date";
Ts.GridColumnStyles.Add (ORDERDATE);
// Shipping Name Column Style
DataGridColumnStyle ShipName = New DataGridTextBoxColumn ();
ShipName.mappingName = "shipname";
ShipName.Headertext = "Customer";
Shipname.width = this.width - ORDERDATE.WIDTH - 37;
Ts.GridColumnStyles.Add (ShipName);
Grdorders.tables.Add (TS);
Each Column Style (DataGridColumnStyle) Sets a table field name map to ("Header Text is used to display (HeaderText Property) and customize the COLUMN width (Width property). Two column styles are added to the Table Style, and finally add Table Style into the DataGrid Control (GRDORDERS). In this example, Styles is created by the code, but Styles can also be created in the Forms Designer.
When this Grid looks very good, there are many Common Features that can be supported in Grid. Editing is one of them. But editing is not automatically supported in the DataGrid control, which requires manual implementation. One way is to use a hidden TextBox control that is displayed when a Cell is selected, hidden at the end of the editing. This requires you to declare some variables:
Private DataGridcell Editcell;
Private bool inenditmode = false;
PRIVATE BOOL INUPDATEMODE = FALSE;
We need to get which Cell edited activation (editcell), whether this Cell is in the editing state, and is it a Cell (InupdateMode).
The control editing code is as follows:
Private void Grdorders_currentcellchanged (Object Sender,
System.Eventargs E)
{
IF (! inupdatemode)
{
IF (IundiTMode &&! Grdorders.currentcell.equals (editcell))
{
// Update Edited Cell
Inupdatemode = true; gRDORDERS.Visible = false;
DataGridcell Currentcell = GRDORDERS.CURRENTCELL;
GrdRorders [editcell.rownumber, editcell.columnnumber] =
TXTEDIT.TEXT;
Grdorders.currentcell = Currentcell;
Grdorder.visible = true;
Inupdatemode = false;
TXTEDIT.VISIBLE = FALSE;
INEDITMODE = FALSE;
}
// enter Edit Mode
Editcell = Grdorders.currentcell;
TXTEDIT.TEXT = (String) Grdorders [editcell.rownumber,
Editcell.columnNumber];
Rectangle Cellpos = Grdorders.getcellbounds (Editcell.Rownumber,
Editcell.columnnnnumber);
TXTEDIT.LEFT = CellPos.Left - 1;
TXTEDIT.TOP = CELLPOS.TOP GRDORDERS.TOP - 1;
TXTEDIT.WIDTH = Cellpos.width 2;
TXTEDIT.HEIGHT = Cellpos.height 2;
TXTEDIT.VISIBLE = TRUE;
INEDITMODE = TRUE;
}
}
When a cell is clicked (INEDIDE and INUPDATE are set to false), the current Cell is saved. Then, hidden TextBox (TXTEDIT) gets the content of the current Cell, reset to the current Cell position and makes it visible (on the current Cell). When the editing is complete, the other Cell is selected, the event code is not available (InupdateMode is set to true), and the new Cell save (CURRENTCELL) will be saved when the edited Cell is obtained from the TextBox control. During the UPDATE process, the grid is not being update (Visible settings to false), when Update completes Textbox being reopened.
Other COMMON GRID Features is sorted by clicking on Column HEADER. code show as below:
Private Void Grdorders_Mouseup (Object Sender,
System.Windows.Forms.MouseEventArgs E)
{
DataGrid.hittestinfo Hittest = Grdorders.hittest (E.x, E.Y);
IF (HitTest.Type == DataGrid.hittesttype.columnheader)
{
// EXIT Edit Mode
TXTEDIT.VISIBLE = FALSE;
INEDITMODE = FALSE;
// Sort Tapped Column
DataTable DataTable = (DATATABLE) GRDORDERS.DATASOURCE;
DataView DataView = DataTable.defaultView;
String columnname = dataatable.columns [hittest.column] .columnname
IF (DataView.Sort == ColumnName) DataView.Sort = ColumnName "DESC";
Else
DataView.sort = columnname;
}
}
If Header is clicked, the first thing is to make sure that any current Cell's editing is canceled. Then a DataView is created and sorted by clicking on Column. If a column gets a click event again and sort order will be changed to decrement. The later click will make the sort to switch between increments and delivery, until the other Column is clicked.
Conclusion
The DataGrid control is a powerful tool for viewing (then editing) data for your Pocket PC application. This control provides diverse Features, and this article contains some interesting features: data binding, editing, sorting in Grid. Your next step is to do some deep development in this example, explore more Cool's tips in this control.
