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

Width of drop down list in edit mode

8 Answers 418 Views

Grid

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

8 Answers, 1 is accepted

answered on 18 Aug 2008, 05:02 AM

Hi Mary,

You can try the following code snippet to set the desired width to the combobox for a GridDropDownColumn in edit mode.

CS:

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

Thanks
Shinu.

answered on 14 Nov 2008, 06:31 PM

I have a similar problem to this, and this isnt working for me. I would like to be able to set the width of my GridDropDownColumn items in edit mode, but nothing seems to work for me. I've tried using the GridDropDownListColumnEditor and I've tried the code you posted above, but the column stys at the default width and doesn't adjust. I've created a simplified version of my grid for testing (still not working), here is the aspx code, followed by the code behind and the two XML files I used as sample data. Any idea what I'm doing wrong?

Thanks,
Russell.

RadGridEditingTest.aspx

    
            <%@ Page language="C#"  AutoEventWireup="true" CodeBehind="RadGridEditingTest.aspx.cs" Inherits="Test_Project.RadGridEditingTest"  %> 
        
            <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head id="Head1" runat="server">  
        
                <title>Test Page</title> 
        
            </head><body><form id="form1" runat="server"><div> 
        
            <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">  
        
            </telerik:RadScriptManager> 
        
            <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False"   
        
                    AutoGenerateEditColumn="True" DataSourceID="XmlDataSource1" GridLines="None"   
        
                    Width="239px" onitemdatabound="RadGrid1_ItemDataBound" > 
        
            <MasterTableView AllowSorting="True" DataSourceID="XmlDataSource1" EditMode="InPlace">  
        
            <RowIndicatorColumn> 
        
            <HeaderStyle Width="20px"></HeaderStyle> 
        
            </RowIndicatorColumn> 
        
            <ExpandCollapseColumn> 
        
            <HeaderStyle Width="20px"></HeaderStyle> 
        
            </ExpandCollapseColumn> 
        
                <Columns> 
        
                    <telerik:GridBoundColumn DataField="testkey" EmptyDataText="&amp;nbsp;"   
        
                        HeaderText="key" ReadOnly="True" SortExpression="testkey" UniqueName="testkey">  
        
                        <ItemStyle Width="50px" /> 
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridBoundColumn ColumnEditorID="GridTextBoxColumnEditor1"   
        
                        DataField="testdrop" EmptyDataText="&amp;nbsp;" HeaderText="dd field(a)"   
        
                        UniqueName="column">  
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridDropDownColumn ColumnEditorID="GridDropDownListColumnEditor1"   
        
                        DataField="testdrop" DataSourceID="XmlDataSource2" HeaderText="dd field (b)"   
        
                        ListTextField="text" ListValueField="value" UniqueName="column1">  
        
                    </telerik:GridDropDownColumn> 
        
                    <telerik:GridBoundColumn ColumnEditorID="GridTextBoxColumnEditor1"   
        
                        DataField="teststring" EmptyDataText="&amp;nbsp;" HeaderText="junk"   
        
                        SortExpression="teststring" UniqueName="teststring">  
        
                        <ItemStyle Width="200px" /> 
        
                    </telerik:GridBoundColumn> 
        
                </Columns> 
        
            </MasterTableView> 
        
            <FilterMenu EnableTheming="True">  
        
            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
        
            </FilterMenu> 
        
            </telerik:RadGrid> 
        
            <asp:XmlDataSource ID="XmlDataSource1" runat="server"   
        
                    DataFile="~/RadDataTest.xml"></asp:XmlDataSource> 
        
            <asp:XmlDataSource ID="XmlDataSource2" runat="server"   
        
                    DataFile="~/PeriodTypes.xml"></asp:XmlDataSource> 
        
            </div> 
        
            <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor1" runat="server">  
        
                <TextBoxStyle BackColor="#CCFFFF" Width="75px" /> 
        
            </telerik:GridTextBoxColumnEditor> 
        
            </form></body></html>

