How to: Use the DataGrid on the Smartphone

[This documentation is for preview only, and is subject to change in later releases. Blank topics are included as placeholders.]

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

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.

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 for Smartphone SDK or Windows Mobile 6 Standard 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 (.NET Framework Data Provider for Microsoft SQL Server Compact). 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 its columns.

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

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

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

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

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

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

11. 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);
        }
    }
    

12. 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 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");
       }
   }
   

1. 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();
   }
   

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

• Microsoft.WindowsCE.Forms

• System

• System.Data

• System.Windows.Forms

See Also

Tasks

How to: Use the DataGrid on the Pocket PC

Concepts

Generating Strongly Typed DataSets (ADO.NET)

Other Resources

Data Access and XML Support in the .NET Compact Framework