RadGridView - BackColor

[Franklin]

I have a problem about backcolor. I want to change the backcolor of a specific row.

I want to select with a Click or DoubleClick the row and its have to backcolor change.
Any ideas guys?, becauses i tryied a lot of things but doesnt works because the only condicion is that, "Selected" or at least the "CurrentRow", but i need in click or doubleclick event.

Thank you guys.

[Hristo]

Hello Franklin,

Thank you for writing.

You could change the color of given row in RadGridView by simply subscribing to RowFormatting event and in the handler modify the visual appearance of the whole row. There is additional information in the following help article, for sample implementation see my code snippet below:

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        var dataTable = new DataTable();
        dataTable.Columns.Add("Id", typeof(int));
        dataTable.Columns.Add("Name", typeof(string));
        dataTable.Columns.Add("IsValid", typeof(bool));

        for (int i = 0; i < 10; i++)
        {
            dataTable.Rows.Add(i, "Name " + i, i % 2 == 0 ? true : false);
        }

        this.radGridView1.DataSource = dataTable;
        this.radGridView1.CurrentRow = null;
        this.radGridView1.RowFormatting += radGridView1_RowFormatting;

    }

    private void radGridView1_RowFormatting(object sender, Telerik.WinControls.UI.RowFormattingEventArgs e)
    {
        if (e.RowElement.IsSelected)
        {
            e.RowElement.DrawFill = true;
            e.RowElement.GradientStyle = GradientStyles.Solid;
            e.RowElement.BackColor = Color.Aqua;
        }
        else
        {
            e.RowElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
            e.RowElement.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local);
            e.RowElement.ResetValue(LightVisualElement.DrawFillProperty, ValueResetFlags.Local);
        }
    }
}

Changing the color of a selected row on а double click is a little bit more tricky. Apart from subscribing to RowFormatting event you would also need to handle CellDoubleClick, MouseDoubleClick, CellEditorInitialized, EditorElement_Click and EditorElement_DoubleClick events. The reason is that the editor becomes active when you click on a cell and there you should write your own logic to fire up the events. I have prepared sample implementation as well:

public partial class Form2 : Form
{
    public Form2()
    {
        InitializeComponent();

        var dataTable = new DataTable();
        dataTable.Columns.Add("Id", typeof(int));
        dataTable.Columns.Add("Name", typeof(string));
        dataTable.Columns.Add("IsValid", typeof(bool));

        for (int i = 0; i < 10; i++)
        {
            dataTable.Rows.Add(i, "Name " + i, i % 2 == 0 ? true : false);
        }

        this.radGridView1.DataSource = dataTable;
        this.radGridView1.CurrentRow = null;
    }

