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

Width of drop down list in edit mode

8 Answers 326 Views
Grid
This is a migrated thread and some comments may be shown as answers.
mary
Top achievements
Rank 1
mary asked on 15 Aug 2008, 04:11 PM
Hi
How do you set the width of the drop down list displayed for a GridDropDownColumn in add/edit mode?  I want the edit boxes and drop down lists to be the same width without defining edit templates for each column

Thanks

8 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
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.
0
Russ
Top achievements
Rank 1
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> 


0
Shinu
Top achievements
Rank 2
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.
0
Russ
Top achievements
Rank 1
answered on 17 Nov 2008, 10:29 PM
I've tried both of the suggestions above and still can't get it to work.   Do you happen to know of a working example somewhere in the site?   I can't find one that changes the settings on a drop down list (only on text boxes).

Thanks,
Russell.
0
Shinu
Top achievements
Rank 2
answered on 18 Nov 2008, 07:33 AM
Hi Russell,

I was not able to find the DropDownListColumnEditor in your html code provided above. It was working fine when I tried it on my end. Could you please let me know how you have set its width?

Shinu
0
Russ
Top achievements
Rank 1
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.
0
Maria Ilieva
Telerik team
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.
0
Russ
Top achievements
Rank 1
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.
Tags
Grid
Asked by
mary
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Russ
Top achievements
Rank 1
Maria Ilieva
Telerik team
Share this question
or