Controls are Moving Between Rows

[Jeremy Murtishaw]

Hello,

I'm having trouble with some controls I've added to gridview cells. I've followed the procedure in your documentation to add the controls via the CellFormatting Event. I have added a RadCheckBox to one column and a RadButton to another. Everything works fine at first, but if there's enough rows for scrolling to occur, the controls will actually migrate from one row to another when scrolling is performed. In fact, if you scroll down via the scroll bar, the controls stay in their correct row, but if you scroll up, the controls seem to stay put while the rows rotate around them. 

Please help!

Thanks!

Jeremy

[Nick]

Hi Jeremy Murtishaw,

I think that you headed in the wrong direction. Please follow this help topic about creating a custom editor. Perhaps you saw the use of CellFormatting somewhere in our forums, can you send us a link to the location?

Please read the entire section about RadGridView editors if you haven't already done so, and then send us the code that you use and even better a sample application so that we can offer you the best solution in your scenario. Thank you very much in advance.

All the best,
Nick
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jeremy Murtishaw]

Hi Nick,

I don't see what custom editors have to do with this issue. I am adding custom elements to cells, a radcheckbox and a radbutton, as per this documentation:

http://www.telerik.com/help/winforms/grid_adding-custom-elements-to-cells.html

It asks to add these elements in the cell-formatting event, which works fine, except for when scrolling, the elements literally move from one row to another in some cases. I need my elements to remain in the rows in which they were originally added.

Here's the code I am using to add the controls:

