Columns width - In-line edit mode

14 posts, 3 answers
  1. solutionfactory
    solutionfactory avatar
    45 posts
    Member since:
    Apr 2007

    Posted 17 Jul 2008 Link to this post

    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
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 21 Jul 2008 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Richard
    Richard avatar
    60 posts
    Member since:
    Feb 2008

    Posted 21 Jul 2008 Link to this post

    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.
  5. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 22 Jul 2008 Link to this post

    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.
  6. solutionfactory
    solutionfactory avatar
    45 posts
    Member since:
    Apr 2007

    Posted 22 Jul 2008 Link to this post

    Thanks 2 all,
    Flavio
  7. newbie
    newbie avatar
    355 posts
    Member since:
    Feb 2008

    Posted 24 Jul 2008 Link to this post

    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.
  8. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 24 Jul 2008 Link to this post

    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.
  9. newbie
    newbie avatar
    355 posts
    Member since:
    Feb 2008

    Posted 25 Jul 2008 Link to this post

    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.
  10. Pavel
    Admin
    Pavel avatar
    904 posts

    Posted 28 Jul 2008 Link to this post

    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.
  11. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 28 Jul 2008 Link to this post

    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.
  12. Richard
    Richard avatar
    60 posts
    Member since:
    Feb 2008

    Posted 08 Sep 2008 Link to this post

    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.
  13. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 09 Sep 2008 Link to this post

    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.
  14. Richard
    Richard avatar
    60 posts
    Member since:
    Feb 2008

    Posted 09 Sep 2008 Link to this post

    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.
  15. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 12 Sep 2008 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017