Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Dropdown list rendering incorrectly within RadGridView

7 Answers 77 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ida
Top achievements
Rank 1
Ida asked on 17 Oct 2013, 02:35 PM
screenshot.jpg
Hi,

Within my RadGridView, in Edit mode, the dropdown lists appear to not display correctly. When I click on a dropdown list to display the options, the options list appears in another part of the screen.

I have attached a screenshot to show what happens, in Edit mode, within the grid. The dropdown for Selectivty Device, lists the options at the top of the grid, away from the actual dropdown.

Is this a browser issue or a CSS issue please?

Thank you, Ida

7 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 18 Oct 2013, 08:36 AM
Hi Ida,

I cannot reproduce the issue.I suppose you may have some global CSS and which affects the controls appearance.Please try the same in an independent page and see if the issue exists.
Here is a sample code snippet that i tried.Please have a look and if it doesn't help,provide your code.

ASPX:
<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSource1"
    AllowPaging="true" AutoGenerateEditColumn="true">
    <MasterTableView>
        <Columns>
            <telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID">
            </telerik:GridBoundColumn>
            <telerik:GridDropDownColumn DataSourceID="SqlDataSource2" ListTextField="ShipCity"
                ListValueField="ShipCity" UniqueName="GridDropDownColumn" HeaderText="ShipCity"
                DropDownControlType="DropDownList" DataField="ShipCity">
            </telerik:GridDropDownColumn>
            <telerik:GridBoundColumn DataField="ShipAddress" HeaderText="ShipAddress" UniqueName="ShipAddress" />
            <telerik:GridTemplateColumn HeaderText="ShipCountry">
                <ItemTemplate>
                    <%# Eval("ShipCountry")%>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1"
                        DataTextField="ShipCountry" DataValueField="ShipCountry" AutoPostBack="true">
                    </asp:DropDownList>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

Thanks,
Princy
0
Ida
Top achievements
Rank 1
answered on 21 Oct 2013, 03:33 PM
Hi,

The problem still happens even when I strip out all the styling.

The dropdown options list displays at another part of the screen, to the selected value.

Any advice?

Thanks, Ida
0
Princy
Top achievements
Rank 2
answered on 22 Oct 2013, 07:05 AM
Hi Ida,

I couldnot replicate the issue,can you share your full code so as to identify the issue.

Thanks,
Princy
0
Ida
Top achievements
Rank 1
answered on 22 Oct 2013, 08:11 AM

<%

 

@ Page Language="vb" AutoEventWireup="false" Inherits="Discards.ListHauls" CodeFile="listEditHauls.aspx.vb" %>

 

<%

 

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

 

 

 

<!

 

 

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

 

<

 

 

html>

 

 

 

 

 

 

 

<head>

 

 

 

 

 

 

 

<title>Discards Data Management System: List/Edit Haul Details</title>

 

 

 

 

 

 

 

<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" />

 

 

 

 

 

 

 

<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE" />

 

 

 

 

 

 

 

<meta content="JavaScript" name="vs_defaultClientScript" />

 

 

 

 

 

 

 

<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema" />

 

 

 

 

 

 

 

<link href="../Styles.css" type="text/css" rel="stylesheet" />

 

 

 

 

 

 

 

</head>

 

 

 

 

 

 

 

<body>

 

 

 

 

 

 

 

<div id="Content">

 

 

 

 

 

 

 

<h1>List/Edit Haul Details</h1>

 

 

 

 

 

 

 

<h3>If you wish to list hauls data for a particular trip, please select the Observer Name, Trip Code and Year below.</h3>

 

 

 

 

 

 

 

<h3>It is then possible to edit haul details - if required - once the data is listed, by clicking the Edit link button.</h3>

 

 

 

 

 

 

 

<form id="Form1" method="post" runat="server">

 

 

 

 

 

 

 

<asp:ScriptManager ID="ScriptManager1" EnableScriptGlobalization="true" runat="server"></asp:ScriptManager>

 

 

 

<table class="tbldialog" id="Table1" cellspacing="1" cellpadding="1" width="500" border="0">

 

 

 

 

 

 

 

<tr>

 

 

 

 

 

 

 

<td><asp:label id="lblId" runat="server" CssClass="label">Observer Name</asp:label></td>

 

 

 

 

 

 

 

<td>

 

 

 

 

 

 

 

<asp:DropDownList ID="ddlID" runat="server" DataSourceID="ODS_Observers" DataTextField="ObserverName" DataValueField="ObserverInitials" CssClass="inputLong" AutoPostBack="True"></asp:DropDownList>

 

 

 

 

 

 

 

<asp:ObjectDataSource ID="ODS_Observers" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" TypeName="DS_DiscardsTableAdapters.USP_ObserversSelectTableAdapter"></asp:ObjectDataSource>

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