RadGridEditingTest.aspx.cs

    
            using System;  
        
            using System.Collections;  
        
            using System.Configuration;  
        
            using System.Data;  
        
            using System.Linq;  
        
            using System.Web;  
        
            using System.Web.Security;  
        
            using System.Web.UI;  
        
            using System.Web.UI.HtmlControls;  
        
            using System.Web.UI.WebControls;  
        
            using System.Web.UI.WebControls.WebParts;  
        
            using System.Xml.Linq;  
        
            using Telerik.Web.UI;  
        
            namespace Test_Project   
        
            {  
        
                public partial class RadGridEditingTest : System.Web.UI.Page  
        
                {  
        
                    protected void Page_Load(object sender, EventArgs e)  
        
                    {  
        
                    }  
        
                    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)  
        
                    {  
        
                        if ((e.Item is GridEditFormItem) && (e.Item.IsInEditMode))  
        
                        {  
        
                            GridEditFormItem edititem = (GridEditFormItem)e.Item;  
        
                            RadComboBox combobox = (RadComboBox)edititem["column1"].Controls[0];  
        
                            combobox.Width = Unit.Pixel(50);  
        
                        }    
        
                    }  
        
                }  
        
            }

RadDataTest.xml

    
            <?xml version="1.0" encoding="utf-8" ?> 
        
            <RadTest> 
        
                <item testkey="1" testdrop="DAILY" teststring="ABC" /> 
        
                <item testkey="2" testdrop="WEEKLY" teststring="CDE" /> 
        
                <item testkey="3" testdrop="BI-WEEKLY" teststring="DEF" /> 
        
                <item testkey="4" testdrop="DAILY" teststring="EFG" /> 
        
                <item testkey="5" testdrop="MONTHLY" teststring="FGH" /> 
        
                <item testkey="6" testdrop="MONTHLY" teststring="GHI" /> 
        
                <item testkey="7" testdrop="DAILY" teststring="HIJ" /> 
        
            </RadTest>

PeriodTypes.xml

    
            <?xml version="1.0" encoding="utf-8" ?> 
        
            <PeriodType> 
        
              <option value="DAILY" text="DAILY" /> 
        
              <option value="WEEKLY" text="WEEKLY" /> 
        
              <option value="BI-WEEKLY" text="BI-WEEKLY" /> 
        
              <option value="MONTHLY" text="MONTHLY" /> 
        
            </PeriodType>

answered on 17 Nov 2008, 05:33 AM

Hi Russel,

If you are using a DropDownlistColumnEditor you can set the DropDownStyle width either in code behind or in the aspx as shown below.

ASPX:

    
            <telerik:GridDropDownColumn UniqueName="ddlContactName"  headerText="ddlContactName" ColumnEditorID="GridDropDownListColumnEditor1" ></telerik:GridDropDownColumn>

// to set the width in aspx

    
            <telerik:GridDropDownListColumnEditor    ID="GridDropDownListColumnEditor1" runat="server"> 
        
                    <DropDownStyle  Width="100px" /> 
        
                    </telerik:GridDropDownListColumnEditor>

// to set the width in code behind.

    
             GridDropDownListColumnEditor1.DropDownStyle.Width=Unit.Pixel(100);

Shinu.

answered on 18 Nov 2008, 12:48 PM

