How to hide Color code TextBox GridviewColorColumn

2 posts, 1 answers
  1. Shanti 😎
    Shanti 😎 avatar
    29 posts
    Member since:
    Jun 2016

    Posted 07 Aug 2019 Link to this post

    Hi,

    I have GridviewColorCoumn in my Gridview.

    1) I want to hide Color code Textbox in Editor Section.

    OR

    2) I want to Show Hex formatted Color code. Currently shows Argb Color code.

     

    Please check attached file.

    Waiting for your favourable respose.

    Thanks

  2. Answer
    Nadya
    Admin
    Nadya avatar
    378 posts

    Posted 09 Aug 2019 Link to this post

    Hello, Shanti,

    Note that most of the forum threads are reviewed by Telerik representatives and sometimes we address the questions asked by our customers in the forums as well. However, a post in the forum doesn't guarantee you a response from the Telerik support team. Moreover, threads are handled according to license and time of posting, so if it is an urgent problem, we suggest you use a support ticket, which would be handled before a forum thread.

    Thank you for your understanding.

    As a gesture of good will we will address this question which may be useful for the community.

    In order to hide the color text box in GridColorPickerEditor, it is necessary to handle the RadGridView.CellEditorInitialized event and set its Visibility property to Collapsed. You can find below a sample code snippet:

    private void RadGridView1_CellEditorInitialized(object sender, GridViewCellEventArgs e)
    {
        GridColorPickerEditor colorPicker = e.ActiveEditor as GridColorPickerEditor;
     
        if (colorPicker != null)
        {
            RadColorPickerEditorElement el = colorPicker.EditorElement as RadColorPickerEditorElement;
            RadTextBoxItem item = el.TextBoxItem;
            item.Visibility = ElementVisibility.Collapsed;
        }
    }

    In addition to this solution, you can hide the RGB text from the cell itself while it is not in edit mode. This can be achieved by using the CellFormatting event and hiding the cell's text as follows:

    private void RadGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
    {
        GridColorCellElement cell = e.CellElement as GridColorCellElement;
     
        if (cell != null)
        {
            cell.DrawText = false;
        }
        else
        {
            e.CellElement.ResetValue(LightVisualElement.DrawTextProperty, ValueResetFlags.Local);
        }
    }

    As to the second question, it is possible to show the HEX color value as well. For this purpose, you can use a custom editor which inherits from the GridColorPickerEditor. In the EditorRequired event you should replace the default editor with the custom one:

    private void RadGridView1_EditorRequired(object sender, EditorRequiredEventArgs e)
    {
        if (e.EditorType==typeof(GridColorPickerEditor))
        {
            e.Editor = new CustomGridColorPickerEditor();
        }
    }

    public class CustomGridColorPickerEditor : GridColorPickerEditor
    {
        protected override RadElement CreateEditorElement()
        {
            return new CustomRadColorPickerEditorElement();
        }
    }
     
    public class CustomRadColorPickerEditorElement : RadColorPickerEditorElement
    {
        LightVisualElement hexText = new LightVisualElement();
        protected override void CreateChildElements()
        {
            hexText.Alignment = ContentAlignment.MiddleCenter;
            hexText.StretchHorizontally = false;
            base.CreateChildElements();
            this.Children.Add(hexText);
        }
        protected override void OnValueChanged(EventArgs e)
        {
            base.OnValueChanged(e);
     
            Color myColor = this.Value;
            string hex = myColor.R.ToString("X2") + myColor.G.ToString("X2") + myColor.B.ToString("X2");
            hexText.Text ="HEX " + hex;
        }
    }

    The obtained result is illustrated in the below screenshot:



    Feel free to use this approach which suits your requirements best.

    I hope this information helps. 

    Regards,
    Nadya
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top