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

Columns width - In-line edit mode

13 Answers 300 Views
Grid
This is a migrated thread and some comments may be shown as answers.
solutionfactory
Top achievements
Rank 1
solutionfactory asked on 17 Jul 2008, 03:28 PM
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

13 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 21 Jul 2008, 04:08 PM
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
0
Accepted
Richard
Top achievements
Rank 1
answered on 21 Jul 2008, 10:29 PM
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.
0
Accepted
Princy
Top achievements
Rank 2
answered on 22 Jul 2008, 05:26 AM
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.
0
solutionfactory
Top achievements
Rank 1
answered on 22 Jul 2008, 08:37 AM
Thanks 2 all,
Flavio
0
newbie
Top achievements
Rank 1
answered on 25 Jul 2008, 12:31 AM
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.
0
Yavor
Telerik team
answered on 25 Jul 2008, 04:50 AM
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.
0
newbie
Top achievements
Rank 1
answered on 25 Jul 2008, 03:32 PM
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.
0
Pavel
Telerik team
answered on 28 Jul 2008, 08:38 AM
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.
0
Princy
Top achievements
Rank 2
answered on 28 Jul 2008, 10:13 AM
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.
0
Richard
Top achievements
Rank 1
answered on 08 Sep 2008, 11:13 PM
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.
0
Yavor
Telerik team
answered on 09 Sep 2008, 05:21 AM
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.
0
Richard
Top achievements
Rank 1
answered on 09 Sep 2008, 04:29 PM
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.
0
Yavor
Telerik team
answered on 12 Sep 2008, 09:54 AM
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.
Tags
Grid
Asked by
solutionfactory
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Richard
Top achievements
Rank 1
Princy
Top achievements
Rank 2
solutionfactory
Top achievements
Rank 1
newbie
Top achievements
Rank 1
Yavor
Telerik team
Pavel
Telerik team
Share this question
or