private void grdSystem_CellFormatting(object sender, CellFormattingEventArgs e)
        {
            if (e.CellElement != null && e.CellElement.ColumnInfo is GridViewDataColumn && !(e.CellElement.RowElement is GridTableHeaderRowElement))
            {
                GridViewRowInfo oRow = (GridViewRowInfo)e.CellElement.RowInfo;
                int iKey = e.CellElement.RowIndex;
                GridViewDataColumn column = (GridViewDataColumn)e.CellElement.ColumnInfo;
                if (column.FieldName == "Enabled")
                {
                    e.CellElement.Text = "";
                    if (e.CellElement.Children.Count > 0)
                    {
                        return;
                    }

                    RadCheckBoxElement chkEnabled = new RadCheckBoxElement();
                    chkEnabled.StretchHorizontally = false;
                    chkEnabled.StretchVertically = false;
                    ((Telerik.WinControls.Primitives.FillPrimitive)(chkEnabled.Children[0])).BackColor = Color.FromArgb(255, 255, 255);
                    ((Telerik.WinControls.Primitives.FillPrimitive)(chkEnabled.Children[0])).GradientStyle = Telerik.WinControls.GradientStyles.Solid;
                    ((Telerik.WinControls.Primitives.FillPrimitive)(chkEnabled.Children[0])).NumberOfColors = 1;
                    chkEnabled.BackColor = Color.White;
                    chkEnabled.Name = "chkEnabled_" + iKey;
                    chkEnabled.IsChecked = false;
                    if (oRow.Cells[Enabled].Value.ToString() == "1")
                    {
                        chkEnabled.IsChecked = true;
                    }
                    oRow.Cells[Enabled].CellElement.Children.Add(chkEnabled);
                    oRow.Cells[Enabled].CellElement.Children[0].Alignment = ContentAlignment.MiddleCenter;
                    e.CellElement.Text = "";
                }
                else if (column.FieldName == "Console Color")
                {
                    e.CellElement.Text = "";
                    if (e.CellElement.Children.Count > 0)
                    {
                        return;
                    }
                    RadButtonElement cmdColor = new RadButtonElement();
                    cmdColor.Name = "cmdColor_" + iKey;
                    Sands.ApplyThemeToElement(cmdColor, "NormalButtons"); //Doesn't work...
                    cmdColor.Click += new EventHandler(cmdColor_Click);
                    cmdColor.Text = "Select Color";
                    cmdColor.Size = new Size(100, 22);
                    cmdColor.Alignment = ContentAlignment.MiddleCenter;
                    cmdColor.Margin = new Padding(20, 2, 20, 2);
                    ((Telerik.WinControls.Primitives.BorderPrimitive)(cmdColor.Children[2])).BoxStyle = Telerik.WinControls.BorderBoxStyle.FourBorders;
                    ((Telerik.WinControls.Primitives.BorderPrimitive)(cmdColor.Children[2])).Width = 2;
                    ((Telerik.WinControls.Primitives.BorderPrimitive)(cmdColor.Children[2])).BottomWidth = 2;
                    try
                    {
                        int iColor = int.Parse(oRow.Cells[ColorCell].Value.ToString());
                        ((Telerik.WinControls.Primitives.FillPrimitive)(cmdColor.Children[0])).BackColor = Color.FromArgb(iColor);
                    }
                    catch
                    {
                        ((Telerik.WinControls.Primitives.FillPrimitive)(cmdColor.Children[0])).BackColor = Color.FromArgb(255, 255, 255);
                    }

                    ((Telerik.WinControls.Primitives.FillPrimitive)(cmdColor.Children[0])).NumberOfColors = 1;
                    ((Telerik.WinControls.Primitives.FillPrimitive)(cmdColor.Children[0])).GradientStyle = Telerik.WinControls.GradientStyles.Solid;
                    oRow.Cells[ColorCell].CellElement.Children.Add(cmdColor);
                    oRow.Cells[ColorCell].CellElement.Children[0].Alignment = ContentAlignment.MiddleCenter;
                    e.CellElement.Text = "";
                }
                else if (column.FieldName == "Masterfiles")
                {
                    e.CellElement.TextAlignment = ContentAlignment.MiddleLeft;
                    if (e.CellElement.Children.Count > 0 || e.CellElement.Text.Contains("N/A"))
                        return;
                    RadButtonElement cmdMasterfiles = new RadButtonElement();
                    cmdMasterfiles.Name = "cmdMasterfiles_" + iKey;
                    Sands.ApplyThemeToElement(cmdMasterfiles, "NormalButtons"); //Doesn't work...
                    cmdMasterfiles.Click += new EventHandler(cmdMasterfiles_Click);
                    cmdMasterfiles.Text = "Choose";
                    cmdMasterfiles.Tag = SystemEvents.Masterfile[iKey] + "|" + e.CellElement.Text;
                    cmdMasterfiles.Size = new Size(80, 22);
                    cmdMasterfiles.Alignment = ContentAlignment.MiddleRight;
                    cmdMasterfiles.Margin = new Padding(70, 2, 2, 2);

                    oRow.Cells[Masterfiles].CellElement.Children.Add(cmdMasterfiles);
                    oRow.Cells[Masterfiles].CellElement.Children[0].Alignment = ContentAlignment.MiddleRight;
                }
            }
        }

Jeremy

[Nick]

Hi Jeremy Murtishaw,

RadGridView uses virtualization and hence rows and cells are reused. The help topic is superseded by those ones that I gave you in my previous blog post about the custom editors. The topic is not really wrong, but special attention has to be paid on scrolling.

An editor is something that you can place in a cell. Please note that all cells in the same column should share the same editor type.

Please send us an image of what you want to achieve (you can use some image editing program) and we will help you to write the custom editor that you need. Please elaborate on what is your data base column type and what the element in the cell should do? Thank you very much for your time. 

Regards,
Nick
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jeremy Murtishaw]

Hi Nick,

I'm not really sure if a custom editor is going to be able to help me. I want to add a button to a column conditionally on the value stored in the column. Basically, I want to add a button if the value exists and not add a button if the value is blank. This works really well in the CellFormatting event since I have the value at my disposal. In addition, I am not aiming to allow my users to 'Edit' the values of the gridview cells, per se, but only launch other activities from these button controls, which is why I'm not sure if the editors are ideal. Is there any way to avoid the virtualization problem and prevent the controls from scrolling? It's hard to believe that this has gone unnoticed for so long, considering the custom editors are a relatively new addition to Telerik. If it's unavoidable, can you show me how to create a simple gridview with a column containing buttons conditionally as described above? Can I add other controls like a checkbox? How about two buttons in one cell? Can the buttons share the cell with text?

Jeremy Murtishaw

[Jeremy Murtishaw]

Hello again,

I have found a temporary workaround that prevents the control scrolling problem. Instead of returning out of the cellformatting event when the number of controls is greater than zero, you can clear the controls and recreate them every time. This is a bit painful, and causes somewhat poor performance, but it's much better. I'm still interested in any other solutions that you guys can offer.

In addition, I've got one more question to add. In my code above you can see that I attempt to assign a theme to the elements via a function called Sands.ApplyThemeToElement. This is the same function that is described in the 'Adding Custom Elements to Cells' documentation linked above, but it is not working for me. I've got themes that are included as embedded resources, and they are associated with the form via the RadThemeManager, however, the function does not seem to recognize them by name. Can you help me apply the theme on the fly via this function or through another method?

Thanks!

Jeremy

[Julian Benkov]

Hi Jeremy Murtishaw,

1) For your scenario you can create elements for the first pass only. The condition can be used to change the visibility of your cell elements. I made a small sample with good performance by using CellFormatting event:

void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
{
    GridViewRowInfo oRow = (GridViewRowInfo)e.CellElement.RowInfo;
    int iKey = e.CellElement.RowIndex;

    GridViewDataColumn column = (GridViewDataColumn)e.CellElement.ColumnInfo;

    if (column.FieldName == "SummaryColumn")
    {
        Telerik.WinControls.ElementVisibility visibility = Telerik.WinControls.ElementVisibility.Hidden;
        if (this.radGridView1.Rows[e.CellElement.RowIndex].Cells["Country"].Value.ToString() == "Mexico")
        {
            visibility = Telerik.WinControls.ElementVisibility.Visible;
        }

        if (e.CellElement.Children.Count > 0)
        {
            oRow.Cells["SummaryColumn"].CellElement.Children[0].Visibility = visibility;
            return;
        }

        RadButtonElement actionButton = new RadButtonElement();
        actionButton.Name = "Action" + iKey;
        actionButton.Click += new EventHandler(actionButton_Click);
        actionButton.Text = "Select Color";
        actionButton.Size = new Size(100, 22);
        actionButton.Alignment = ContentAlignment.MiddleCenter;
        actionButton.Margin = new Padding(20, 2, 20, 2);

        ((Telerik.WinControls.Primitives.BorderPrimitive)(actionButton.Children[2])).BoxStyle = Telerik.WinControls.BorderBoxStyle.FourBorders;
        ((Telerik.WinControls.Primitives.BorderPrimitive)(actionButton.Children[2])).Width = 2;
        ((Telerik.WinControls.Primitives.BorderPrimitive)(actionButton.Children[2])).BottomWidth = 2;
        ((Telerik.WinControls.Primitives.FillPrimitive)(actionButton.Children[0])).NumberOfColors = 1;
        ((Telerik.WinControls.Primitives.FillPrimitive)(actionButton.Children[0])).GradientStyle = Telerik.WinControls.GradientStyles.Solid;

        oRow.Cells["SummaryColumn"].CellElement.Children.Add(actionButton);
        oRow.Cells["SummaryColumn"].CellElement.Children[0].Visibility = visibility;
        oRow.Cells["SummaryColumn"].CellElement.Children[0].Alignment = ContentAlignment.MiddleCenter;
        e.CellElement.Text = "";
    }
}

2) May be theming problem will disappear when the cell element is reused.

 
Regards,
Julian Benkov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.