How to: Use the DataGrid on the Pocket PC

This example demonstrates techniques for using the DataGrid control with forms for viewing and editing a record that is selected in the DataGrid control, and adding a new record to the database. Note that a user interface must be provided to edit DataGrid values, because editing the DataGrid cells is not supported in the .NET Compact Framework. This example uses the Northwind database, which is installed with Visual Studio.

Note

If you are using the .NET Compact Framework version 2.0, you must add a reference to System.Windows.Forms.DataGrid.dll in your project to use the DataGrid control.

A BindingSource object provides access to the currently selected record in the database, which is passed to the constructor of the summary and edit forms so that the same binding source is used by all forms. 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. Note that for demonstration purposes, only two columns are used in this example for the summary and edit forms.

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. For more information about this feature, see How to: Generate Summary and Edit Views for Data Applications (Devices).

This application has the forms described in the following table. Also listed are their menu options.

Form	Features	Menu options
Main Form (Form1)	Displays the DataGrid control.	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.	(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 Visual Studio, create a Smart Device project and set the target platform to Windows Mobile 5.0 Pocket PC SDK or Windows Mobile 6 Professional SDK.

2. On the Data menu, click Add New Data Source.

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

4. In the Choose Your Database Objects page of the wizard, select the Products table and all of its columns.

5. From the Toolbox, add a DataGrid control to the form. Set its size and layout properties as desired.

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

7. Style the DataGrid control to show one or two columns from the table by adding a DataGridTableStyle object to the TableStyles collection. 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 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();
   }
   

10. In the main form, add a MenuItem object named New(MenuItem1), and another named Edit (MenuItem2). 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.AllowNew = True
        ProductsBindingSource.AddNew()
    
        ' Pass the binding source to the form.
        Dim EditViewDialog As New EditView(ProductsBindingSource)
        If EditViewDialog.ShowDialog() <> DialogResult.OK Then
            ProductsBindingSource.CancelEdit()
        Else
            ProductsBindingSource.EndEdit()
            Me.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 MenuItem2.Click
    
        ' Pass the binding source to the form.
        Dim EditViewDialog As New EditView(ProductsBindingSource)
        If EditViewDialog.ShowDialog() <> DialogResult.OK Then
            ProductsBindingSource.CancelEdit()
        Else
            ProductsBindingSource.EndEdit()
            Me.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 for the DataGrid control, which occurs when the action key is pressed on the Pocket PC. This action displays the SummaryView form.

    ' Action button pressed.
    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 New SummaryView(ProductsBindingSource)
            SummaryViewDialog.ShowDialog()
        End If
    End Sub
    

    // Action button pressed.
    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 SummaryView 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.

   'Dim CurrentBindingSource As BindingSource
   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.
       ' 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;
       }
   }
   

To create the edit view

1. Add a reference to the Microsoft.WindowsCE.Forms namespace in your project.

2. Drag an InputPanel component from the Toolbox to the EditView form. Only one instance is needed to provide the user with the soft input panel (SIP) for entering text into a text box.

3. 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 column. Set its ThreeState property to true.

4. 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 that Discontinued column has a null value, and sets the NullValue property of the binding to the Indeterminate value of the CheckState property.

   Public Sub New(ByVal bsource As BindingSource)
       CurrentBindingSource = bsource
       InitializeComponent()
       ' Add the bindings.
       ProductNameTextBox.DataBindings.Add("Text",_
     CurrentBindingSource, "Product Name")
       Dim drView As DataRowView
       drView = CurrentBindingSource.Current
       If IsDBNull(drView("Discontinued")) Then
           DiscontinuedCheckBox.DataBindings.Add("CheckState",_
             CurrentBindingSource, "Discontinued", True,_
             DataSourceUpdateMode.OnValidation, _
             CheckState.Indeterminate)
       Else
           DiscontinuedCheckBox.DataBindings.Add("Checked",_
            CurrentBindingSource, "Discontinued")
       End If
   End Sub
   

   public EditView(BindingSource bsource)
   {
       CurrentBindingSource = bsource;
        InitializeComponent();
        CurrentBindingSource = bsource;
        InitializeComponent();
        //  Add the bindings.
        productNameTextBox.DataBindings.Add("Text",
          CurrentBindingSource, "Product Name");
        DataRowView drView;
        drView = (DataRowView) CurrentBindingSource.Current;
        if (drView("Discontinued") == null)
        {
            DiscontinuedCheckBox.DataBindings.Add("CheckState",
              CurrentBindingSource, "Discontinued", true,
              DataSourceUpdateMode.OnValidation,
              CheckState.Indeterminate);
        }
        else
        {
             DiscontinuedCheckBox.DataBindings.Add("Checked",
               CurrentBindingSource, "Discontinued");
        }
   }
   

5. Add a MenuItem object titled Doneto update the database with the changes and return to the main form.

   ' Done
   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
   

   // Done
   private void menuItem1_Click(object sender, EventArgs e)
   {
       this.DialogResult = DialogResult.OK;
       this.Close();
   }
   

6. Add a MenuItem object titled Cancel,on the same level as Done, to discard the changes and return to the main form.

   ' Cancel
   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
   

   // Cancel
   private void menuItem1_Click(object sender, EventArgs e)
   {
       this.DialogResult = DialogResult.Cancel;
       this.Close();
   }
   

Compiling the Code

This example requires references to the following namespaces:

• Microsoft.WindowsCE.Forms

• System

• System.Data

• System.Windows.Forms

See Also

Tasks

How to: Use the DataGrid on the Smartphone

Concepts

Generating Strongly Typed DataSets (ADO.NET)

Other Resources

Data Access and XML Support in the .NET Compact Framework