</tr>

 

 

 

 

 

 

 

<tr>

 

 

 

 

 

 

 

<td><asp:label id="lblTripCode" runat="server" CssClass="label">Trip Code:</asp:label></td>

 

 

 

 

 

 

 

<td>

 

 

 

 

 

 

 

<asp:Label ID="lblTripCount" runat="server" CssClass="labelNoCount" Visible="false"></asp:Label>

 

 

 

 

 

 

 

<asp:DropDownList ID="ddlTripCode" runat="server" AutoPostBack="True" CssClass="inputLong" DataSourceID="objTripCodes" DataTextField="TripCode" DataValueField="TripCode"></asp:DropDownList>

 

 

 

 

 

 

 

<asp:ObjectDataSource ID="objTripCodes" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetDisTripCodesByIDAndYear" TypeName="TripCodeYearsTableAdapters.DisGetTripCodesByIDAndYearTableAdapter">

 

 

 

 

 

 

 

<SelectParameters>

 

 

 

 

 

 

 

<asp:ControlParameter ControlID="ddlID" Name="ObserverID" PropertyName="SelectedValue" Type="String" />

 

 

 

 

 

 

 

<asp:ControlParameter ControlID="ddlYear" Name="TripYear" PropertyName="SelectedValue" Type="Int32" />

 

 

 

 

 

 

 

</SelectParameters>

 

 

 

 

 

 

 

</asp:ObjectDataSource>

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

</tr>

 

 

 

 

 

 

 

<tr>

 

 

 

 

 

 

 

<td><asp:Label ID="lblYear" runat="server" CssClass="label">Year:</asp:Label></td>

 

 

 

 

 

 

 

<td>

 

 

 

 

 

 

 

<asp:DropDownList ID="ddlYear" runat="server" AutoPostBack="True" CssClass="inputMedium" DataSourceID="objTripCodeYears" DataTextField="TripYears" DataValueField="TripYears"></asp:DropDownList>

 

 

 

 

 

 

 

<asp:ObjectDataSource ID="objTripCodeYears" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetDataTripCodeYears" TypeName="TripCodeYearsTableAdapters.SelectYearsFromTripCodesByIDTableAdapter">

 

 

 

 

 

 

 

<SelectParameters>

 

 

 

 

 

 

 

<asp:ControlParameter ControlID="ddlID" Name="ObserverID" PropertyName="SelectedValue" Type="String" />

 

 

 

 

 

 

 

</SelectParameters>

 

 

 

 

 

 

 

</asp:ObjectDataSource>

 

 

 

</td>

 

 

 

 

 

 

 

</tr>

 

 

 

 

 

 

 

</table>

 

 

 

 

 

 

 

<p><asp:button id="btnMainListMenu" CssClass="mainButton" runat="server" Text="Main List/Edit Menu" ToolTip="Back to Main List/Edit Data Menu"></asp:button></p>

 

 

 

 

 

 

 

<p id="system_error" runat="server" visible="False" class="systemerror"><asp:Label ID="lblError" runat="server"></asp:Label></p>

 

 

 

 

 

 

 

<telerik:RadGrid ID="RDHauls" runat="server" Width="500px"

 

 

 

AutoGenerateEditColumn="True" GridLines="Horizontal"

 

 

 

AutoGenerateColumns="False" AlternatingItemStyle-BackColor="#ecf3f4"

 

 

 

BorderColor="#28899A" EditItemStyle-BackColor="#009999"

 

 

 

EditItemStyle-Font-Bold="true" AllowPaging="True" CellSpacing="0" OnItemDataBound="RDHauls_ItemDataBound" OnNeedDataSource="RDHauls_NeedDataSource">

 

 

 

 

 

 

 

<AlternatingItemStyle BackColor="#ECF3F4"></AlternatingItemStyle>

 

 

 

 

 

 

 

<MasterTableView EnableViewState="false">

 

 

 

 

 

 

 

<Columns>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="TripCode" FilterControlAltText="Filter TripCode column" HeaderText="Trip Code" SortExpression="TripCode" UniqueName="TripCode" ReadOnly="true"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="VessReg" FilterControlAltText="Filter VessReg column" HeaderText="Vessel" SortExpression="VessReg" UniqueName="VessReg" ReadOnly="true"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="HaulNumber" HeaderText="Haul" UniqueName="HaulNumber" ReadOnly="true"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="RigNumber" HeaderText="Rig" UniqueName="RigNumber" ReadOnly="true"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridDropDownColumn DataField="Technique" HeaderText="Technique" ListTextField="Name" ListValueField="Code" UniqueName="Technique" ColumnEditorID="Technique" Visible="false"></telerik:GridDropDownColumn>

 

 

 

 

 

 

 

