Custom cell layout issue

[Bao]

Hi ,

I create custom cell in gridview . My code :

 public class RadioButtonCellElement : GridDataCellElement
    {
        private RadRadioButtonElement radioButtonElement1;
        private RadRadioButtonElement radioButtonElement2;
        private RadRadioButtonElement radioButtonElement3;
        private RadTextBoxEditorElement customText;
        public RadioButtonCellElement(GridViewColumn column, GridRowElement row)
        : base(column, row)
        {
        }
        protected override void CreateChildElements()
        {
            base.CreateChildElements();

            radioButtonElement1 = new RadRadioButtonElement();
            radioButtonElement1.Margin = new Padding(0, 2, 0, 0);
            radioButtonElement1.MinSize = new Size(50, 20);
            radioButtonElement1.Text = "0.1";

            radioButtonElement2 = new RadRadioButtonElement();
            radioButtonElement2.Margin = new Padding(0, 2, 0, 0);
            radioButtonElement2.MinSize = new Size(50, 20);
            radioButtonElement2.Text = "0.2";

            radioButtonElement3 = new RadRadioButtonElement();
            radioButtonElement3.Margin = new Padding(0, 2, 0, 0);
            radioButtonElement3.MinSize = new Size(80, 20);
            radioButtonElement3.Text = "Custom";

            customText = new RadTextBoxEditorElement();
            //customText.Enabled = false;
            customText.Size = new Size(10, 20);

            this.Children.Add(radioButtonElement1);
            this.Children.Add(radioButtonElement2);
            this.Children.Add(radioButtonElement3);
            this.Children.Add(customText);

            radioButtonElement1.MouseDown += new MouseEventHandler(radioButtonElement1_MouseDown);
            radioButtonElement2.MouseDown += new MouseEventHandler(radioButtonElement2_MouseDown);
            radioButtonElement3.MouseDown += new MouseEventHandler(radioButtonElement3_MouseDown);
        }

    protected override void DisposeManagedResources()
        {
            radioButtonElement1.MouseDown -= new MouseEventHandler(radioButtonElement1_MouseDown);
            radioButtonElement2.MouseDown -= new MouseEventHandler(radioButtonElement2_MouseDown);
            radioButtonElement3.MouseDown -= new MouseEventHandler(radioButtonElement3_MouseDown);
            base.DisposeManagedResources();
        }

        protected override SizeF ArrangeOverride(SizeF finalSize)
        {
            if (this.Children.Count == 4)
            {
                this.Children[0].Arrange(new RectangleF(0, 0, 50, 20));
                this.Children[1].Arrange(new RectangleF(55, 0, 50, 20));
                this.Children[2].Arrange(new RectangleF(110, 0, 20, 20));
                this.Children[3].Arrange(new RectangleF(180, 0, 50, finalSize.Height));
                this.Children[3].Alignment = ContentAlignment.MiddleCenter;
            }

            return finalSize;
        }

      public override void Initialize(GridViewColumn column, GridRowElement row)
        {
            base.Initialize(column, row);

            ((RadioPrimitive)radioButtonElement1.Children[1].Children[1].Children[0]).BackColor2 = Color.Red;
            ((RadioPrimitive)radioButtonElement2.Children[1].Children[1].Children[0]).BackColor2 = Color.Blue;
            ((RadioPrimitive)radioButtonElement3.Children[1].Children[1].Children[0]).BackColor2 = Color.Green;
        }

}

 

 // Add Labor Time column
       RadioButtonColumn column = new RadioButtonColumn("LaborTime");
       column.HeaderText = "Labor Time";
       column.Width = 400;
       this.gvLaborGuide.Columns.Add(column);

It it working, but when i scroll , it has problem.

Please look at the link:

https://www.screencast.com/t/mVJdsfrk

 

[Dess | Tech Support Engineer, Principal]

Hello Bao, 

Thank you for writing.  

The illustrated behavior is normal. Note that RadTextBoxElement hosts the MS TextBox. Using controls in grid cells may slow down the scrolling and will cause visual glitches as they do not support clipping.

A better option would be using custom editors. Thus, you can construct the desired editor and activate it for the respective cell. A sample approach is demonstrated in the following help article: http://docs.telerik.com/devtools/winforms/gridview/editors/using-custom-editors

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

Regards,
Dess
Progress Telerik

[Bao]

So, it means i should not use RadTextBoxElement. Because i want to use radio button with textbox. So can you give me any example ?

[Bao]

