How to: Use the DataGrid on the Smartphone

Article
11/16/2012

You can create a Smartphone application similar to the Smartphone Contacts program.

Note

If you are using a version of .NET Compact Framework prior to version 3.5, you must add a reference to System.Windows.Forms.DataGrid.dll in your project to use it.

This example shows the main form with a list of product names in a DataGrid control from the Northwind database, which is installed with Visual Studio. It also contains a summary view form to display the current record and an edit view form to edit data and to add new records. A BindingSource object provides access to the currently selected record in the database. In addition to data-binding controls, a BindingSource object can return a DataRowView object of the current row. You can use DataRowView to access data for a variety of purposes, such as determining the current value of a column.

Alternatively, you can have Visual Studio generate summary and edit forms automatically by selecting Generate Data Forms from the shortcut menu for the smart tag on a DataGrid control. Note that for demonstration purposes, only two columns are used in this example for the summary and edit forms.

This application has the forms described in the following table. Also listed are their menu options for the Smartphone left and right soft keys.

Form	Features	Left soft key	Right soft key
main form (Form1)	Displays one column of the table in the DataGrid control in the style of a Smartphone Contacts list. Pressing the Action key, or Enter on your keyboard with the emulator, displays the Summary View form.	New Adds a new record to the database and displays the EditView form.	Edit Displays the EditView form.
SummaryView	Displays column values of the current record, optimized for viewing.	Done Returns to the main form.	(none)
EditView	Displays column values of the current record, optimized for editing.	Done Accepts the dialog box, updates the database, and displays the main form.	Cancel Cancels the dialog box and displays the main form.

main form

(Form1)

Displays one column of the table in the DataGrid control in the style of a Smartphone Contacts list.

Pressing the Action key, or Enter on your keyboard with the emulator, displays the Summary View form.

New

Adds a new record to the database and displays the EditView form.

Edit

Displays the EditView form.

SummaryView

Displays column values of the current record, optimized for viewing.

Done

Returns to the main form.

(none)

EditView

Displays column values of the current record, optimized for editing.

Done

Accepts the dialog box, updates the database, and displays the main form.

Cancel

Cancels the dialog box and displays the main form.

To create the project and design the Main Form

In Visual Studio, create a Smart Device project and set the target platform to Windows Mobile 5.0 for Smartphone SDK or Windows Mobile 6 Standard SDK.
On the Data menu, click Add New Data Source.
In the Data Source Configuration Wizard, connect to the Northwind database by using Microsoft SQL Server Compact Edition (.NET Framework Data Provider for SQL Server CE). The Northwind database, Northwind.sdf, is installed in the \Program Files\Microsoft SQL Server Compact Edition\v3.5\Samples folder.

Note

On Windows Vista, you must run Visual Studio as an administrator to access the Northwind database. For more information about adding a database, see How to: Add a Database to a Device Project.
In the Choose Your Database Objects page of the wizard, select the Products table and all its columns.
From the Toolbox, add a DataGrid control to the form.

To have the DataGrid control appear like the Contacts list on a Smartphone, set its properties as shown in the following table.

DataGrid property	Set to
ColumnHeadersVisible	False
RowHeadersVisible	False
GridLineColor	Window
Location	A Point structure with -2 for x, and -2 for y.
Size	A Size structure with 184 for the width and 190 for the height.

Set the DataSource property to the Orders table. Visual Studio adds the NorthwindDataSet, ProductsBindingSource, and ProductsTableAdapter objects to your project.
Click the TableStyles property in the Properties pane. This action displays the DataGridTableStyle Collection Editor dialog box. Then do the following:
1. Add a DataGridTableStyle object to the TableStyles collection.
2. Specify "Products" for the MappingName property.
3. Click the GridColumnStyle property. This action displays the DataGridColumnStyle Collection Editor dialog box.
4. Add a DataGridTextBoxColumn object to the GridColumnStyles collection.
5. Click the MappingName property and select Product Name.
6. Set the desired Header Text and Width.
7. Repeat for additional columns.
8. Close the dialog boxes.
Add two forms to the project, one for the summary view and one for the edit view. Name them SummaryView and EditView.
Add a parameter to the constructors of the SummaryView and EditView forms to take a BindingSource object. Declare a global variable, CurrentBindingSouce, in these forms to be set to the BindingSource object that is passed in the constructor. Note that it should be set before the InitializeComponent method is called.