<telerik:GridCheckBoxColumn DataField="HaulSampledTrueFalse" HeaderText="Haul Sampled?" Visible="false" UniqueName="HaulSampledTrueFalse"></telerik:GridCheckBoxColumn>

 

 

 

 

 

 

 

<telerik:GridCheckBoxColumn DataField="TowDisruptedTrueFalse" HeaderText="Tow Disrupted?" Visible="false" UniqueName="TowDisruptedTrueFalse"></telerik:GridCheckBoxColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="CodEnd" HeaderText="Cod End (mm)" UniqueName="CodEnd" Visible="false"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="MeshSize" HeaderText="Mesh Size (mm)" UniqueName="MeshSize" Visible="false"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="SelectivityMesh" HeaderText="Selectivity Mesh (mm)" UniqueName="SelectivityMesh" Visible="false"></telerik:GridBoundColumn>

 

 

 

<telerik:GridDropDownColumn DataField="TwineCode" HeaderText="Twine" ListTextField="Name" ListValueField="Code" UniqueName="TwineCode" ColumnEditorID="TwineCode" Visible="false"></telerik:GridDropDownColumn>

 

 

 

<telerik:GridBoundColumn DataField="TwineThickness" HeaderText="Twine Thickness (mm)" UniqueName="TwineThickness" Visible="false"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridDropDownColumn DataField="GroundGear" HeaderText="Ground Gear" ListTextField="Name" ListValueField="Code" UniqueName="GroundGear" ColumnEditorID="GroundGear" Visible="false"></telerik:GridDropDownColumn>

 

 

 

<telerik:GridBoundColumn DataField="Bridal" HeaderText="Bridal (m)" UniqueName="Bridal" Visible="false"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="HeadlineHeight" HeaderText="Headline Height (m)" UniqueName="HeadlineHeight" Visible="false"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="WarpLength" HeaderText="Warp Length (fath)" UniqueName="WarpLength" Visible="false"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="DoorSpread" HeaderText="Door Spread (m)" UniqueName="DoorSpread" Visible="false"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridDropDownColumn DataField="TidalStateCode" HeaderText="Tidal State" ListTextField="Name" ListValueField="Code" UniqueName="TidalStateCode" ColumnEditorID="TidalStateCode" Visible="false"></telerik:GridDropDownColumn>

 

 

 

<telerik:GridDropDownColumn DataField="TidalStrengthCode" HeaderText="Tidal Strength" ListTextField="Name" ListValueField="Code" UniqueName="TidalStrengthCode" ColumnEditorID="TidalStrengthCode" Visible="false"></telerik:GridDropDownColumn>

 

 

 

<telerik:GridDropDownColumn DataField="TidalDirectionCode" HeaderText="Tidal Direction" ListTextField="Name" ListValueField="Code" UniqueName="TidalDirectionCode" ColumnEditorID="TidalDirectionCode" Visible="false"></telerik:GridDropDownColumn>

 

 

 

<telerik:GridBoundColumn DataField="GroundSpeed" HeaderText="Speed Over Ground (kts)" UniqueName="GroundSpeed" Visible="false"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="ShotDate" HeaderText="Shot Date" UniqueName="ShotDate" Visible="false"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridDropDownColumn DataField="ShotTime" HeaderText="Shot Time" ListTextField="vchTime" ListValueField="vchTime" UniqueName="ShotTime" ColumnEditorID="ShotTime" Visible="false"></telerik:GridDropDownColumn>

 

 

 

<telerik:GridBoundColumn DataField="ShotDepth" HeaderText="Shot Depth (fath)" UniqueName="ShotDepth" Visible="false"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="ShotLatd" HeaderText="Shot Latitude (deg)" UniqueName="ShotLatd" Visible="false"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="ShotLatm" HeaderText="Shot Latitude (min)" UniqueName="ShotLatm" Visible="false"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="ShotLond" HeaderText="Shot Longitude (deg)" UniqueName="ShotLond" Visible="false"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="ShotLonm" HeaderText="Shot Longitude (min)" UniqueName="ShotLonm" Visible="false"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridTemplateColumn HeaderText="Shot East/West" Visible="false">

 

 

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

<%

 

# Eval("ShotEW")%>

 

 

 

</ItemTemplate>

 

 

 

 

 

 

 

<EditItemTemplate>

 

 

 

 

 

 

 

<asp:RadioButtonList ID="rdShotEastWest" runat="server" RepeatDirection="Horizontal">

 

 

 

 

 

 

 

<asp:ListItem Text="East" Value="1"></asp:ListItem>

 

 

 

 

 

 

 

<asp:ListItem Text="West" Value="2"></asp:ListItem>

 

 

 

 

 

 

 

</asp:RadioButtonList>

 

 

 

 

 

 

 

