[Solved] Default Grid EditForm Control Width

[Dathan]

Is there a way to set the width used by default for the controls auto-generated in a grid's edit form?  They seem to be set to 150px, but I would like them to be larger.

I don't mean the width of the table cell containing the control, but rather the text box or dropdown or whatever control appears.

[John]

Dathan,

I had a similar forum post regarding the edit form but in pop up mode. I do not know if you are using the pop up edit form, but this code was provided to me and it let me set the width of the controls on the auto generated edit form.   I hope it helps.

John

protected void RGrd_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {

        if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
        {
            GridEditFormItem editFormItem = (GridEditFormItem)e.Item;

            foreach (GridColumn col in e.Item.OwnerTableView.RenderColumns)
            {

                if (col.ColumnType == "GridBoundColumn")
                {
                    ((TextBox)editFormItem[col.UniqueName].Controls[0]).Width = Unit.Pixel(575);
                }

                if (col.ColumnType == "GridDropDownColumn")
                {
                    RadComboBox ddl = (RadComboBox)editFormItem[col.UniqueName].Controls[0];
                    ddl.Width = Unit.Pixel(575);
                }

                if (col.ColumnType == "GridDateTimeColumn")
                {
                     RadDatePicker datepicker = (RadDatePicker)editFormItem[col.UniqueName].Controls[0];
                     datepicker.Width = Unit.Pixel(575);
                }

            }

        }

    }

[Shinu]

Hi Dathan,

One another suggestion will be to use Grid column editors to style the controls in edit mode as shown below.

ASPX:

 <telerik:GridBoundColumn DataField="ProductName"   ColumnEditorID="GridTextBoxColumnEditor1"    HeaderText="ProductName" SortExpression="ProductName"
                        UniqueName="ProductName">
                    </telerik:GridBoundColumn>

 <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor1" TextBoxStyle-Width="200px" runat="server">
        </telerik:GridTextBoxColumnEditor>

Thanks
Shinu

[Princy]

[Dathan]

Shinu -- thx, that will work for me.

[Zinoviy]

Hi,

Somehow this solution does not work for me.  The dropdown in Edit Form is always of the same size.
Am I missing anything?  Please, help.  Here is ASPX and .CS:

  <telerik:RadGrid ID="RadGrid1" runat="server"
        SortingSettings-EnableSkinSortStyles = "true" Skin="Office2007" Width="1800px" SortingSettings-SortedBackColor="Bisque"
        PageSize="20" GridLines="None"  AutoGenerateColumns="False"  ShowStatusBar="true"
        AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True"
        EnableLinqExpressions ="false"
        OnItemCommand="RadGrid1_ItemCommand" OnNeedDataSource="RadGrid1_NeedDataSource" OnSortCommand="RadGrid1_SortCommand"
        OnItemDataBound="RadGrid1_ItemDataBound"
        OnUpdateCommand="RadGrid1_UpdateCommand"
        OnInit="RadGrid1_Init" OnPreRender="RadGrid1_PreRender">
        <ClientSettings EnableRowHoverStyle="true" AllowColumnsReorder="true" ReorderColumnsOnClient="true">
            <Selecting AllowRowSelect="True" />
            <ClientEvents OnRowClick="RadGrid1_EnableRowEdit" />
            <Resizing EnableRealTimeResize="True" ResizeGridOnColumnResize="True" AllowColumnResize="True"></Resizing>
        </ClientSettings>
        <PagerStyle Mode="NextPrevAndNumeric" />
        <MasterTableView ClientDataKeyNames="OrderID" DataKeyNames="OrderID"
                         AllowFilteringByColumn="True" AllowCustomSorting="true" TableLayout="Fixed" CommandItemDisplay="Top">
        <Columns>
