Partager via

How to: Use the DataGrid on the Smartphone 

  • Article

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

NoteNote

The DataGrid class is the .NET Compact Framework version of the control. 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 2005. 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 Microsoft Visual Studio 2005 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.

To create the project and design the Main Form

  1. In Microsoft Visual Studio 2005, create a Windows Mobile version 5.0 for Smartphone device project.

  2. From the Data menu, select Add New Data Source. Use the Data Source Configuration to connect to the Northwind database using Microsoft SQL Server Mobile Edition (.NET Framework Data Provider for SQL Server CE). The Northwind database, Northwind.sdf, is installed in the \Program Files\Microsoft Visual Studio 8\SmartDevices\SDK\SQL Server\Mobile\v3.0 folder.

  3. In the Choose your database objects step of the wizard, select the Products table and all its columns.

  4. From the Toolbox, add a DataGrid control to the form.

  5. 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.

  6. Set the DataSource property to the Orders table. Microsoft Visual Studio 2005 adds the NorthwindDataSet, ProductsBindingSource, and ProductsTableAdapter objects to your project.

  7. 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.

  8. Add two forms to the project, one for the summary view and one for the edit view. Name them SummaryView and EditView.

  9. 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 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 drop-down 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();
}

  10. 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 Edit Click 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);
    }
}

  11. 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

  1. 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.

  2. 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;
    }
}

  3. 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

  1. 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.

  2. 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.

  3. To set data bindings, add the code shown here in 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");
    }
}

  1. Add a MenuItem object titled Done for 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();
}

  1. Add a MenuItem object titled Cancel for 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:

See Also

Tasks

How to: Use the DataGrid on the Pocket PC

Concepts

Generating a Strongly Typed DataSet
Using a DataSet with Existing Data

Other Resources

Data Access and XML Support