I am creating 1 custom cell , in custom cell i add 3 radio buttons and textbox . Radio buttons are working well, but textbox it has problem when scrolling.

[Dess | Tech Support Engineer, Principal]

Hello Bao, 

Thank you for writing back. 

As it was already explained in my previous post, RadTextBoxElement hosts the MS TextBox which is a control, not an element. Using controls in grid cells may slow down the scrolling and will cause visual glitches while scrolling as they do not support clipping. This is the obtained behavior.

A better option would be using custom editors. Thus, you can construct the desired editor and activate it for the respective cell. A sample approach is demonstrated in the following help article: http://docs.telerik.com/devtools/winforms/gridview/editors/using-custom-editors

If you still need to use the custom cell, you can use a RadTextBoxControlElement instead of RadTextBoxEditorElement. Here is a sample code snippet which result is illustrated in the attached gif file: 

public RadForm1()
{
    InitializeComponent();

    this.radGridView1.CreateCell += radGridView1_CreateCell;
    this.radGridView1.CellBeginEdit += RadGridView1_CellBeginEdit;

    for (int i = 0; i < 10; i++)
    {
        this.radGridView1.Columns.Add("Col" + i);
    }
    for (int i = 0; i < 20; i++)
    {
        this.radGridView1.Rows.Add(i);
    }

    this.radGridView1.Columns["Col5"].Width = 300;
}

private void RadGridView1_CellBeginEdit(object sender, GridViewCellCancelEventArgs e)
{
    if (e.Column.Name=="Col5")
    {
        e.Cancel = true;
    }
}

private void radGridView1_CreateCell(object sender, GridViewCreateCellEventArgs e)
{
    if (e.Column.Name=="Col5" && e.Row.RowInfo is GridViewDataRowInfo)
    {
        e.CellElement = new RadioButtonCellElement(e.Column, e.Row);
    }
}

public class RadioButtonCellElement : GridDataCellElement
{
    private RadRadioButtonElement radioButtonElement1;
    private RadRadioButtonElement radioButtonElement2;
    private RadRadioButtonElement radioButtonElement3;
    private RadTextBoxControlElement customText;

    public RadioButtonCellElement(GridViewColumn column, GridRowElement row) : base(column, row)
    {
    }

    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(GridDataCellElement);
        }
    }
    protected override void CreateChildElements()
    {
        base.CreateChildElements();
        StackLayoutElement stack = new StackLayoutElement();
        stack.Orientation = Orientation.Horizontal;
        stack.StretchHorizontally = true;
        radioButtonElement1 = new RadRadioButtonElement();
        radioButtonElement1.StretchHorizontally = false;
        radioButtonElement1.Margin = new Padding(0, 2, 0, 0);
        radioButtonElement1.MinSize = new Size(50, 20);
        radioButtonElement1.Text = "0.1";

        radioButtonElement2 = new RadRadioButtonElement();
        radioButtonElement2.Margin = new Padding(0, 2, 0, 0);
        radioButtonElement2.StretchHorizontally = false;
        radioButtonElement2.MinSize = new Size(50, 20);
        radioButtonElement2.Text = "0.2";

        radioButtonElement3 = new RadRadioButtonElement();
        radioButtonElement3.Margin = new Padding(0, 2, 0, 0);
        radioButtonElement3.StretchHorizontally = false;
        radioButtonElement3.MinSize = new Size(80, 20);
        radioButtonElement3.Text = "Custom";

        customText = new RadTextBoxControlElement();
        customText.StretchHorizontally = true;

        stack.Children.Add(radioButtonElement1);
        stack.Children.Add(radioButtonElement2);
        stack.Children.Add(radioButtonElement3);
        stack.Children.Add(customText);
        this.Children.Add(stack);
    }

    protected override void DisposeManagedResources()
    {
        base.DisposeManagedResources();
    }


    public override void Initialize(GridViewColumn column, GridRowElement row)
    {
        base.Initialize(column, row);

        ((RadioPrimitive)radioButtonElement1.Children[1].Children[1].Children[0]).BackColor2 = Color.Red;
        ((RadioPrimitive)radioButtonElement2.Children[1].Children[1].Children[0]).BackColor2 = Color.Blue;
        ((RadioPrimitive)radioButtonElement3.Children[1].Children[1].Children[0]).BackColor2 = Color.Green;
    }
}

It is necessary to synchronize the cell's content by using the SetContentCore method. Additional information is available in the following help article: http://docs.telerik.com/devtools/winforms/gridview/cells/creating-custom-cells

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

Regards,
Dess
Progress Telerik