Fork me on GitHub

Integration

How to do advanced stuff with Datatype Grid.

Manipulate data from code

Versions: 5.4.2 5.5.x 6.0.x

Example

// Get reference to content
var contentService = UmbracoContext.Current.Application.Services.ContentService;
var content = contentService.GetById(Model.CurrentPage.Id);

// Get original data
var data = new GridRowCollection(content.GetValue("dataTypeGrid").ToString());

// Change data
foreach (var row in data)
{
    var cell = row.GetCell("test");
    cell.Value = new Random().Next(0, 10).ToString();
}

content.SetValue("dataTypeGrid", data.ToString());

// Save content
var result = contentService.SaveAndPublish(content);

Creating custom datatype handlers

Versions: 6.0.x

From version 6.0.0 and upwards, it is now possible to create your own datatype handlers for DataType Grid. These handlers allow you to customize how values are displayed in the grid, as well as hooking into the Save, Configure and Initialize events for each datatype. There are already handlers in place for most of Umbraco’s built-in properties but these can also be overriden.

Example

Start out by making a class that is deriving from uComponents.DataTypes.DataTypeGrid.Handlers.DataTypes.BaseDataTypeHandler<T>. Swap T with the class name of the datatype you want to handle (see List of known datatypes for reference).
You can also (optionally) decorate your property with the DataTypeHandler attribute to set priority for your handler. The default priority for a datatype handler is 0, and all built-in handlers have priority -1. This means that if you don’t add the attribute, the default priority will be applied.

