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

RadRotator does not scroll vertically IE6/IE7 and Internal Browser VS 2010

2 Answers 136 Views

Rotator

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

Alejandro Genovesi asked on 13 Jan 2011, 07:23 PM

ImageStart.jpg

ImageError.jpg

Hi:
I have a grid with an ItemTemplate that contains a RadRotator Control, RadRotator content does not scroll in earlier versions of IE (6 / 7), even in the Internal Browser version of Visual Studio 2010.
The attached images show the problem.
Version of Telerik.Web.UI: 2010.3.1215.20

Thanks for your help

The code is:

<style type="text/css">

html* .FixRotatorHeight .rrVerticalList

{

width: 540px;

}

</style>

<telerik:RadGrid ID="rgIndicadoresMeta" runat="server" AutoGenerateColumns="False"

DataSourceID="SqlDsIndicadoresMeta" GridLines="None" Skin="Sitefinity" Width="780px"

Height="359px">

<ClientSettings>

<Selecting AllowRowSelect="True" />

<Scrolling AllowScroll="True" UseStaticHeaders="True" />

</ClientSettings>

<MasterTableView DataKeyNames="codigo" DataSourceID="SqlDsIndicadoresMeta" TableLayout="Fixed"

NoMasterRecordsText="No hay información regisdtrada." ShowHeader="false">

<CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>

<RowIndicatorColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn DataField="codigo" DataType="System.Int32" HeaderText="codigo"

ReadOnly="True" SortExpression="codigo" UniqueName="codigo" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="indicador" HeaderText="indicador" SortExpression="indicador"

UniqueName="indicador" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderText="Datos">

<ItemTemplate>

<table cellpadding="0" cellspacing="0">

<tr>

<td style="background-color: #D1DCF1;">

<asp:Label runat="server" ID="lblTituloIndicador" Width="740px" Text="Indicador:"

Font-Size="11pt" Style="font-variant: small-caps;"></asp:Label><br />

</td>

</tr>

<tr>

<td>

<telerik:RadSplitter ID="RadSplitterindicador" runat="server" LiveResize="false"

Skin="Windows7" Width="698px" Height="240px" BackColor="White">

<telerik:RadPane ID="RadPaneCabecera" runat="server" Width="180px" Scrolling="None">

<table cellpadding="0" cellspacing="0">

<tr>

<td style="font-family: 'Calibri';">

<asp:Label ID="lblEstado" runat="server" Text="Estado:"></asp:Label>

<asp:Image ID="imgEstado" runat="server" ImageUrl="~/recursos/imagenes/menu/indicadores/deficiente.png" /><br />

<asp:Label ID="lblAvance" runat="server" Text="Avance:"></asp:Label><br />

<asp:Label ID="lblUnidad" runat="server" Text="Unidad:"></asp:Label><br />

<asp:Label ID="lblActualizacion" runat="server" Text="Actualizado:"></asp:Label>

<asp:Image ID="imgActualiza" runat="server" ImageUrl="~/recursos/imagenes/menu/indicadores/0.png" /><br />

<asp:Label ID="lblCorte" runat="server" Text="Fecha de corte:"></asp:Label><br />

<asp:Label ID="lblTipo" runat="server" Text="Tipo Indicador:"></asp:Label><br />

</td>

</tr>

<tr>

<td style="font-family: 'Century Gothic';">

<asp:Label ID="lblResumen" runat="server" Text="Resumen:"></asp:Label><br />

<asp:TextBox ID="txtResumen" runat="server" TextMode="MultiLine" Rows="6" Width="164px"

BorderColor="Transparent" Font-Size="8pt" Font-Names="Century Gothic"></asp:TextBox>

</td>

</tr>

</table>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBarIndicador" runat="server" Visible="false">

</telerik:RadSplitBar>

<telerik:RadPane ID="RadPaneDetalleGrafico" runat="server" Width="540px" Scrolling="None">

<telerik:RadRotator ID="RadRotatorIndicador" runat="server" Width="540px" RotatorType="SlideShowButtons"

SlideShowAnimation-Type="CrossFade" BackColor="White" Height="224px" ScrollDirection="Left,Right" CssClass="FixRotatorHeight"

Style="position: inherit;">

<Items>

<telerik:RadRotatorItem>

<ItemTemplate>

<table cellpadding="0" cellspacing="0">

<tr>

<td>

<telerik:RadGrid ID="rgDetallePeriodoIndicador" runat="server" AutoGenerateColumns="False"

GridLines="None" Skin="Simple" DataSourceID="SqlDsPeriodicidadIndicador" Width="342px"

Height="208px">

<ClientSettings>

<Scrolling AllowScroll="True" UseStaticHeaders="True" />

</ClientSettings>

<MasterTableView DataKeyNames="codigo_periodo" DataSourceID="SqlDsPeriodicidadIndicador"

GroupLoadMode="Client">

<CommandItemSettings ExportToPdfText="Export to Pdf" />

<RowIndicatorColumn>

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<ExpandCollapseColumn>

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<GroupByExpressions>

<telerik:GridGroupByExpression>

<SelectFields>