Oh, I'm sorry, I've gone back and forth trying so many different things I seem to have posted a test version where I had removed it. Here is the example aspx containing the editor for the dropdown:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadGridEditTest._Default" %> 
        
            <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server">  
        
                <title>Testing</title>     
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <div> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">  
        
                    </telerik:RadScriptManager> 
        
                </div> 
        
                <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False"   
        
                    DataSourceID="XmlDataSource1" GridLines="None" Width="388px"   
        
                    AutoGenerateEditColumn="True">  
        
                    <MasterTableView DataSourceID="XmlDataSource1" EditMode="InPlace">  
        
                    <RowIndicatorColumn> 
        
                    <HeaderStyle Width="20px"></HeaderStyle> 
        
                    </RowIndicatorColumn> 
        
                    <ExpandCollapseColumn> 
        
                    <HeaderStyle Width="20px"></HeaderStyle> 
        
                    </ExpandCollapseColumn> 
        
                        <Columns> 
        
                            <telerik:GridBoundColumn DataField="testkey" EmptyDataText="&amp;nbsp;"   
        
                                HeaderText="testkey" SortExpression="testkey" UniqueName="testkey"   
        
                                ColumnEditorID="textboxEditorWorks">  
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridDropDownColumn DataField="testdrop" DataSourceID="XmlDataSource2"   
        
                                ListTextField="text" ListValueField="value"  UniqueName="ddcolumn"   
        
                                ColumnEditorID="dropdownEditorDoesntWork" HeaderText="dd test">  
        
                            </telerik:GridDropDownColumn> 
        
                            <telerik:GridBoundColumn DataField="teststring" EmptyDataText="&amp;nbsp;"   
        
                                HeaderText="teststring" SortExpression="teststring"   
        
                                UniqueName="teststring" ColumnEditorID="textboxEditorWorks">  
        
                            </telerik:GridBoundColumn> 
        
                        </Columns> 
        
                    </MasterTableView> 
        
                    <FilterMenu EnableTheming="True">  
        
                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
        
                    </FilterMenu> 
        
                </telerik:RadGrid> 
        
                <telerik:GridTextBoxColumnEditor ID="textboxEditorWorks" runat="server">  
        
                    <TextBoxStyle BackColor="#CCFFCC" Width="75px" /> 
        
                </telerik:GridTextBoxColumnEditor> 
        
                <br /> 
        
                <telerik:GridDropDownListColumnEditor ID="dropdownEditorDoesntWork"   
        
                    runat="server" DataTextField="" DataValueField="">  
        
                    <DropDownStyle BackColor="#99CCFF" Width="75px" /> 
        
                </telerik:GridDropDownListColumnEditor> 
        
                <asp:XmlDataSource ID="XmlDataSource1" runat="server"   
        
                    DataFile="~/RadDataTest.xml"></asp:XmlDataSource> 
        
                <asp:XmlDataSource ID="XmlDataSource2" runat="server"   
        
                    DataFile="~/PeriodTypes.xml"></asp:XmlDataSource> 
        
                </form> 
        
            </body> 
        
            </html>

Thanks,
Russell.

answered on 19 Nov 2008, 12:03 PM

Hi Russell Hull,

Have you tried using the code behind approach:

    
             protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)  
        
                {  
        
                    if ((e.Item is GridEditableItem) && (e.Item.IsInEditMode))  
        
                    {  
        
                        GridEditableItem edititem=(GridEditableItem)e.Item;  
        
                        DropDownList ddl = (DropDownList)edititem["Name"].Controls[0];  
        
                        ddl.Width = Unit.Pixel(300);  
        
                    }  
        
               }

Additionally, to customize the appearance of the grid editors, consider using declarative style editors.

Best wishes,
Maria Ilieva
the Telerik team

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

answered on 19 Nov 2008, 03:14 PM

I thought the declarative style editors were what I was using in the last code piece (that I pasted in above)? Maybe I'm just doing something completely wrong with those, I'm not sure.

I had tried doing it in the code behind, previously, with code similar to what you had pasted and was unable to work. Just to check again, I updated my test project with your code (changing the column name to the one I'm testing with) and it came back with a run time error message. The last time, I didn't really understand what the message was saying, but this time, with your code, I did understand the message and have figured out how to make the code behind work. The message I received with the code I've used before was:

    
            System.InvalidCastException: Unable to cast object of type 'Telerik.Web.UI.RadComboBox' to type 'System.Web.UI.WebControls.DropDownList'

Which made me finally realize that the auto-generated GridDropDownColumns are using a RadComboBox and not a "DropDownList". So I adjusted the code a little to use the RadComboBox:

    
                        if ((e.Item is GridEditableItem) && (e.Item.IsInEditMode))     
        
                        {     
        
                            GridEditableItem edititem=(GridEditableItem)e.Item;  
        
                            //  this is the old code, which used a DropDownList and gave me a runtime error  
        
                            //  DropDownList ddl = (DropDownList)edititem["ddcolumn"].Controls[0];  
        
                            // RadComboBox is the correct control type   
        
                            RadComboBox ddl = (RadComboBox)edititem["ddcolumn"].Controls[0];  
        
                            // no this (and any other display settings I want) work perfectly  :)  
        
                            ddl.Width = Unit.Pixel(50);     
        
                        }

Now it works just like I wanted, and life is good again :)

On a side note: I had also found that I could work around it in the GUI by changing the specified columns in the RadGrid to Template columns and placing the specific controls in the template, at which point the editors do work for me. I was just hoping to avoid having to go into Template columns, and was hoping that these editors would/should work on a regular GridDropDown column also.

Thanks, to both of you, for the help,
Russell.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Width of drop down list in edit mode

8 Answers, 1 is accepted