[DataTypeHandler(Priority = 123]
public class ContentPickerDataTypeHandler : BaseDataTypeHandler<PagePickerDataType>
{
    /// <summary>
    /// Method for customizing the way the <see cref="T">datatype</see> value is displayed in the grid.
    /// </summary>
    /// <remarks>Called when the grid displays the cell value for the specified <see cref="T">datatype</see>.</remarks>
    /// <param name="dataType">The <see cref="T">datatype</see> instance.</param>
    /// <returns>The display value.</returns>
    public override string GetDisplayValue(T dataType)
    {
        return base.GetDisplayValue(dataType);
    }

    /// <summary>
    /// Method for getting the typed backing object for the specified <typeparamref name="T">datatype</typeparamref>.
    /// </summary>
    /// <typeparam name="TBackingObjectType">The backing object type.</typeparam>
    /// <param name="dataType">The <typeparamref name="T">datatype</typeparamref> instance.</param>
    /// <returns>The backing object.</returns>
    /// <remarks>Called when the method <see cref="GridCell.GetPropertyValue" /> method is called on a <see cref="GridCell" />.</remarks>
    public override TBackingObjectType GetPropertyValue<TBackingObjectType>(T dataType)
    {
        return base.GetPropertyValue<TBackingObjectType>(dataType);
    }

    /// <summary>
    /// Method for getting the backing object for the specified <see cref="T">datatype</see>.
    /// </summary>
    /// <param name="dataType">The <see cref="T">datatype</see> instance.</param>
    /// <returns>The backing object.</returns>
    /// <remarks>Called when the method <see cref="GridCell.GetPropertyValue()" /> method is called on a <see cref="GridCell" />.</remarks>
    public override object GetPropertyValue(T dataType)
    {
        return base.GetPropertyValue(dataType);
    }

    /// <summary>
    /// Method for getting the control to use when validating the specified <see cref="IDataType" />.
    /// </summary>
    /// <param name="dataType">The <see cref="IDataType" /> instance.</param>
    /// <param name="editorControl">The <see cref="IDataType" /> editor control.</param>
    /// <returns>The control to validate.</returns>
    public override Control GetControlToValidate(T dataType, Control editorControl)
    {
        return base.GetControlToValidate(dataType, editorControl);
    }

    /// <summary>
    /// Method for performing special actions <b>before</b> creating the <see cref="IDataType" /> editor.
    /// </summary>
    /// <param name="dataType">The <see cref="IDataType" /> instance.</param>
    /// <param name="eventArgs">The <see cref="DataTypeLoadEventArgs"/> instance containing the event data.</param>
    /// <remarks>Called <b>before</b> the grid creates the editor controls for the specified <see cref="IDataType" />.</remarks>
    public override void Initialize(T dataType, DataTypeLoadEventArgs eventArgs)
    {
    }

    /// <summary>
    /// Method for performing special actions <b>after</b> the <see cref="IDataType" />
    /// <see cref="IDataEditor">editor</see> has been loaded.
    /// </summary>
    /// <param name="dataType">The <see cref="IDataType" /> instance.</param>
    /// <param name="eventArgs">The <see cref="DataTypeLoadEventArgs"/> instance containing the event data.</param>
    /// <remarks>Called <b>after</b> the grid creates the editor controls for the specified <see cref="IDataType" />.</remarks>
    public override void Configure(T dataType, DataTypeLoadEventArgs eventArgs)
    {
    }

    /// <summary>
    /// Method for executing special actions before saving the editor value to the database.
    /// </summary>
    /// <param name="dataType">The <see cref="T">datatype</see> instance.</param>
    /// <param name="eventArgs">The <see cref="DataTypeSaveEventArgs"/> instance containing the event data.</param>
    /// <remarks>Called when the grid is saved for the specified <see cref="T">datatype</see>.</remarks>
    public override void Save(T dataType, DataTypeSaveEventArgs eventArgs)
    {
        base.Save(dataType, eventArgs);
    }
} 

Now, if you want to customize how the content picker value is displayed in the grid, create the following code in the GetDisplayValue(T dataType) method:

if (dataType.Data.Value != null)
{
    int id;

    if (int.TryParse(dataType.Data.Value.ToString(), out id))
    {
        var node = new Node(id);

        return string.Format("<a href='editContent.aspx?id={0}' title='Edit content'>Name: {1}<br/>Last updated: {2}</a>", node.Id, node.Name, node.UpdateDate);
    }

    return dataType.Data.Value.ToString();
}

return string.Empty;

Which will result in the grid rendering like this:

Content Editor

Custom datatypes

Even though DataType Grid is compatible with over 30 datatypes, there is always room for improvement. By overriding the Initialize, Configure and Save methods, it is possible to add compatibility with almost any datatype.
Feel free to take a look at the existing datatype handlers to see how they tweak the datatype into being compatible with DTG.

List of known datatypes
Name DataType Class DataEditor Class
Label umbraco.editorControls.label.DataTypeNoEdit umbraco.editorControls.noEdit
Numeric umbraco.editorControls.numberfield.IDataTypenteger umbraco.editorControls.numberField
Simple Editor umbraco.editorControls.simpleEditor.simpleEditorDataType umbraco.editorControls.simpleEditor.SimpleEditor
Textstring umbraco.editorControls.textfield.TextFieldDataType umbraco.editorControls.textfield.TextFieldEditor
Media Picker umbraco.editorControls.mediapicker.MediaPickerDataType umbraco.editorControls.mediaChooser
Dictionary Picker umbraco.editorControls.dictionaryPicker.dictionaryPickerDataType umbraco.editorControls.dictionaryPicker.dictionaryPicker
Approved Color umbraco.editorControls.colorpicker.ColorPickerDataType umbraco.editorControls.colorPicker
Checkbox list umbraco.editorControls.checkboxlist.checkboxListDataType umbraco.editorControls.checkboxlist.checkboxlistEditor
Content Picker umbraco.editorControls.pagepicker.PagePickerDataType umbraco.editorControls.pagePicker
Date Picker with time umbraco.editorControls.datefieldmultiple.DataTypeDatefieldMultiple umbraco.editorControls.dateField
Date Picker umbraco.editorControls.datepicker.DateDataType umbraco.editorControls.dateField
Dropdown multiple umbraco.editorControls.listbox.ListBoxDataType umbraco.editorControls.dropdownMultiple
Folder Browser umbraco.editorControls.folderbrowser.DataTypeFolderBrowser umbraco.editorControls.folderBrowser
Dropdown umbraco.editorControls.dropdownlist.DropdownListDataType umbraco.editorControls.dropdown
Member Picker umbraco.editorControls.memberpicker.MemberPickerDataType umbraco.editorControls.memberPicker
Radiobox umbraco.editorControls.radiobuttonlist.RadioButtonListDataType umbraco.editorControls.radiobox
Related Links umbraco.editorControls.PickerRelations.PickerRelationsDataType umbraco.editorControls.PickerRelations.PickerRelationsPreValueEditor
Richtext editor umbraco.editorControls.tinyMCE3.tinyMCE3dataType umbraco.editorControls.tinyMCE3.TinyMCE
Tags umbraco.editorControls.tags.DataType umbraco.editorControls.tags.DataEditor
Textbox multiple umbraco.editorControls.textfieldmultiple.textfieldMultipleDataType umbraco.editorControls.textfield.TextFieldEditor
True/false umbraco.editorControls.yesno.YesNoDataType umbraco.editorControls.yesNo
Ultimate Picker umbraco.editorControls.ultimatepicker.ultimatePickerDataType umbraco.editorControls.ultimatepicker.ultimatePickerDataEditor
Upload umbraco.editorControls.uploadfield.DataTypeUploadField umbraco.editorControls.uploadField
Image Cropper umbraco.editorControls.imagecropper.DataType umbraco.editorControls.imagecropper.DataEditor
XPath CheckBoxList umbraco.editorControls.XPathCheckBoxList.XPathCheckBoxListDataType umbraco.editorControls.XPathCheckBoxList.XPathCheckBoxListDataEdit
XPath DropDownList umbraco.editorControls.XPathDropDownList.XPathDropDownListDataType umbraco.editorControls.XPathDropDownList.XPathDropDownListDataEditor
uComponents: XPath Auto Complete uComponents.DataTypes.XPathAutoComplete.XPathAutoCompleteDataType uComponents.DataTypes.XPathAutoComplete.XPathAutoCompleteDataEditor
uComponents: Character Limit uComponents.DataTypes.CharLimit.CharLimitDataType uComponents.DataTypes.CharLimit.CharLimitControl
uComponents: Checkbox Tree uComponents.DataTypes.CheckBoxTree.CheckBoxTreeDataType uComponents.DataTypes.CheckBoxTree.CheckBoxTreeDataEditor
uComponents: Country Picker uComponents.DataTypes.CountryPicker.CountryPickerDataType uComponents.DataTypes.CountryPicker.CountryPickerDataEditor
uComponents: DataType Grid uComponents.DataTypes.DataTypeGrid.DataType uComponents.DataTypes.DataTypeGrid.DataEditor
uComponents: Dropdown CheckList uComponents.DataTypes.DropdownCheckList.DDCList_DataType uComponents.DataTypes.DropdownCheckList.DDCList_DataEditor
uComponents: Elastic TextBox uComponents.DataTypes.ElasticTextBox.ETB_DataType uComponents.DataTypes.ElasticTextBox.ETB_Control
uComponents: Enum CheckBoxList uComponents.DataTypes.EnumCheckBoxList.EnumCheckBoxListDataType uComponents.DataTypes.EnumCheckBoxList.EnumCheckBoxListDataEditor
uComponents: Enum DropDownList uComponents.DataTypes.EnumDropDownList.EnumDropDownListDataType uComponents.DataTypes.EnumDropDownList.EnumDropDownListDataEditor
uComponents: File DropDownList uComponents.DataTypes.FileDropDownList.FileDropDownListDataType uComponents.DataTypes.FileDropDownList.FileDropDownListControl
uComponents: FilePicker uComponents.DataTypes.FilePicker.FP_DataType uComponents.DataTypes.FilePicker.FP_Control
uComponents: ImagePoint uComponents.DataTypes.ImagePoint.ImagePointDataType uComponents.DataTypes.ImagePoint.ImagePointDataEditor
uComponents: Incremental TextBox uComponents.DataTypes.IncrementalTextBox.IT_DataType uComponents.DataTypes.IncrementalTextBox.IT_DataEditor
uComponents: Multiple Dates uComponents.DataTypes.MultipleDates.MD_DataType uComponents.DataTypes.MultipleDates.MD_DataEditor
uComponents: Multi-URL Picker uComponents.DataTypes.MultiUrlPicker.MultiUrlPickerDataType uComponents.DataTypes.MultiUrlPicker.MultiUrlPickerDataEditor
uComponents: Notes uComponents.DataTypes.Notes.NotesDataType uComponents.DataTypes.Notes.NotesDataEditor
uComponents: Property Picker uComponents.DataTypes.PropertyPicker.PropertyPickerDataType uComponents.DataTypes.PropertyPicker.PropertyPickerDataEditor
uComponents: Relation Links uComponents.DataTypes.RelationLinks.RelationLinksDataType uComponents.DataTypes.RelationLinks.RelationLinksDataEditor
uComponents: Render Macro uComponents.DataTypes.RenderMacro.RenderMacroDataType uComponents.DataTypes.RenderMacro.RenderMacroDataEditor
uComponents: Similarity uComponents.DataTypes.Similarity.SimilarityDataType uComponents.DataTypes.Similarity.SimilarityDataEditor
uComponents: SQL AutoComplete uComponents.DataTypes.SqlAutoComplete.SqlAutoCompleteDataType uComponents.DataTypes.SqlAutoComplete.SqlAutoCompleteDataEditor
uComponents: SQL CheckBoxList uComponents.DataTypes.SqlCheckBoxList.SqlCheckBoxListDataType uComponents.DataTypes.SqlCheckBoxList.SqlCheckBoxListDataEditor
uComponents: SQL DropDownList uComponents.DataTypes.SqlDropDownList.SqlDropDownListDataType uComponents.DataTypes.SqlDropDownList.SqlDropDownListDataEditor
uComponents: Sub Tabs uComponents.DataTypes.SubTabs.SubTabsDataType uComponents.DataTypes.SubTabs.SubTabsDataEditor
uComponents: Textstring Array uComponents.DataTypes.TextstringArray.TextstringArrayDataType uComponents.DataTypes.TextstringArray.TextstringArrayControl
uComponents: ToggleBox uComponents.DataTypes.ToggleBox.TB_DataType uComponents.DataTypes.ToggleBox.TB_Control
uComponents: URL Picker uComponents.DataTypes.UrlPicker.UrlPickerDataType uComponents.DataTypes.UrlPicker.UrlPickerDataEditor
uComponents: User Picker uComponents.DataTypes.UserPicker.UserPickerDataType uComponents.DataTypes.UserPicker.UserPickerControl
uComponents: XML Dropdown List uComponents.DataTypes.XmlDropDownList.XmlDropDownListDataType System.Web.UI.WebControls.DropDownList
uComponents: XPath AutoComplete uComponents.DataTypes.XPathAutoComplete.XPathAutoCompleteDataType uComponents.DataTypes.XPathAutoComplete.XPathAutoCompleteDataEditor