<telerik:GridGroupByField FieldName="anio_periodo" HeaderText="Año"></telerik:GridGroupByField>

</SelectFields>

<GroupByFields>

<telerik:GridGroupByField SortOrder="Ascending" FieldName="anio_periodo"></telerik:GridGroupByField>

</GroupByFields>

</telerik:GridGroupByExpression>

</GroupByExpressions>

<Columns>

<telerik:GridBoundColumn DataField="codigo_indicador" DataType="System.Int32" HeaderText="Cód. Indicador"

SortExpression="codigo_indicador" UniqueName="codigo_indicador" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="codigo_periodo" DataType="System.Int32" HeaderText="Id"

ReadOnly="True" SortExpression="codigo_periodo" UniqueName="codigo_periodo" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="nombre_periodo" HeaderText="Período" SortExpression="nombre_periodo"

UniqueName="nombre_periodo">

<HeaderStyle Width="120px" />

<ItemStyle Width="120px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="anio_periodo" DataType="System.Int32" HeaderText="Año"

SortExpression="anio_periodo" UniqueName="anio_periodo" Visible="false">

<HeaderStyle Width="50px" />

<ItemStyle Width="50px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="fecha_fin_periodo" DataType="System.DateTime"

HeaderText="fecha_fin_periodo" SortExpression="fecha_fin_periodo" UniqueName="fecha_fin_periodo"

Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="fecha_ultima_actualizacion" DataType="System.DateTime"

HeaderText="fecha_ultima_actualizacion" SortExpression="fecha_ultima_actualizacion"

UniqueName="fecha_ultima_actualizacion" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="valor_programado" DataType="System.Double" HeaderText="Meta"

SortExpression="valor_programado" UniqueName="valor_programado">

<HeaderStyle HorizontalAlign="Right" />

<ItemStyle HorizontalAlign="Right" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="valor_ejecutado" DataType="System.Double" HeaderText="Result."

SortExpression="valor_ejecutado" UniqueName="valor_ejecutado">

<HeaderStyle HorizontalAlign="Right" />

<ItemStyle HorizontalAlign="Right" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="porcentaje_ejecucion" HeaderText="%" SortExpression="porcentaje_ejecucion"

UniqueName="porcentaje_ejecucion" DataFormatString="{0:P2}">

<HeaderStyle HorizontalAlign="Center" />

<ItemStyle HorizontalAlign="Center" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="observaciones" HeaderText="observaciones" SortExpression="observaciones"

UniqueName="observaciones" Visible="false">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default" EnableImageSprites="True">

</HeaderContextMenu>

</telerik:RadGrid>

</td>

<td>

<telerik:RadChart ID="RadChartIndicadorGlobal" runat="server" Skin="Pastel" Width="170px"

Height="208px">

</telerik:RadChart>

</td>

</tr>

</table>

</ItemTemplate>

</telerik:RadRotatorItem>

<telerik:RadRotatorItem>

<ItemTemplate>

<table cellpadding="0" cellspacing="0">

<tr>

<td style="background-color: #F2F2F2; font-family: 'Trebuchet MS'; font-size: 8pt;">

<table cellpadding="0" cellspacing="0">

<tr>

<td>

<asp:Label runat="server" ID="lblVista" Text="Vista de Datos"></asp:Label>

</td>

<td>

<telerik:RadComboBox ID="rcbVistaDatos" runat="server" Width="120px" Font-Names="Trebuchet MS">

<Items>

<telerik:RadComboBoxItem Value="0" Text="Valores absolutos" Selected="true" />

<telerik:RadComboBoxItem Value="1" Text="Porcentajes" />

</Items>

</telerik:RadComboBox>

</td>

<td>

<asp:Label runat="server" ID="lblAnio" Text="Año"></asp:Label>

</td>

<td>

<telerik:RadComboBox ID="rcbAnio" runat="server" Width="60px" Font-Names="Trebuchet MS"

AutoPostBack="true" DataSourceID="SqlDsAniosVigencia" DataValueField="ANIO_VIGENCIA"

DataTextField="NOMBRE_VIGENCIA" OnSelectedIndexChanged="OnSelectedIndexChangedHandler">

</telerik:RadComboBox>

<span> </span>

</td>

<td style="border-left: 1 dotted Gray; padding-left: 10px;">

<asp:Image runat="server" ID="imgProg" ImageAlign="Left" ImageUrl="~/recursos/imagenes/menu/indicadores/prog.png" />

<asp:Label runat="server" ID="Label1" Text=" Programado"></asp:Label><span> </span>

</td>

<td>

<asp:Image runat="server" ID="Image1" ImageAlign="Left" ImageUrl="~/recursos/imagenes/menu/indicadores/avance.png" />

<asp:Label runat="server" ID="Label2" Text=" Ejecutado"></asp:Label>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<telerik:RadChart ID="RadChartIndicadorPeriodicidad" runat="server" IntelligentLabelsEnabled="false"

DataGroupColumn="nombre" AutoTextWrap="True" Height="180px" Width="538px" AutoLayout="true"

DataSourceID="SqlDsSeriesPeriodicidad" Skin="Sunset" Legend-Visible="false" OnItemDataBound="ChartOnItemDataBound">

