Click here to Skip to main content
Click here to Skip to main content

RichTextBox Cell in a DataGridView

By , 1 May 2009
Rate this:
Please Sign up or sign in to vote.
DataGridViewRichTextBox

Introduction

You can use this DataGridViewRichTextBoxColumn to display and edit RTF content.

Background

A customer wanted to have superscript and subscript support in his reports, and he also wanted to edit the reports. I thought RTF files were a good choice. Then, a problem came up. I needed a setting dialog with a DataGridView, where the user will input text (should support superscript and subscript). So, I decided to put a RichTextBox in the DataGridView.

I found an idea here. There was no source code. So, I decided to write about it and post my first article in CodeProject.

Three Classes to make a DataGridViewColumn

There is an example of a calendar DataGridViewColumn here.

To make a custom DataGridViewColumn, we should write three classes:

  1. An editor control class derived from IDataGridViewEditingControl
  2. A cell class derived from DataGridViewCell or its descendant class
  3. A column class derived from DataGridViewColumn or its descendant class

First, the Editor Control Class

Here is the code for supporting multiline input in the RichTextBox:

public class  DataGridViewRichTextBoxEditingControl : 
        RichTextBox, IDataGridViewEditingControl
{
    // To implement multiline, 'Enter' should be treated as an input key.
    protected override bool IsInputKey(Keys keyData)
    {
        Keys keys = keyData & Keys.KeyCode;

        if (keys == Keys.Return)
        {
            return this.Multiline;
        }

        return base.IsInputKey(keyData);
    } 

    // Tell DataGridView 'Enter' is an input key to this control.
    // And some other keys are also input keys.
    public bool EditingControlWantsInputKey
    (Keys keyData, bool dataGridViewWantsInputKey)
    {
        switch ((keyData & Keys.KeyCode))
        {
            case Keys.Return:
                // The code for 'Enter' is copied from 
                // DataGridViewTextBoxEditingControl,
                // Shift + Enter = NewLine
                if ((((keyData & (Keys.Alt | Keys.Control | Keys.Shift))
                     == Keys.Shift) && this.Multiline))
                {
                    return true;
                }
                break;
            case Keys.Left:
            case Keys.Right:
            case Keys.Up:
            case Keys.Down:
                return true;
        }

        return !dataGridViewWantsInputKey;
    }
}

Here is the code for shortcuts. RichTextBox already supports Ctrl + '+' and Ctrl + Shift + '+' for subscript and superscript. What needs to be done is add support for Ctrl + 'B', Ctrl + 'I', and Ctrl + 'U'.

protected override void OnKeyDown(KeyEventArgs e)
{
    base.OnKeyDown(e);

    if (e.Control)
    {
        switch (e.KeyCode)
        {
            // Control + B = Bold
            case Keys.B:
                if (this.SelectionFont.Bold)
                {
                    this.SelectionFont = new Font(this.Font.FontFamily, 
                     this.Font.Size, ~FontStyle.Bold & this.Font.Style);
                }
                else
                    this.SelectionFont = new Font(this.Font.FontFamily, 
                     this.Font.Size, FontStyle.Bold | this.Font.Style);
                break;
            // Control + U = Underline
            case Keys.U:
                if (this.SelectionFont.Underline)
                {
                    this.SelectionFont = new Font(this.Font.FontFamily, 
                     this.Font.Size, ~FontStyle.Underline & this.Font.Style);
                }
                else
                    this.SelectionFont = new Font(this.Font.FontFamily, 
                     this.Font.Size, FontStyle.Underline | this.Font.Style);
                break;
            // Control + I = Italic
            // Conflicts with the default shortcut
            //case Keys.I:
            //    if (this.SelectionFont.Italic)
            //    {
            //        this.SelectionFont = new Font(this.Font.FontFamily, 
            //         this.Font.Size, ~FontStyle.Italic & this.Font.Style);
            //    }
            //    else
            //        this.SelectionFont = new Font(this.Font.FontFamily, 
            //         this.Font.Size, FontStyle.Italic | this.Font.Style);
            //    break;
            default:
                break;
        }
    }
}

Second, the Cell Class

This is the most important class for RichTextBoxColumn, because here we do the painting job for the cell.

I suggest you should first take a look here. Then, you will know how to print a RichTextBox. I just changed it a little to print it to an Image object.

The cell class was derived from DataGridViewTextBoxCell due to speed problems. I changed it with DataGridViewImageCell. I needed to do something to avoid errors in the DataGridViewImageCell.