....................
..................
<telerik:GridDropDownColumn UniqueName="OrderDDLStatus" HeaderText="Order Status"
            HeaderStyle-Width="170px" ItemStyle-Width="200px"
            DataField="OrderStatusID" ListTextField="OrderStatus"
            ListValueField="OrderStatusID" DataSourceID="XmlDataSourceOrderStatus"
            AllowFiltering="True" FilterListOptions="VaryByDataType"
            SortExpression="OrderStatus" DropDownControlType="RadComboBox">

  <FilterTemplate>
    <telerik:RadComboBox ID="ddlOrderStatusFilter" Runat="server" Skin="Office2007"
        DataSourceID="XmlDataSourceOrderStatus"
        DataTextField="OrderStatus" DataValueField="OrderStatusID"
        OnClientSelectedIndexChanged="OrderStatusFilterSelectedIndexChanged"
        SelectedValue='<%# CurrentOrderStatusFilterValue %>'  Width="150px" />

        <telerik:RadScriptBlock ID="RadScriptBlockOrderStatus" runat="server">
            <script type="text/javascript">
                function OrderStatusFilterSelectedIndexChanged(sender, args) {
                    var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                    var selectedValue = sender.get_value();
                    if (selectedValue == "0") {
                        // if empty value selected then user wnats to clear filter
                        tableView.filter("OrderDDLStatus", args.get_item().get_value(), "NoFilter");
                    }
                    else {
                        tableView.filter("OrderDDLStatus", args.get_item().get_value(), "EqualTo");
                    }
                }
            </script>
        </telerik:RadScriptBlock>
    </FilterTemplate>
  </telerik:GridDropDownColumn>
 </Columns>
<EditFormSettings CaptionFormatString="Edit details for OrderID {0}" CaptionDataField="OrderID">
                    <FormTableItemStyle Width="100%" Height="29px"></FormTableItemStyle>
                    <FormTableStyle GridLines="None" CellSpacing="0" CellPadding="2"></FormTableStyle>
                    <FormStyle Width="100%" BackColor="#eef2ea"></FormStyle>
                    <EditColumn ButtonType="ImageButton" />

</EditFormSettings>
</MasterTableView>
</telerik:RadGrid>

  protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
        {
            GridEditFormItem editFormItem = (GridEditFormItem)e.Item;

            foreach (GridColumn col in e.Item.OwnerTableView.RenderColumns)
            {
                if (col.ColumnType == "GridBoundColumn")
                {
                    ((TextBox)editFormItem[col.UniqueName].Controls[0]).Width = Unit.Pixel(575);
                }

                if (col.ColumnType == "GridDropDownColumn")
                {
                    RadComboBox ddl = (RadComboBox)editFormItem[col.UniqueName].Controls[0];
                    ddl.Width = Unit.Pixel(575);
                }

                if (col.ColumnType == "GridDateTimeColumn")
                {
                    RadDatePicker datepicker = (RadDatePicker)editFormItem[col.UniqueName].Controls[0];
                    datepicker.Width = Unit.Pixel(575);
                }

            }

        }
    }

[Shinu]

Hi Zinoviy,

Can you try accessing the ComboBox from the GridDropDownColumn directly in the ItemDataBound event as shown below and see whether width is getting changed.

CS:

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
        {
            RadComboBox ddl = (RadComboBox)editFormItem["OrderDDLStatus"].Controls[0];
            ddl.Width = Unit.Pixel(575);
        }
    }

Thanks
Shinu
 

[Zinoviy Margovskiy]

Nop... No effect... the dropdown still of the same size and values in it are wrapped to the next line.. any other suggestions?  BTW.   I do not know if it matters but this code is in the web user control.  Any ideas?

[Sebastian]

Hello Zinoviy,

Have you considered the approach with declarative style editors to customize the look and feel of the combobox editor? Thus you should be able to define its width as well as other appearance settings.

Best regards,
Sebastian
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.

[Princy]

Hello Zinoviy,

You would have to access the UserControl and then the control as shown below:

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
      if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
        {
            GridEditFormItem editFormItem = (GridEditFormItem)e.Item;
            UserControl user = editFormItem.FindControl(GridEditFormItem.EditFormUserControlID) as UserControl;
             RadComboBox ddl = (RadComboBox)user["OrderDDLStatus"].FindControl("RadComboBoxControlID");
            ddl.Width = Unit.Pixel(575);
        }
    }

Thanks
Princy.