<Appearance Corners="Round, Round, Round, Round, 7" Border-Visible="false">

<FillStyle FillType="ComplexGradient">

<FillSettings>

<ComplexGradient>

<telerik:GradientElement Color="White" />

<telerik:GradientElement Color="White" Position="0.5" />

<telerik:GradientElement Color="White" Position="1" />

</ComplexGradient>

</FillSettings>

</FillStyle>

<Border Color="212, 221, 222" />

</Appearance>

<PlotArea>

<EmptySeriesMessage>

<TextBlock Text="No existen datos disponibles">

<Appearance AutoTextWrap="False">

</Appearance>

</TextBlock>

</EmptySeriesMessage>

<XAxis DataLabelsColumn="nombre_periodo">

<AxisLabel>

<TextBlock>

<Appearance TextProperties-Font="Arial, 4pt">

</Appearance>

</TextBlock>

</AxisLabel>

</XAxis>

</PlotArea>

<ChartTitle Visible="false">

</ChartTitle>

</telerik:RadChart>

<telerik:RadToolTipManager ID="RadToolTipManagerChart" runat="server" Skin="Telerik"

Animation="Slide" Position="BottomCenter" ToolTipZoneID="RadChartIndicadorPeriodicidad"

AutoTooltipify="true">

</telerik:RadToolTipManager>

</td>

</tr>

</table>

</ItemTemplate>

</telerik:RadRotatorItem>

</Items>

<ControlButtons RightButtonID="BtDerecha" LeftButtonID="BtIzquierda" />

</telerik:RadRotator>

<div style="float: right; background-color: #FBFBF1; width: 100%;">

<asp:Image runat="server" ID="BtDerecha" ImageUrl="~/recursos/imagenes/menu/indicadores/flecha_der.png"

Style="cursor: pointer; float: right;" ToolTip="Siguiente" /><span> </span>

<asp:Image runat="server" ID="BtIzquierda" ImageUrl="~/recursos/imagenes/menu/indicadores/flecha_izq.png"

Style="cursor: pointer; float: right;" ToolTip="Anterior" /><span> </span>

</div>

<table cellpadding="0" cellspacing="0">

<tr>

<td>

<div style="float: left;">

<span> </span><asp:Image runat="server" ID="imgVistaRegiones" ImageUrl="~/recursos/imagenes/menu/indicadores/info_detalle.png" />

<asp:HyperLink runat="server" ID="hplnkRegiones" Text="Consultar información regional"

Target="_parent" Font-Size="8pt" Style="cursor: pointer;"></asp:HyperLink>

</div>

</td>

</tr>

</table>

<asp:SqlDataSource ID="SqlDsPeriodicidadIndicador" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionStringSIGOB %>"

SelectCommand="ind_ObtieneValoresPeriodicidadIndicador" SelectCommandType="StoredProcedure">

<SelectParameters>

<asp:Parameter Name="CODIGO_INDICADOR" Type="Int32" />

</SelectParameters>

</asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDsSeriesPeriodicidad" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionStringSIGOB %>"

SelectCommand="ind_ObtieneSeriesGraficaPeriodicidad" SelectCommandType="StoredProcedure">

<SelectParameters>

<asp:Parameter Name="CODIGO_INDICADOR" Type="Int32" />

<asp:Parameter DefaultValue="0" Name="ANIO" Type="Int32" />

</SelectParameters>

</asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDsAniosVigencia" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionStringSIGOB %>"

SelectCommand="ind_ObtieneAniosVigenciaIndicador" SelectCommandType="StoredProcedure">

<SelectParameters>

<asp:Parameter Name="CODIGO_INDICADOR" Type="Int32" />

</SelectParameters>

</asp:SqlDataSource>

</telerik:RadPane>

</telerik:RadSplitter>

</td>

</tr>

</table>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<HeaderContextMenu EnableImageSprites="True" CssClass="GridContextMenu GridContextMenu_Default">

</HeaderContextMenu>

</telerik:RadGrid>

2 Answers, 1 is accepted

Accepted

answered on 18 Jan 2011, 04:20 PM

Hi Alejandro Genovesi,
RadRotator applies position style to some of its elements. That is why, in case you place the rotator in a scrollable element, that is different from the FORM element, in IE6 and IE7, the rotator will not scroll with the rest of the content of that element. This browser bug is fixed in IE8.

The workaround that you can use, is to find the scrollable element and apply position to that element as well. For example, you can apply "position:relative" either as inline style or by means of a CSS class. Just by looking at your screenshots, I cannot tell you, which the scrollable element is. That is why, in case you have problems finding that element, please open a new support ticket and send me a running test project and I will do that for you.

Kind regards,
Tsvetie
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 18 Jan 2011, 04:45 PM

RadRotatorInRadGrid.zip

Hello Alejandro,

I tried to reproduce the problem, but without success. Can you please test the attached project? If the problem is not reproducible on your end, please modify it so that it demonstrates it and send it back via a support ticket.

Best regards,
Rumen
the Telerik team

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

RadRotator does not scroll vertically IE6/IE7 and Internal Browser VS 2010

2 Answers, 1 is accepted