This is a migrated thread and some comments may be shown as answers.

How to hide Color code TextBox GridviewColorColumn

1 Answer 298 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Shanti 😎
Top achievements
Rank 2
Veteran
Shanti 😎 asked on 07 Aug 2019, 06:28 AM

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

1 Answer, 1 is accepted

Sort by
0
Accepted
Nadya | Tech Support Engineer
Telerik team
answered on 09 Aug 2019, 02:31 PM
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.
Tags
GridView
Asked by
Shanti 😎
Top achievements
Rank 2
Veteran
Answers by
Nadya | Tech Support Engineer
Telerik team
Share this question
or