public class DataGridViewRichTextBoxCell : DataGridViewImageCell
{
    // The value should be RTF string, so these types should be changed.	
    public override Type ValueType
    {
        get
        {
            return typeof(string);
        }
        set
        {
            base.ValueType = value;
        }
    }

    public override Type FormattedValueType
    {
        get
        {
            return typeof(string);
        }
    } 

    // Since the value type is changed, we need to do something more.
    private static void SetRichTextBoxText(RichTextBox ctl, string text)
    {
        try
        {
            ctl.Rtf = text;
        }
        catch (ArgumentException)
        {
            ctl.Text = text;
        }
    }
	
    public override void InitializeEditingControl
	(int rowIndex, object initialFormattedValue, 
	DataGridViewCellStyle dataGridViewCellStyle)
    {
        base.InitializeEditingControl
	(rowIndex, initialFormattedValue, dataGridViewCellStyle);

        RichTextBox ctl = DataGridView.EditingControl as RichTextBox;

        if (ctl != null)
        {
            SetRichTextBoxText(ctl, Convert.ToString(initialFormattedValue));
        }
    }

    protected override object GetFormattedValue
	(object value, int rowIndex, ref DataGridViewCellStyle cellStyle, 
	    TypeConverter valueTypeConverter, 
		TypeConverter formattedValueTypeConverter,
		 DataGridViewDataErrorContexts context)
    {
        return value;
    }
}

Now, we will paint the cell.

The RichTextBoxPrinter.Print function is from the link I mentioned above.

private static readonly RichTextBox _editingControl = new RichTextBox();

// Images for selected and normal states.
private Image GetRtfImage(int rowIndex, object value, bool selected)
{
    Size cellSize = GetSize(rowIndex);

    if (cellSize.Width < 1 || cellSize.Height < 1)
        return null;

    RichTextBox ctl = null;

    if (ctl == null)
    {
        ctl = _editingControl;
        ctl.Size = GetSize(rowIndex);
        SetRichTextBoxText(ctl, Convert.ToString(value));
    }

    if (ctl != null)
    {
        // Print the content of RichTextBox to an image.
        Size imgSize = new Size(cellSize.Width - 1, cellSize.Height - 1);
        Image rtfImg = null;

        if (selected)
        {
            // Selected cell state
            ctl.BackColor = DataGridView.DefaultCellStyle.SelectionBackColor;
            ctl.ForeColor = DataGridView.DefaultCellStyle.SelectionForeColor;

            // Print image
            rtfImg = RichTextBoxPrinter.Print(ctl, imgSize.Width, imgSize.Height);

            // Restore RichTextBox
            ctl.BackColor = DataGridView.DefaultCellStyle.BackColor;
            ctl.ForeColor = DataGridView.DefaultCellStyle.ForeColor;
        }
        else
        {
            rtfImg = RichTextBoxPrinter.Print(ctl, imgSize.Width, imgSize.Height);
        }

        return rtfImg;
    }

    return null;
}

// Draw the image of the rich text box
protected override void Paint(Graphics graphics, 
	Rectangle clipBounds, Rectangle cellBounds, int rowIndex, 
    DataGridViewElementStates cellState, object value, 
	object formattedValue, string errorText, 
    	DataGridViewCellStyle cellStyle, 
	DataGridViewAdvancedBorderStyle advancedBorderStyle, 
	DataGridViewPaintParts paintParts)
{
    base.Paint(graphics, clipBounds, cellBounds, rowIndex, 
	cellState, null, null, errorText, cellStyle, advancedBorderStyle, paintParts);

    Image img = GetRtfImage(rowIndex, value, base.Selected);

    if (img != null)
        graphics.DrawImage(img, cellBounds.Left, cellBounds.Top);
}

Other things required for cell edit:

// Remember, DataGridViewImageCell doesn't behave like DataGridViewTextBoxCell.
// So we need to handle the mouse events for edit.

#region Handlers of edit events, copied from DataGridViewTextBoxCell 

private byte flagsState;

protected override void OnEnter(int rowIndex, bool throughMouseClick)
{
    base.OnEnter(rowIndex, throughMouseClick);

    if ((base.DataGridView != null) && throughMouseClick)
    {
        this.flagsState = (byte)(this.flagsState | 1);
    }
}

protected override void OnLeave(int rowIndex, bool throughMouseClick)
{
    base.OnLeave(rowIndex, throughMouseClick);

    if (base.DataGridView != null)
    {
        this.flagsState = (byte)(this.flagsState & -2);
    }
}

