Creating custom columns in C1DataGrid for Silverlight

March 26 2010

ComponentOne DataGrid for Silverlight supports creating specific behavior columns. For example you can create a Hyperlink column, a GIF column, a Rich Text column, and so on.

By creating a custom column you'll be able to customize the cell content and editing content of all the cells belonging to a column, you can even customize the header presenter of the column.

First, you should add a new class file where the custom column will be written, for example complete the following steps:

Navigate to the Solution Explorer, right-click the project name and select Add│New Item.
In the Add New Item dialog box choose Class in the list of templates.
Name the class, for example "DataGridHyperlinkColumn.cs", and click the Add button to add the class to the project.

Once the file is created it must inherit from DataGridBoundColumn. Update the class so it appears similar to the following:

Visual Basic

Imports C1.Silverlight.DataGrid

Public Class DataGridHyperlinkColumn

Inherits DataGridBoundColumn

End Class

using C1.Silverlight.DataGrid;

public class DataGridHyperlinkColumn : DataGridBoundColumn

{

}

Customizing Column Cell Content

In this section you'll find information about changing the UI element shown as the content of cells belonging to a column when the cell is not in editing mode.

It's important to note that cell content UI elements are recycled by the data grid; that means that this column could potentially use UI elements created by other columns.

To implement custom cell content you'll need to override the following methods:

GetCellContentRecyclingKey: Key used to store the cell content for future reuse in a shared pool. Columns returning the same RecyclingKey will be candidates to share the same cell content instances.
CreateCellContent: Creates the visual element that will be used to display the information inside a cell.
BindCellContent: Initializes the cell content presenter. This method must set cellContent properties, the SetBinding of the corresponding dependency property being "row.DataItem", the source which can be set directly in the binding or in the DataContext of the cellContent.
UnbindCellContent: This method is called before the cell content is recycled.

In the implementation of a hyperlink column the methods might look similar to the example below. In the following method a different key for this column is returned (Default key is typeof(TextBlock)), This means this column will not share the cell content element with other columns (unless it would be another column which returned the same key, but that's not likely to happen).

public override object GetCellContentRecyclingKey(DataGridRow row) { return typeof(HyperlinkButton); }

The CreateCellContent method will be called by the data grid if there is no recycled hyperlink. In this case a new hyperlink will be created which will be used in the cell once the cell that contains the hyperlink is unloaded; the hyperlink will be saved to be used in a future cell:

public override FrameworkElement CreateCellContent(DataGridRow row) { return new HyperlinkButton(); }

After the hyperlink is created or a recycled one is takenn the BindCellContent method will be called by the data grid passing the hyperlink as a parameter. In this method you should set the properties of the hyperlink to bind it to the data of the cell:

public override void BindCellContent(FrameworkElement cellContent, DataGridRow row) { var hyperlink = (HyperlinkButton)cellContent;

if (Binding != null)  
{  
    Binding newBinding = CopyBinding(Binding);

    newBinding.Source = row.DataItem;  
    hyperlink.SetBinding(HyperlinkButton.NavigateUriProperty, newBinding);

}

hyperlink.HorizontalAlignment = HorizontalAlignment;  
hyperlink.VerticalAlignment = VerticalAlignment;

}

Note that you can also set the data item as the data context of the hyperlink instead of setting it in the Source property of the binding. For example:

Hyperlink.DataContext = row.DataItem;

Although you will end up with the same result, this technique is does not perform as well as setting the binding source property directly.

Adding Properties to a Custom Column

You may want to add properties to a column in order to set a specific behavior. Continuing with the hyperlink column created in the previous topics, in this topic you'll add a property called TargetName. This property allows the user to specify the name of the target window or frame where the page will open:

public string TargetName { get; set; }

Once the property is created you'll propagate this to the hyperlink in the BindCellContent method:

public override void BindCellContent(FrameworkElement cellContent, DataGridRow row) { var hyperlink = (HyperlinkButton)cellContent;

if (Binding != null)  
{  
    Binding newBinding = CopyBinding(Binding);

    newBinding.Source = row.DataItem;  
    hyperlink.SetBinding(HyperlinkButton.NavigateUriProperty, newBinding);

}

hyperlink.HorizontalAlignment = HorizontalAlignment;  
hyperlink.VerticalAlignment = VerticalAlignment;  
hyperlink.TargetName = TargetName;

}

Tips

You may find the following tips helpful when adding properties to a custom column:

Provide a constructor that takes a Property info as parameter calling base(property) in order to set the Binding, SortMemeberPath, FilterMemberPath and Header properties automatically as well as the properties set using custom attributes (Currently supported attributes are : DisplayAttribute (AutoGenerateFilter, Name, GroupName, Order), DisplayFormatAttribute, and EditableAttribute).

public DataGridHyperlinkColumn(PropertyInfo property) : base(property)

Setting a converter in the binding can helps you to manage scenarios where you need to use a column bound to property source that is not the same type. Suppose you want to bind a Numeric column against a string property, this scenario will work correctly if you set a converter type which converts the string to a double.

MESCIUS inc.