Visual Basic developers need to add a Sub New to the form, by adding a New method from the upper-right Method Name list in the code pane.
```
Dim CurrentBindingSource As BindingSource
Public Sub New(ByVal bsource As BindingSource)
    CurrentBindingSource = bsource
    InitializeComponent()
End Sub
```
```
private BindingSource CurrentBindingSource;
public SummaryView(BindingSource bsource)
{
    CurrentBindingSource = bsource;
    InitializeComponent();
}
```

In the main form, add a MenuItem object named New(MenuItem1), and another named Edit (MenuItem2). These menus correspond to the Smartphone left and right soft keys. Add the following code for the New and EditClick events.

' Add new record.
Private Sub MenuItem1_Click(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles MenuItem1.Click
    ProductsBindingSource.AddNew()
    Dim EditViewDialog As New EditView(ProductsBindingSource)
    If EditViewDialog.ShowDialog() <> DialogResult.OK Then
        ProductsBindingSource.CancelEdit()
    Else
        ProductsBindingSource.EndEdit()
        ProductsTableAdapter.Update(Me.NorthwindDataSet)
    End If
End Sub
' Edit record.
Private Sub MenuItem2_Click(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles MenuItem1.Click
    Dim EditViewDialog As New EditView(ProductsBindingSource)
    If EditViewDialog.ShowDialog() <> DialogResult.OK Then
        ProductsBindingSource.CancelEdit()
    Else
        ProductsBindingSource.EndEdit()
        ProductsTableAdapter.Update(Me.NorthwindDataSet)
    End If
End Sub

// Add new record.
private void menuItem1_Click(object sender, EventArgs e)
{
    productsBindingSource.AllowNew = true;
    productsBindingSource.AddNew();
    EditView EditViewDialog = new EditView(productsBindingSource);
    if (EditViewDialog.ShowDialog() != DialogResult.OK)
    {
        productsBindingSource.CancelEdit();
    }
    else
    {
        ProductsBindingSource.EndEdit();
        this.productsTableAdapter.Update(this.northwindDataSet);
     }
}
// Edit record (Edit).
private void menuItem2_Click(object sender, EventArgs e)
{
    EditView EditViewDialog = new EditView(productsBindingSource);
    if (EditViewDialog.ShowDialog() != DialogResult.OK)
    {
        productsBindingSource.CancelEdit();
    }
    else
    {
        productsBindingSource.EndEdit();
        this.productsTableAdapter.Update(this.northwindDataSet);
    }
}

In the main form, add code for the KeyDown event that occurs when the action key is pressed on the Smartphone. This action displays the SummaryView form.

Private Sub DataGrid1_KeyDown(ByVal sender As System.Object, _
    ByVal e As System.Windows.Forms.KeyEventArgs) _
    Handles DataGrid1.KeyDown
    If (e.KeyCode = Keys.Enter) Then
        Dim SummaryViewDialog As SummaryView = New SummaryView(ProductsBindingSource)
        Cursor.Current = Cursors.Default
        SummaryView.ShowDialog()
    End If
End Sub

private void dataGrid1_KeyDown(object sender, KeyEventArgs e)
{
    if (e.KeyCode == Keys.Enter)
    {
        SummaryView SummaryViewDialog = 
          new SummaryView(productsBindingSource);
        SummaryViewDialog.ShowDialog();
     }
}

To create the summary view

Add the following controls to the form:
- A Label control for the Product Name heading, such as "Product Name:".
- A Label control for the Product Name value.
- A Label control for the Discontinued value, which is displayed only when the value of the Discontinued column of the Products table is true. Title this label "DISCONTINUED" with a red font.

Add the following code to the constructor for the SummaryView form to set the data bindings. Declare a form variable named CurrentBindingSource to be set to the passed BindingSource instance in the form's constructor. A DataRowView object determines that if the Discontinued column is true, the Discontinued label is displayed.

Public Sub New(ByVal bsource As BindingSource)
    CurrentBindingSource = bsource

    ' This call is required by the Windows Forms Designer.
    InitializeComponent()
    ' Bind the label that shows the product name.
    ProductNameLabelVal.DataBindings.Add("Text", _
      CurrentBindingSource, "Product Name")
        ' Show the Discontinued label if
        ' that value is true in the database.
        Dim drView As DataRowView
        drView = CurrentBindingSource.Current
        If drView.Item("Discontinued") = True Then
            DiscontinuedLabel.Visible = True
        Else
            DiscontinuedLabel.Visible = False
        End If
    End Sub

private BindingSource CurrentBindingSource;
public SummaryView(BindingSource bsource)
{
    CurrentBindingSource = bsource;
    InitializeComponent();
    // Bind the label that shows the product name.
    ProductNameLabelVal.DataBindings.Add("Text",
      CurrentBindingSource, "Product Name");
    // Show the Discontinued label if
    // that value is true in the database.
    DataRowView drView;
    drView = (DataRowView) CurrentBindingSource.Current;
    if (drView["Discontinued"] == true)
    {
        DiscontinuedLabel.Visible = true;
    }
    else
    {
        DiscontinuedLabel.Visible = false;
    }
}

Add a MenuItem object titled Done for the left soft key to close the form and return to the Main Form.

Private Sub MenuItem1_Click(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles MenuItem1.Click
    Me.Close
End Sub

private void MenuItem1_Click(object sender, System.EventArgs e)
{
    this.Close();
}

To create the edit view

Add a reference to the Microsoft.WindowsCE.Forms namespace in your project. This is required to set the Smartphone InputMode setting on text box controls.
Add the following controls to the form:
- A Label control for the Product Name text box.
- A TextBox control for the Product Name column.
- A CheckBox control for the Discontinued value.

To set data bindings, add the following code to the form's constructor after the InitializeComponent call. This code accommodates adding a new record or editing an existing record. If a new record is being added, a DataRowView object determines whether the Discontinued column has a null value. If the value is null, the check box is set to false.

Public Sub New(ByVal bsource As BindingSource)
    CurrentBindingSource = bsource

    ' This call is required by the Windows Forms Designer.
    InitializeComponent()

    ' Add any initialization after the InitializeComponent() call.

    ' Set the Smartphone input mode.
    InputModeEditor.SetInputMode(ProductNameTextBox,_
      InputMode.AlphaT9)
    ProductNameTextBox.DataBindings.Add("Text",_
      CurrentBindingSource, "Product Name")

    ' Determine the Discontinued value.
    ' If null, change to False.
    Dim drView As DataRowView
    drView = CurrentBindingSource.Current
    ' Set the bindings.
    If IsDBNull(drView("Discontinued")) Then
        DiscontinuedCheckBox.DataBindings.Add("CheckState",_
          CurrentBindingSource, "Discontinued", True,_
          DataSourceUpdateMode.OnValidation, False, "")
    Else
        DiscontinuedCheckBox.DataBindings.Add("Checked",_
          CurrentBindingSource, "Discontinued")
     End If
End Sub

public EditView(BindingSource bsource)
{
    CurrentBindingSource = bsource;
    InitializeComponent();
    // Set the Smartphone input mode.
    InputModeEditor.SetInputMode(ProductNameTextBox,
      InputMode.AlphaT9);
    // Set the bindings.
    ProductNameTextBox.DataBindings.Add("Text",
      CurrentBindingSource,"Product Name");
    // Determine the Discontinued value.
    // If null, change to False.
    DataRowView drView;
    drView = (DataRowView) CurrentBindingSource.Current;
    if(drView("Discontinued")== null)
    {
        DiscontinuedCheckBox.DataBindings.Add("CheckState",
          CurrentBindingSource, "Discontinued",
          true,DataSourceUpdateMode.OnValidation,false,"");
    }
    else
    {
        DiscontinuedCheckBox.DataBindings.Add("Checked",
          CurrentBindingSource, "Discontinued");
    }
}

Add a MenuItem object titled Donefor the left soft key to update the database with the changes and return to the Main Form.

Private Sub MenuItem1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MenuItem1.Click
    Me.DialogResult = DialogResult.OK
    Me.Close()
End Sub

Private void MenuItem1_Click(object sender, System.EventArgs e)
{
    this.DialogResult = DialogResult.OK;
    this.Close();
}

Add a MenuItem object titled Cancelfor the right soft key to discard the changes and return to the main form.

Private Sub MenuItem2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MenuItem1.Click
    Me.DialogResult = DialogResult.Cancel
    Me.Close()
End Sub

Private void MenuItem2_Click(object sender, System.EventArgs e)
{
    this.DialogResult = DialogResult.Cancel;
    this.Close();
}

Compiling the Code

This example requires references to the following namespaces:

Share via

How to: Use the DataGrid on the Smartphone

To create the project and design the Main Form

To create the summary view

To create the edit view

Compiling the Code

See Also

Tasks

Concepts

Other Resources

Additional resources