protected override void OnMouseClick(DataGridViewCellMouseEventArgs e)
{
    base.OnMouseClick(e);
    if (base.DataGridView != null)
    {
        Point currentCellAddress = base.DataGridView.CurrentCellAddress;

        if (((currentCellAddress.X == e.ColumnIndex) && 
            (currentCellAddress.Y == e.RowIndex)) && 
            (e.Button == MouseButtons.Left))
        {
            if ((this.flagsState & 1) != 0)
            {
                this.flagsState = (byte)(this.flagsState & -2);
            }
            else if (base.DataGridView.EditMode != 
                      DataGridViewEditMode.EditProgrammatically)
            {
                base.DataGridView.BeginEdit(false);
            }
        }
    }
}

#endregion

Finally, the Column Class

It's easy because we already have the classes for the editor control and the cell:

public class DataGridViewRichTextBoxColumn : DataGridViewColumn
{
    public DataGridViewRichTextBoxColumn()
        : base(new DataGridViewRichTextBoxCell())
    { 
    }

    public override DataGridViewCell CellTemplate
    {
        get
        {
            return base.CellTemplate;
        }
        set
        {
            if (!(value is DataGridViewRichTextBoxCell))
                throw new InvalidCastException("CellTemplate must" + 
                      " be a DataGridViewRichTextBoxCell");

            base.CellTemplate = value;
        }
    }
}

Using the Code

Use it just like other columns for DataGridView. See the demo source code.

Points of Interest

At first, the cell class was derived from DataGridViewTextBoxCell. It's OK if the text is short. But, when the RTF content was long or it contained a picture, it became slow when entering or leaving the cell. Then, I changed the parent class to DataGridViewImageCell, and now the speed is no longer a problem.

History

  • 4/30/2009
    • Updated class DataGridViewRichTextBoxCell (including gzobi666's correction)
    • Updated RichTextBoxPrinter according to the D_Kondrad's correction
  • 12/18/2008
    • Added the code with instructions

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

mrwisdom
Software Developer
China China
No Biography provided

Comments and Discussions

 
Questionhow to highlight search term PinmemberashsanD16-Sep-13 19:26 
Questionis it available in vb PinmemberashsanD11-Sep-13 23:36 
AnswerRe: is it available in vb PinmemberRick Hirons22-Nov-13 1:00 
QuestionHi! Could I ask you a related question? PinmemberMember 81065404-Jun-13 21:26 
AnswerRe: Hi! Could I ask you a related question? Pinmembermrwisdom5-Jun-13 17:29 
GeneralMy vote of 5 PinmemberMazen el Senih29-Mar-13 5:00 
QuestionChange font Pinmembervyh15-Dec-12 13:17 
QuestionSlow Perfomance Pinmemberandrea tosetto14-Dec-12 0:49 
SuggestionRe: Slow Perfomance PinmemberMember 814490724-Jan-13 21:48 
GeneralRe: Slow Perfomance Pinmembermrwisdom5-Jun-13 17:28 
QuestionArtifacts/rogue pixels when using Segoe UI font (and some padding) PinmemberTheMperor4-Oct-12 22:21 
QuestionHow to add columns dinamically? PinmemberThiago_Lima19-Sep-12 8:29 
AnswerRe: How to add columns dinamically? [modified] PinmemberTheMperor4-Oct-12 22:03 
QuestionAutoResizeRows PinmemberMember 87627483-Apr-12 1:38 
GeneralMy vote of 5 PinmemberA.J.Wegierski1-Apr-12 19:22 
GeneralMy vote of 5 PinmemberProEnggSoft22-Mar-12 14:39 
QuestionRight click copy Pinmemberjimdunntx30-Jan-12 6:36 
QuestionPrinting PinmemberMember 298050924-Jan-12 2:50 
QuestionToolkit issue? Pinmemberbioshock1720-Jan-12 6:14 
GeneralDataGridView.AutoSizeRows (other solution) PinmemberMember 38656237-Nov-11 7:21 
QuestionParent Window Re: DataGridView.AutoSizeRows (other solution) [modified] PinmemberArne Christian Rosenfeldt18-Jan-13 9:42 
GeneralMy vote of 5 PinmemberFilip D'haene13-Sep-11 11:44 
GeneralThere is an error in using your program Pinmemberhambor18-Jun-11 3:34 
GeneralThanks PingroupYZK30-Mar-11 0:25 
GeneralMy vote of 5 PinmemberDhavalShah198812328-Dec-10 20:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140415.2 | Last Updated 1 May 2009
Article Copyright 2008 by mrwisdom
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid