Columns width - In-line edit mode

[solutionfactory]

Hi all,
when i use automatic in-line edit, the width of edited columns is wrong.

See this screenshot 
http://www.solutionfactory.it/images/Grid_Inline_edit.jpg
or try it in the telerik demos pages.

Why this behaviour?

In the old suite "RadControls for ASP.NET" (not prometheus) edit column size is equal to the display column size.

Thanks in advance,
Flavio

[Dimo]

Hi Flavio,

The observed behavior is caused by the fact that the controls, which appear in the edit row, take up more space than the text in non-edit mode. As a result, the Grid's MasterTableView expands. There are two alternative solutions:

1) Ensure that column widths are initially large enough, so that when the edit row appears, there will be enough space for the edit controls (textboxes, comboboxes, etc).

2) Subscribe to the ItemCreated event of RadGrid and change the widths of the controls in the edit row. (we will implement this in our online example)


Let us know if you need further advice.


Regards,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Richard]

or 3)  Add some ColumnEditor controls to your form and set their widths to a relative value (I use 95%).  Then set the ColumnEditorID of your grid column to point to the correct ColumnEditor control.

Personally, I prefer this approach to setting the sizes in the ItemCreated event.

[Princy]

Hello Flavio,

You can also set the width of the TextBoxes in Edit mode to the width of the column, in the PreRender event as shown below.

cs:

 protected void RadGrid1_PreRender(object sender, EventArgs e)
    {
        foreach (GridColumn col in RadGrid1.MasterTableView.Columns)
        {
            if (col.ColumnType == "GridBoundColumn")
            {
                foreach (GridEditableItem edititem in RadGrid1.MasterTableView.GetItems(GridItemType.EditItem))
                {
                    if (edititem.IsInEditMode)
                    {
                        TextBox txtbx = (TextBox)edititem[col.UniqueName].Controls[0];
                        txtbx.Width = Unit.Pixel(100);
                    }
                }
            }
        }

    }

Thanks
Princy.

[solutionfactory]

Thanks 2 all,
Flavio

[newbie]

I have a grid which I always render in edit mode.

I had a similar problem here with the width of the editable columns.
I liked the approach Richard mentioned.
I added a ColumnEditor control to my form and set its width to some value.  Then I set the ColumnEditorID of the grid column to point to the ColumnEditor control.

But the problem I am facing is the width applies to only the first row.
All my subsequent rows are generated with long text boxes.

Any ideas, please help.

[Yavor]

Hi,

Setting the width(s) of the edit textboxes directly is also an option, and will achieve the same effect. Have you tried the code posted earlier, and is it applicable to your case?

Sincerely yours,
Yavor
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[newbie]

I cannot set the width of the textboxes as I am using a GridNumericColumn.

The approach with the ColumnEditor works but only applies to the first row.

[Pavel]

Hi Anumeha,

You can change the width of the textboxes in a GridNumericColumn by modifying the code posted previously like this:

foreach (GridColumn col in RadGrid1.MasterTableView.Columns)
        {

            if (col.ColumnType == "GridNumericColumn")
            {
                foreach (GridEditableItem edititem in RadGrid1.MasterTableView.GetItems(GridItemType.EditItem))
                {
                    if (edititem.IsInEditMode)
                    {
                        RadNumericTextBox txtbx = (RadNumericTextBox)edititem[col.UniqueName].Controls[0];
                        txtbx.Width = Unit.Pixel(200);
                    }
                }
            }
        }

I hope this helps.

Greetings,
Pavel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Princy]

Hello,

You can also try out the following code snippet if you have set the EditMode property to EditForms .

cs:

 foreach(GridColumn col1 in RadGrid1.MasterTableView.RenderColumns)
                {
                    if (col1.ColumnType == "GridNumericColumn")
                    {
                        foreach(GridEditFormItem item in RadGrid1.MasterTableView.GetItems(GridItemType.EditFormItem) )
                        {
                            if (item.IsInEditMode)
                            {
                                RadNumericTextBox numtxtbx = (RadNumericTextBox)item["Num"].Controls[0];
                                numtxtbx.Width = Unit.Pixel(100);
                            }
                        }
                    }
                }

Thanks
Princy.

[Richard]

I have just updated to the Q2 version and the ColumnEditor approach now appears to be broken.  Setting the widths in the ColumnEditors has no effect so the edit controls extend beyond the column boundaries.  Was this an intentional change?  I will be very disappointed if I have to set all these widths in code on every page.

[Yavor]

Hello Richard,

I tested the setup which you mentioned, and the control behaves as expected. Attached to this message, you will find the code, which I used for testing. Let me know how it goes.

Best wishes,
Yavor
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Richard]

Thank you, but your project demonstrates the way that I do not want to have to do this.  I shouldn't have to write code behind every page with a grid on it just to make sure that the edit controls stay within their column bounds.  It seems strange to me that the default 'expected' behaviour is to create the columns with controls that don't fit.

In any case, I have solved my problem by creating my own column classes that extend the telerik classes as follows:

        public override void PrepareCell(TableCell cell, GridItem item)
        {
            base.PrepareCell(cell, item);

            if (item.IsInEditMode)
            {
                WebControl lControl = (WebControl)cell.Controls[0];
                lControl.Width = cell.Width;
            }
        }

Pretty simple, and in my opinion this should be the default behaviour.

[Yavor]

Hi Richard,

Indeed, you have a point here, and I will pass this to our developers. We will consider altering the default behavior in the control, for one of the upcoming versions of the control.

All the best,
Yavor
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.