Update using DataGrid in Silverlight 3


The Problem:

I spent a whole day to solve the problem with the Grid. I applied all my knowledge but with no solution. Suddenly I tried one thing, and it worked. So thought of sharing with guys. The problem was that the datagrid does not update the info after i edit. The information remains the same. Let's start from the beginning.

Create a class:

Lets create a DTO object for the DataGrid.The properties are:

        public string TaskName { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
        public string AssignedTo { get; set; }
        public string Comments { get; set; }
        public string Status { get; set; }       

Create the DataGrid:

    <data:DataGrid x:Name="dataGrid" Grid.Row="3" Grid.ColumnSpan="3" Margin="0,-1,0,1" AutoGenerateColumns="False" >
     <data:DataGrid.Columns>
         <data:DataGridTemplateColumn CanUserSort="True" Header="Task Name">
               <data:DataGridTemplateColumn.CellTemplate>
                      <DataTemplate>
                             <TextBlock Text="{Binding TaskName}"></TextBlock>
                       </DataTemplate>
                </data:DataGridTemplateColumn.CellTemplate>
           <data:DataGridTemplateColumn.CellEditingTemplate>
                       <DataTemplate>
                           <TextBox Text="{Binding TaskName }"></TextBox>
                        </DataTemplate>
           </data:DataGridTemplateColumn.CellEditingTemplate>
      </data:DataGridTemplateColumn>

      <data:DataGridTemplateColumn CanUserSort="True" Header="Module Name">
          <data:DataGridTemplateColumn.CellTemplate>
              <DataTemplate>
                   <TextBlock Text="{Binding ModuleName}"></TextBlock>
               </DataTemplate>
           </data:DataGridTemplateColumn.CellTemplate>
           <data:DataGridTemplateColumn.CellEditingTemplate>
               <DataTemplate>
                    <TextBox Text="{Binding ModuleName}"/>
            </DataTemplate>
        </data:DataGridTemplateColumn.CellEditingTemplate>
 </data:DataGridTemplateColumn>

I am leaving rest to you.

The problem:

Now run the project and try to change any field. You will face the problem. The values will be not updated. I tried with implementing the IPropertyChanged interface on the DTO class. That doesn't help either.

The Solution:

The solution is very easy. It's the Binding mode property. The defination says all. Gets or sets a value that indicates the direction of the data flow in the binding. And the value definitions are:

You use the Mode property to specify the direction of the binding. The following enumeration list shows the available options for binding updates:

  • TwoWay updates the target property or the property whenever either the target property or the source property changes.
  • OneWay updates the target property only when the source property changes.
  • OneTime updates the target property only when the application starts or when the DataContext undergoes a change.
  • OneWayToSource updates the source property when the target property changes.
  • Default causes the default Mode value of target property to be used.

It didn't strike me for a long time. When I used google for the solution I found many posts without the solution. Here goes the EditTemplate binding:

                           <data:DataGridTemplateColumn Header="Comments">
                                <data:DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Comments}"></TextBlock>
                                    </DataTemplate>
                                </data:DataGridTemplateColumn.CellTemplate>
                                <data:DataGridTemplateColumn.CellEditingTemplate>
                                    <DataTemplate>
                                        <TextBox AcceptsReturn="True" Text="{Binding Comments,Mode=TwoWay}"></TextBox>
                                    </DataTemplate>
                                </data:DataGridTemplateColumn.CellEditingTemplate>
                            </data:DataGridTemplateColumn> 

Change all the bindings now.

Update Database:

Now let' try the RowEditEnded Event of the DataGrid:

void dataGrid_RowEditEnded(object sender, DataGridRowEditEndedEventArgs e)
{
            TaskList selected = (TaskList)dataGrid.SelectedItem;//TaskList is my DTO Class
//You can get all the fileds using selected object,for eg: selected.StartDate
//Call WCF here

}

Hope this helps. Enjoy coding.

Up Next
    Ebook Download
    View all
    Learn
    View all