</EditItemTemplate>

 

 

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="HaulDate" HeaderText="Haul Date" UniqueName="HaulDate" Visible="false"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridDropDownColumn DataField="HaulTime" HeaderText="Haul Time" ListTextField="vchTime" ListValueField="vchTime" UniqueName="HaulTime" ColumnEditorID="HaulTime" Visible="false"></telerik:GridDropDownColumn>

 

 

 

<telerik:GridBoundColumn DataField="HaulDepth" HeaderText="Haul Depth (fath)" UniqueName="HaulDepth" Visible="false"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="HaulLatd" HeaderText="Haul Latitude (deg)" UniqueName="HaulLatd" Visible="false"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="HaulLatm" HeaderText="Haul Latitude (min)" UniqueName="HaulLatm" Visible="false"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="HaulLond" HeaderText="Haul Longitude (deg)" UniqueName="HaulLond" Visible="false"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="HaulLonm" HeaderText="Haul Longitude (min)" UniqueName="HaulLonm" Visible="false"></telerik:GridBoundColumn>

 

 

 

 

 

 

 

<telerik:GridTemplateColumn HeaderText="Haul East/West" Visible="false">

 

 

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

<%

 

# Eval("HaulEW")%>

 

 

 

</ItemTemplate>

 

 

 

 

 

 

 

<EditItemTemplate>

 

 

 

 

 

 

 

<asp:RadioButtonList ID="rdHaulEastWest" runat="server" RepeatDirection="Horizontal">

 

 

 

 

 

 

 

<asp:ListItem Text="East" Value="1"></asp:ListItem>

 

 

 

 

 

 

 

<asp:ListItem Text="West" Value="2"></asp:ListItem>

 

 

 

 

 

 

 

</asp:RadioButtonList>

 

 

 

 

 

 

 

</EditItemTemplate>

 

 

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

 

 

<telerik:GridDropDownColumn DataField="TowRegion" HeaderText="Tow Region" ListTextField="Name" ListValueField="Name" UniqueName="TowRegion" ColumnEditorID="TowRegion" Visible="false"></telerik:GridDropDownColumn>

 

 

 

 

 

 

 

<telerik:GridDropDownColumn DataField="HaulRectangle" HeaderText="Haul Rectangle" ListTextField="Code" ListValueField="Code" UniqueName="HaulRectangle" ColumnEditorID="HaulRectangle" Visible="false"></telerik:GridDropDownColumn>

 

 

 

<telerik:GridDropDownColumn DataField="WindSpeedCode" HeaderText="Wind Speed" ListTextField="Name" ListValueField="Code" UniqueName="WindSpeed" ColumnEditorID="WindSpeed" Visible="false"></telerik:GridDropDownColumn>

 

 

 

<telerik:GridDropDownColumn DataField="WindDirectionCode" HeaderText="Wind Direction" ListTextField="Name" ListValueField="Code" UniqueName="WindDirection" ColumnEditorID="WindDirection" Visible="false"></telerik:GridDropDownColumn>

 

 

 

 

 

 

 

<telerik:GridDropDownColumn DataField="SeaStateCode" HeaderText="Sea State" ListTextField="Name" ListValueField="Code" UniqueName="SeaState" ColumnEditorID="SeaState" Visible="false"></telerik:GridDropDownColumn>

 

 

 

<telerik:GridDropDownColumn DataField="SelectivityDeviceCode" HeaderText="Selectivity Device" ListTextField="nvcSelectivityDeviceName" ListValueField="intSelectivityDeviceID" UniqueName="SelectivityDevice" Visible="false" ></telerik:GridDropDownColumn>

 

 

 

</Columns>

 

 

 

 

 

 

 

</MasterTableView>

 

 

 

 

 

 

 

</telerik:RadGrid>

 

 

 

 

 

 

 

</form>

 

 

 

 

 

 

 

</div>

 

 

 

 

 

 

 

</body>

 

</

 

 

html>

 

 

 

 

0
Ida
Top achievements
Rank 1
answered on 22 Oct 2013, 08:12 AM
This seems to be only happening in IE, by the way. The rendering problem does not seem to happen in Firefox.

Thanks, Ida
0
Konstantin Dikov
Telerik team
answered on 24 Oct 2013, 11:44 AM
Hello Ida,

Using the provided code snippet I am not able to replicate the issue on my end in any browser.

Could you please elaborate on what IE version this behavior is observable.

Additionally, in order for us to be able to easily locate the issue and provide a fix for it, please open a regular support ticket with sample project that replicated the issue, so we could inspect it locally.

 

Regards,
Konstantin Dikov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Ida
Top achievements
Rank 1
answered on 24 Oct 2013, 12:16 PM
Hi Konstantin,

It's in browser IE 8 that the issue is happening.

I will open a support ticket for this.

Thanks, Ida
Tags
Grid
Asked by
Ida
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Ida
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or