Column width in insert/edit mode

[Cecilie Nordbø]

Hi.
I have grid where i want to set the column width for each column. I used the headerstyle-width and itemstyle-width for a column. Column width is set correct when the record is not in insert or edit mode. But in insert or edit mode, the column width is changing.  I have tried a lot of things, like not have a grid width, set the TableLayout to fixed, different combination of ItemStyle-width and HeaderStyle-width etc. unsuccessfully. So how can i set the column width for insert/edit mode?

the code i am using:

     <telerik:RadGrid ID="RadGrid2" runat="server" DataSourceID="LinqDataSource1" GridLines="None" Width="360px" >
        <MasterTableView AutoGenerateColumns="False" DataKeyNames="EmployeeCompanyNumber" DataSourceID="LinqDataSource1" CommandItemDisplay="Top">
        <CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
        <RowIndicatorColumn><HeaderStyle Width="20px"></HeaderStyle></RowIndicatorColumn>
        <ExpandCollapseColumn><HeaderStyle Width="20px"></HeaderStyle></ExpandCollapseColumn>
        <Columns>                    
            <telerik:GridNumericColumn  ItemStyle-Width="70px" HeaderStyle-Width="80px" FilterControlWidth="90%" DataField="EmployeeCompanyNumber" DataType="System.Int32" HeaderText="Foretaksnr." SortExpression="EmployeeCompanyNumber" UniqueName="EmployeeCompanyNumber">
            </telerik:GridNumericColumn>
            <telerik:GridBoundColumn ItemStyle-Width="190px" HeaderStyle-Width="200px" FilterControlWidth="90%" DataField="Name" HeaderText="Navn" SortExpression="Name" UniqueName="Name" >
            </telerik:GridBoundColumn>
            <telerik:GridEditCommandColumn HeaderStyle-Width="140px" >
            </telerik:GridEditCommandColumn>
            <telerik:GridButtonColumn HeaderStyle-Width="40px" CommandName="Delete">            
            </telerik:GridButtonColumn>                   
        </Columns>
        <EditFormSettings><EditColumn UniqueName="EditCommandColumn1"></EditColumn></EditFormSettings>
        </MasterTableView>
    </telerik:RadGrid>

 



            

[Princy]

Hello Cecilie,

If you want to change the width of column in edit/insert mode, access the control (rendered in edit/insert form) from code behind and set its width accordingly. Check out the sample code below.

C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
   {
      if (e.Item is GridEditFormInsertItem && e.Item.OwnerTableView.IsItemInserted)
       {
           GridEditFormInsertItem insertItem = (GridEditFormInsertItem)e.Item;
           TextBox txtbx = (TextBox)insertItem["Name"].Controls[0];
           txtbx.Width = 190;
       }

     if (e.Item is GridEditFormItem) && (e.Item.IsInEditMode)
       {
             GridEditFormItem editItem = (GridEditFormItem)e.Item;
             TextBox txtbx = (TextBox)editItem["Name"].Controls[0];
             txtbx.Width = 190;
       }
    }

Thanks,
Princy.

[Cecilie Nordbø]

This solution works find for Firefox but not for Internet Explorer when using Unit.Percentage to set the column width like this: txtbx.Width = Unit.Percentage(columnWidth); 

The column field width is not effected and close to the end of the column field, a vertical line is showing, see attach file, the second columns. This problem is only when the field is a string/textbox.

Any idea who i can changed the column width when using IE and unit.Percentage?

[Dimo]

Hello Cecilie,

Percentage textbox widths are not supported in IE when you are using RadFormDecorator with rounded corners enabled.

Also, RadGrid column widths should be set by using HeaderStyle-Width only. Please remove all ItemStyle-Widths.

Kind regards,
Dimo
the Telerik team