    private void radGridView1_RowFormatting(object sender, Telerik.WinControls.UI.RowFormattingEventArgs e)
    {
        if (e.RowElement.RowInfo.Tag == "format")
        {
            e.RowElement.DrawFill = true;
            e.RowElement.GradientStyle = GradientStyles.Solid;
            e.RowElement.BackColor = Color.Aqua;
        }
        else
        {
            e.RowElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
            e.RowElement.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local);
            e.RowElement.ResetValue(LightVisualElement.DrawFillProperty, ValueResetFlags.Local);
        }
    }

    private void radGridView1_CellDoubleClick(object sender, GridViewCellEventArgs e)
    {
        int rowIndex = e.RowIndex;
        var editor = e.ActiveEditor;
        if (editor is GridViewRowHeaderColumn)
        {
            GridViewRowInfo clickedRow = this.radGridView1.Rows[e.RowIndex];
            var rowEl = this.radGridView1.GridViewElement.CurrentRow;
            GridViewRowInfo currentRow = this.radGridView1.CurrentRow;

        }
    }

    GridViewRowInfo oldRowInfo;
    GridViewRowInfo currentRowInfo;
    private void radGridView1_MouseDoubleClick(object sender, MouseEventArgs e)
    {
        var location = e.Location;
        GridCellElement cell = this.radGridView1.ElementTree.GetElementAtPoint(e.Location) as GridCellElement;

        if(cell == null && this.radGridView1.IsInEditMode)
        {

            cell = this.radGridView1.ElementTree.GetElementAtPoint(e.Location).Parent as GridCellElement;
        }

        if (cell != null)
        {
            this.SetFormatTag();
        }
    }

    private void radGridView1_CellEditorInitialized(object sender, GridViewCellEventArgs e)
    {
        RadTextBoxEditor editor = e.ActiveEditor as RadTextBoxEditor;
        if (editor!=null)
        {
            RadTextBoxEditorElement tbElement = editor.EditorElement as RadTextBoxEditorElement;
            tbElement.TextBoxItem.HostedControl.DoubleClick -= EditorElement_DoubleClick;
            tbElement.TextBoxItem.HostedControl.DoubleClick += EditorElement_DoubleClick;

            tbElement.TextBoxItem.HostedControl.Click -= EditorElement_Click;
            tbElement.TextBoxItem.HostedControl.Click += EditorElement_Click;
        }
    }

    private void EditorElement_Click(object sender, EventArgs e)
    {
        this.SetFormatTag();
    }

    private void EditorElement_DoubleClick(object sender, EventArgs e)
    {
        this.SetFormatTag();
    }

    private void SetFormatTag()
    {
        oldRowInfo = currentRowInfo;
        currentRowInfo = this.radGridView1.CurrentRow;
        currentRowInfo.Tag = "format";
        if (oldRowInfo != null)
        {
            oldRowInfo.Tag = null;
        }
    }
}

I am also sending you two .gif files showing you how the grid looks using either approach.

I hope this information is useful. Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Telerik

 

 

[Franklin]

Thank you for your answer sir.

I have a last question, because I need to keep the color when i select the row, i tryied changing the color fo all the cells with a FOR but i think should be a better way to do that.

[Hristo]

Hello Franklin,

Thank you for writing back.

If I understand your last question correctly, you would like to change the color of the previously selected rows when a new row gets selected. Please see my code snippet below:

public partial class Form1 : Form
{
    private List<GridViewRowInfo> selectedRows;

    public Form1()
    {
        InitializeComponent();

        this.selectedRows = new List<GridViewRowInfo>();
        this.Text = "Single click";
        this.radGridView1.MultiSelect = true;

        var dataTable = new DataTable();
        dataTable.Columns.Add("Id", typeof(int));
        dataTable.Columns.Add("Name", typeof(string));
        dataTable.Columns.Add("IsValid", typeof(bool));

        for (int i = 0; i < 100; i++)
        {
            dataTable.Rows.Add(i, "Name " + i, i % 2 == 0 ? true : false);
        }

        this.radGridView1.DataSource = dataTable;
        this.radGridView1.RowFormatting += radGridView1_RowFormatting;
    }

    private void radGridView1_RowFormatting(object sender, RowFormattingEventArgs e)
    {
        if (e.RowElement.IsSelected)
        {
            e.RowElement.DrawFill = true;
            e.RowElement.GradientStyle = GradientStyles.Solid;
            e.RowElement.BackColor = Color.Cyan;
        }
        else
        {
            if (selectedRows.Contains(e.RowElement.RowInfo))
            {
                e.RowElement.DrawFill = true;
                e.RowElement.GradientStyle = GradientStyles.Solid;
                e.RowElement.BackColor = Color.Red;
            }
            else
            {
                e.RowElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
                e.RowElement.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local);
                e.RowElement.ResetValue(LightVisualElement.DrawFillProperty, ValueResetFlags.Local);
            }
        }
    }

    private void radGridView1_CurrentRowChanged(object sender, CurrentRowChangedEventArgs e)
    {
        if (e.CurrentRow != null && selectedRows != null)
        {
            selectedRows.Add(e.CurrentRow);
        }
    }
}

I am also sending you a .gif file showing how the grid looks on my end. If that would not be your case please get back to me with more details of what you are trying to accomplish.

I hope this information helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Telerik