GridViewColorColumn Changes

[Art]

I'm creating a GridViewColorColumn and I would like to modify it's look. I just want the color box showing the color and the button, no text. It would be nice if I could make the color box wider also.

 VB code please.

   Private Sub grdMainGrid_DataBindingComplete(sender As Object, e As GridViewBindingCompleteEventArgs) Handles grdMainGrid.DataBindingComplete

        Dim colorBoxColumn As New Telerik.WinControls.UI.GridViewColorColumn
        colorBoxColumn.DataType = GetType(Color)
        colorBoxColumn.HeaderText = "Staff Color"
        grdMainGrid.Columns(2) = colorBoxColumn
        grdMainGrid.AllowEditRow = True
        grdMainGrid.Columns(2).ReadOnly = False

​end sub

 

Later

Art

[Dess | Tech Support Engineer, Principal]

Hello Art,

Thank you for writing.

In order to achieve your goal, you can use a custom GridColorCellElement. Here is a sample implementation which result is illustrated on the attached screenshot:

public Form1()
{
    InitializeComponent();

    this.radGridView1.CreateCell += radGridView1_CreateCell;

    DataTable dt = new DataTable();
    dt.Columns.Add("Id", typeof(int));
    dt.Columns.Add("Name", typeof(string));
    dt.Columns.Add("Color", typeof(Color));

    dt.Rows.Add(1, "Item1", Color.Red);
    dt.Rows.Add(2, "Item2", Color.Yellow);
    dt.Rows.Add(3, "Item3", Color.FromArgb(124, 25, 78));

    this.radGridView1.DataSource = dt;
    this.radGridView1.AutoSizeColumnsMode = Telerik.WinControls.UI.GridViewAutoSizeColumnsMode.Fill;
}

private void radGridView1_CreateCell(object sender, GridViewCreateCellEventArgs e)
{
    if (e.CellType == typeof(GridColorCellElement))
    {
        e.CellElement = new CustomGridColorCellElement(e.Column, e.Row);
    }
}

public class CustomGridColorCellElement : GridColorCellElement
{
    public CustomGridColorCellElement(GridViewColumn column, GridRowElement row) : base(column, row)
    {
        this.DrawText = false;
        this.ColorBox.StretchHorizontally = true;
    }

    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(GridColorCellElement);
        }
    }

    protected override SizeF ArrangeOverride(SizeF finalSize)
    {
        RectangleF clientRect = this.GetClientRectangle(finalSize);

        if (this.Editor != null)
        {
            this.ArrangeEditorElement(finalSize, clientRect);
            return finalSize;
        }

        RectangleF colorBoxRect = clientRect;
        this.ColorBox.Arrange(colorBoxRect);

        RectangleF lmpRect = new RectangleF(this.ColorBox.DesiredSize.Width, clientRect.Y,
            clientRect.Width - this.ColorBox.DesiredSize.Width, clientRect.Height);

        this.Layout.Arrange(lmpRect);
        return finalSize;
    }
}

Our GridView >> Creating custom cells help article is quite useful on this topic.

I hope this information helps. Should you have further questions I would be glad to help.

 

Regards,
Dess
Telerik

[Art]

Ok, thanks, is there any way I can get that in VB code.

[Dess | Tech Support Engineer, Principal]

Hello Art,

Thank you for writing back.

Here is the sample code snippet in VB.NET:

Public Sub New()
    InitializeComponent()

    AddHandler Me.RadGridView1.CreateCell, AddressOf radGridView1_CreateCell

    Dim dt As New DataTable()
    dt.Columns.Add("Id", GetType(Integer))
    dt.Columns.Add("Name", GetType(String))
    dt.Columns.Add("Color", GetType(Color))

    dt.Rows.Add(1, "Item1", Color.Red)
    dt.Rows.Add(2, "Item2", Color.Yellow)
    dt.Rows.Add(3, "Item3", Color.FromArgb(124, 25, 78))

    Me.RadGridView1.DataSource = dt
    Me.RadGridView1.AutoSizeColumnsMode = Telerik.WinControls.UI.GridViewAutoSizeColumnsMode.Fill
End Sub

Private Sub radGridView1_CreateCell(sender As Object, e As GridViewCreateCellEventArgs)
    If e.CellType = GetType(GridColorCellElement) Then
        e.CellElement = New CustomGridColorCellElement(e.Column, e.Row)
    End If
End Sub

Public Class CustomGridColorCellElement
Inherits GridColorCellElement
    Public Sub New(column As GridViewColumn, row As GridRowElement)
        MyBase.New(column, row)
        Me.DrawText = False
        Me.ColorBox.StretchHorizontally = True
    End Sub

    Protected Overrides ReadOnly Property ThemeEffectiveType() As Type
        Get
            Return GetType(GridColorCellElement)
        End Get
    End Property

    Protected Overrides Function ArrangeOverride(finalSize As SizeF) As SizeF
        Dim clientRect As RectangleF = Me.GetClientRectangle(finalSize)

        If Me.Editor IsNot Nothing Then
            Me.ArrangeEditorElement(finalSize, clientRect)
            Return finalSize
        End If

        Dim colorBoxRect As RectangleF = clientRect
        Me.ColorBox.Arrange(colorBoxRect)

        Dim lmpRect As New RectangleF(Me.ColorBox.DesiredSize.Width, clientRect.Y, clientRect.Width - _
                                      Me.ColorBox.DesiredSize.Width, clientRect.Height)

        Me.Layout.Arrange(lmpRect)
        Return finalSize
    End Function
End Class

Feel free to use our online Code Converter.

I hope this information helps. If you have any additional questions, please let me know.

Regards,
Dess
Telerik

[Art]

Thanks, got it working.

Later

Art

[Art]

Quick question, why when I choose a color from the "Professional" tab, it doesn't show up in the color box? What's up with that?

[Dess | Tech Support Engineer, Principal]

Hello Art,

Thank you for writing back.

When using the provided code snippet from my previous post and I select a color from the Professional tab, the selected color is successfully displayed in the color box. Please refer to the attached gif file illustrating the behavior on my end. Am I missing something? Could you please specify the exact steps how to reproduce the problem? Once, we replicate the issue locally, we can make an adequate analysis of the problem and assist you further. Thank you in advance.

I am looking forward to your reply.

 Regards,
Dess
Telerik

[振]

Hi Dess,

On this basis, How can i custom the GridColorPikckerElement shows when click in order to hide the RadTextBoxItem?

in other words ,when i click the cell,it only shows  colorbox and colorpickerbutton,not textbox for input.

looking forward to you reply.

[Dess | Tech Support Engineer, Principal]

Hello ,

Thank you for writing back. 

In order to hide the text box and enlarge the color box, you can subscribe to the RadGridView.CellEditorInitialized event and use the following code snippet:

Private Sub RadGridView1_CellEditorInitialized(sender As Object, e As GridViewCellEventArgs)
    Dim colorPicker As GridColorPickerEditor = TryCast(e.ActiveEditor, GridColorPickerEditor)
    If colorPicker IsNot Nothing Then
        Dim el As GridColorPickerElement = TryCast(colorPicker.EditorElement, GridColorPickerElement)
        el.TextBoxItem.Visibility = Telerik.WinControls.ElementVisibility.Collapsed
        el.ColorBox.MinSize = New Size(e.Column.Width - el.ColorPickerButton.Size.Width - 20, 0)
    End If
End Sub

I hope this information helps. If you have any additional questions, please let me know.

Regards,
Dess
Telerik