Skip to main content Skip to footer

Editable Unbound Columns with C1DataGrid

Grid controls are commonly used to display records in tabular format. We have columns mapped to particular fields from the database to show the corresponding values. Along with this it provides the option to edit the values. However, at times user requirement might require including columns which are not mapped to any specific field in the database and at the same time provide support for editing the cell to hold temporary values. Consider an example where we have a grid application bound to an Employee Database. It may also require an additional temporary field to hold comments for each record. Now this is pretty easy to implement. However, once you include a column in the collection, you would notice you are not able to edit it or retain the values. Lets quickly look at the implementation using C1DataGrid for Silverlight.

Defining Class Structure

public class MyDataClass  
  public string Name { get; set; }  
  public int Age { get; set; }  
  public string Department { get; set; }  

Defining XAML Structure

<c1:C1DataGrid Name="c1DataGrid1" AutoGenerateColumns="False">  
    <c1:DataGridBoundColumn Header="Name" Binding="{Binding Name}"/>  
    <c1:DataGridBoundColumn Header="Age" Binding="{Binding Age}"/>  
    <c1:DataGridBoundColumn Header="Department" Binding="{Binding Department}"/>  
    <c1:DataGridTextColumn  Header="Comments"/>  

Preparing Unbound Column

If you see the above XAML declaration, you would notice that final column is not mapped to any field. If we bind the grid to the datasource and run the application, you will not be able to edit the column even being a DataGridTextColumn. This is due to the fact that the column is not linked to any binding. We have to define a temporay binding object for the column to enable the editing.

Binding tempBinding = new System.Windows.Data.Binding()  
   Path = new PropertyPath("[Temp]"),  
   Mode = System.Windows.Data.BindingMode.OneTime,  

(c1DataGrid1.Columns[3] as C1.Silverlight.DataGrid.DataGridTextColumn).Binding = tempBinding;  
(c1DataGrid1.Columns[3] as C1.Silverlight.DataGrid.DataGridTextColumn).Tag = "tempBinding";  

Above code declaration shows defining 'Tag' property to the column. This is required to handle the editing of the unbound columns.

Preparing Cell Editing for Unbound Columns

General behavior will cause the cell value to loose the text once the grid comes out of edit mode. To workaround this behavior, we store the edited text in a temporary variable and set the data in the Cell value. This flow of data is handled by the CommittingEdit and CommittedEdit events. Similarly, to move the text to the editor, use the events BeganEdit and BeginningEdit.

string unBoundCellValue;  
bool unboundFlagUpdateValue;  

void c1DataGrid1_BeganEdit(object sender, DataGridBeganEditEventArgs e)  
   if (unBoundCellValue != "")  
     ((C1.Silverlight.C1TextBoxBase)(e.EditingElement)).C1Text = unBoundCellValue;  

void c1DataGrid1_BeginningEdit(object sender, DataGridBeginningEditEventArgs e)  
   if (e.Column.Tag != null)  
     if (e.Row.DataItem != null)  
       unBoundCellValue = (c1DataGrid1[e.Row, e.Column].Presenter.Content as TextBlock).Text;  

void c1DataGrid1_CommittingEdit(object sender, DataGridEndingEditEventArgs e)  
   if (e.Column.Tag != null)  
     if (e.Row.DataItem != null)  
        unboundFlagUpdateValue = true;  
        unBoundCellValue = ((C1.Silverlight.C1TextBoxBase)(e.EditingElement)).C1Text;  

void c1DataGrid1_CommittedEdit(object sender, DataGridCellEventArgs e)  
    if (unboundFlagUpdateValue)  
      (e.Cell.Presenter.Content as TextBlock).Text = unBoundCellValue;  

    unboundFlagUpdateValue = false;  

Final output of the grid control appears as shown in the image below. EditableUnboundColumn Refer to the attached sample for complete implementation. Sample C#


comments powered by Disqus