Customizing the Subsonic scaffold control

The Subsonic data access layer comes with a control called a Scaffold (the Scaffold concept comes from Ruby on Rails apparently) which allows you to quickly build a simple administration interface for your database tables.

The basic syntax is as follows:

<cc1:Scaffold ID="Scaffold1" runat="server" TableName="Products"></cc1:Scaffold>

Where SubsonicProvider is the name of the SubSonicService Provider from your web.config and TableName is the table you want to edit. The control handles rendering a gridview and a form for editing the fields in your table. By default the control will display all fields from the table in both the grid view and detail view. If you have a big table this quite quickly becomes unwieldy, particularly in the case of the grid view. The control provides two properties HiddenGridColumns and HiddenEditorColumns which allow you to specify which columns to hide. Place a comma-delimited list of the fields you want to hide in each property.

If you are providing an administration interface that allows your users to maintain content on their website then it is quite likely you will want to be able to present them with a XHTML editor for the appopriate fields. To achieve this I customized the original Scaffold control to include another property RichTextColumns. Again this is a comma-separated list that contains the fields in the table that you would like to present with a rich text editor.

My open source XHTML editor of choice is FCKEditor which is easy to configure and install and seems to create decent XHTML.

In the fields declaration I've added the following beneath the declaration of the other internal string lists:

private readonly List _richTextColumnList = new List();

In the BindEditor method between:

if(ctrlType == typeof(TextBox))
{
...
}

and

else if(ctrlType == typeof(CheckBox))
{
...
}

I've added the following:

else if (ctrlType == typeof(FredCK.FCKeditorV2.FCKeditor))
{
 FredCK.FCKeditorV2.FCKeditor editor = (FredCK.FCKeditorV2.FCKeditor)control2;
 editor.Value = reader[column.ColumnName].ToString();
}

Then in the GetEditorControl method in the section that deals with string fields I've added the part that creates the XHTML editor:

switch (col.DataType)
{
 case DbType.Guid:
 case DbType.AnsiString:
 case DbType.String:
 case DbType.StringFixedLength:
 case DbType.Xml:
 case DbType.Object:
 case DbType.AnsiStringFixedLength:
  if (Utility.IsMatch(colName, ReservedColumnName.CREATED_BY)  Utility.IsMatch(colName, ReservedColumnName.MODIFIED_BY))
  {
   cOut = new Label();
  }
  else
  {
   if (_richTextColumnList.Contains(colName))
   {
    FredCK.FCKeditorV2.FCKeditor editor = new FredCK.FCKeditorV2.FCKeditor();
    editor.ToolbarStartExpanded = false;
    editor.ForcePasteAsPlainText = true;
    editor.Height = 400;
    editor.UseBROnCarriageReturn = true;
    cOut = editor;
   }
   else
   {
    TextBox t = new TextBox();
    if (Utility.GetEffectiveMaxLength(col) > 250)
    {
     t.TextMode = TextBoxMode.MultiLine;
     t.Columns = 60;
     t.Rows = 4;
    }
    else
    {
     t.Width = Unit.Pixel(250);
     if (colName.EndsWith("guid"))
     {
      t.Text = Guid.NewGuid().ToString();
      t.Enabled = false;
     }
    }
    cOut = t;
   }
  }
  break;

Then finally I've added the RichTextColumns property which works in a similar way to the other HiddenEditorColumns and HiddenGridColumns properties:

        [DefaultValue(""), Description("A comma delimited list of column names which are displayed in the Editor using an XHTML editor."), Bindable(true), Category("Data")]
        public string RichTextColumns
        {
            set
            {
                this._richTextColumnList.Clear();
                foreach (string str in Utility.Split(value))
                {
                    this._richTextColumnList.Add(str.ToLower());
                }
            }
        }

And that's it! This has enabled us to quickly produce simple database administration interfaces for tables that store XHTML content.