GridViewColorColumn Changes

9 posts, 0 answers
  1. Art
    Art avatar
    54 posts
    Member since:
    Dec 2010

    Posted 27 Oct 2015 Link to this post

    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

  2. Dess
    Admin
    Dess avatar
    1601 posts

    Posted 28 Oct 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Art
    Art avatar
    54 posts
    Member since:
    Dec 2010

    Posted 28 Oct 2015 in reply to Dess Link to this post

    Ok, thanks, is there any way I can get that in VB code.
  5. Dess
    Admin
    Dess avatar
    1601 posts

    Posted 28 Oct 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Art
    Art avatar
    54 posts
    Member since:
    Dec 2010

    Posted 28 Oct 2015 in reply to Dess Link to this post

    Thanks, got it working.

    Later

    Art

  7. Art
    Art avatar
    54 posts
    Member since:
    Dec 2010

    Posted 28 Oct 2015 in reply to Art Link to this post

    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?
  8. Dess
    Admin
    Dess avatar
    1601 posts

    Posted 30 Oct 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. 振 avatar
    1 posts
    Member since:
    Mar 2016

    Posted 16 Mar in reply to Dess Link to this post

    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.

  10. Dess
    Admin
    Dess avatar
    1601 posts

    Posted 17 Mar Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for WinForms is Visual Studio 2017 Ready