Using FlexGrid to Manage a Local Database on the Phone

October 11 2011

This article describes how you can use C1FlexGrid to display and edit data from a local database in your Widows Phone app. With Windows Phone OS 7.1, you can store relational data in a local database that resides in the app’s isolated storage container. For this sample application, we will create a basic single-page to-do list as described here: How to: Create a Basic Local Database Application for Windows Phone.

Creating the Application UI

In a new Windows Phone OS 7.1 project, add a C1FlexGrid to the MainPage.xaml (to add the necessary references) and then replace the XAML with the following code:


<!--LayoutRoot is the root grid where all page content is placed-->  
<Grid x:Name="LayoutRoot" Background="Transparent">  
    <Grid.RowDefinitions>  
        <RowDefinition Height="Auto"/>  
        <RowDefinition Height="*"/>  
    </Grid.RowDefinitions>  

    <!--TitlePanel contains the name of the application and page title-->  
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">  
        <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>  
        <TextBlock x:Name="PageTitle" Text="to-do list" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>  
    </StackPanel>  

    <!--ContentPanel - place additional content here-->  
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">  
        <Grid.RowDefinitions>  
            <RowDefinition />  
            <RowDefinition Height="Auto" />  
        </Grid.RowDefinitions>  
        <my:C1FlexGrid Name="c1FlexGrid1" ItemsSource="{Binding ToDoItems}" AutoGenerateColumns="False" AlternatingRowBackground="#FF656464" GridLinesVisibility="None" CellEditEnded="c1FlexGrid1_CellEditEnded" HeadersVisibility="None">  
            <my:C1FlexGrid.Columns>  
                <my:Column Binding="{Binding IsComplete, Mode=TwoWay}" />  
                <my:Column Binding="{Binding ItemName, Mode=TwoWay}" Width="250" />  
                <my:Column Header="Delete" Width="90" IsReadOnly="True">  
                    <my:Column.CellTemplate>  
                        <DataTemplate>  
                            <Image Stretch="None" Source="Resources/Trash.png" DoubleTap="Image_DoubleTap" />  
                        </DataTemplate>  
                    </my:Column.CellTemplate>  
                </my:Column>  
            </my:C1FlexGrid.Columns>  
        </my:C1FlexGrid>  
        <Grid Grid.Row="1">  
            <Grid.ColumnDefinitions>  
                <ColumnDefinition />  
                <ColumnDefinition Width="Auto" />  
            </Grid.ColumnDefinitions>  
            <TextBox x:Name="txtAddNew" GotFocus="txtAddNew_GotFocus" />  
            <Button Content="Add" x:Name="btnAddNew" Grid.Column="1" Click="btnAddNew_Click" />  
        </Grid>  
    </Grid>  
</Grid>

This XAML code adds a C1FlexGrid, which will be used to display and edit data items, and a TextBox + Button, which will be used to add new items. Notice that the C1FlexGrid is bound to a collection of items defined in our data context. The next section will build the data context.

Building the DataContext

In this section, you specify an object model that determines the database schema and you create the data context. Please refer to the following article section from msdn.microsoft.com: Building the DataContext

Creating the Database

In this section, you add the code that creates the database if it does not exist. Please refer to the following article from msdn.microsoft.com: Creating the Database

Completing the Application

In this section, you complete the remaining portions of the application code and wire up editing support for the C1FlexGrid. Please refer to steps 1-6 from the following article. Completing the Application 7. Add the necessary event handler to the Image element to run the delete item code. For instance, add the DoubleTab event and copy the following code:


private void Image_DoubleTap(object sender, GestureEventArgs e)  
{  
    // Cast parameter as a button.  
    var button = sender as Image;  

    if (button != null)  
    {  
        // Get a handle for the to-do item bound to the button.  
        ToDoItem toDoForDelete = button.DataContext as ToDoItem;  

        // Remove the to-do item from the observable collection.  
        ToDoItems.Remove(toDoForDelete);  

        // Remove the to-do item from the local database.  
        toDoDB.ToDoItems.DeleteOnSubmit(toDoForDelete);  

        // Save changes to the database.  
        toDoDB.SubmitChanges();  

        // Put the focus back to the main page.  
        this.Focus();  
    }  
}

8. Add a handler for the C1FlexGrid’s CellEditEnded event. This will be fired when the user has finished editing a cell. In this event we call the toDoDB.SubmitChanges method to save changes back to the database.


private void c1FlexGrid1_CellEditEnded(object sender, C1.Phone.FlexGrid.CellEditEventArgs e)  
{  
    // important to submit changes to update local database  
    toDoDB.SubmitChanges();  
}

When the user double taps a cell, it will enter edit mode allowing them to modify the value. This is all free from C1FlexGrid. This completes the application. Two important notes to keep in mind when binding with FlexGrid:

Set your Binding mode to “TwoWay” if you want editing support on your FlexGrid columns
Call the SubmitChanges method on your DataContext to save changes to the database. You can do this where it makes most sense for your application.

Download Sample (OS 7.1)

Greg Lutz