RadAjaxLoadingPanel + RadSplitter

[Fabian Raul Jofre]

Hello,
I have a issue when i put RadSplitter in the page, my site contains a master page and Ajax
The problems is when I added the Radsplitter to my RadGrid height 100% in all browsers.
When I pressed the button and makes the postback  the page show one Scrollbar horizontal and one ScrollBar Vertical.
If I not use the RadSplitter, the problems dissapear, but the RadGrid is not allowed at height 100%.

I send you de Page Code.-
<%

@ Register TagPrefix="sol2008" TagName="ReporteFechas" Src="~/ascx/reporte_fechas.ascx" %>

 

<%

@ Register TagPrefix="sol2008" TagName="MsgBox" Src="~/ascx/msgbox.ascx" %>

 

<%

@ Register TagPrefix="sol2008" TagName="Box" Src="~/ascx/box.ascx" %>

 

<%

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

 

<%

@ Page Language="C#" Inherits="sol2008.reporte_net_win_2010" CodeFile="~/reporte_net_win_2010.aspx.cs" EnableEventValidation="false" MasterPageFile="~/MasterPagina.master" %>

 

<

 

asp:Content ID="Content1" ContentPlaceHolderID="Contenedor" runat="server">

 

 

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px" Transparency="25" ScrollBars="None">

 

 

<img src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border:0;position:absolute;top:20%;left:45%;" />

 

 

</telerik:RadAjaxLoadingPanel>

 

 

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">

 

 

<sol2008:BOX id="BoxBegin" title="Reporte Net Win" runat="server" width="100%" action="begin"></sol2008:BOX>

 

 

<input type="hidden" id="HidFecha" name="HidFecha" />

 

 

<table class="generalreporte" id="tblGralReporte" runat="server">

 

 

<tr>

 

 

<td>

 

 

<table id="Table1" class="filtrosreporte" runat="server">

 

 

<tr>

 

 

<td><asp:label id="lblFechaDesde" runat="server" Text="Fecha Desde"></asp:label></td>

 

 

<td><asp:textbox id="TxtFechaDesde" runat="server" maxlength="10" size="12" onkeypress="fnAceptar_Filtrar(event)"></asp:textbox><IMG id="IMG1" style="CURSOR: hand" onclick="window_open('TxtFechaDesde')" src="~/comunes/images/calendario.gif" runat="server">

 

 

</td>

 

 

<td><asp:label id="lblFechaHasta" runat="server" Text="Fecha Hasta"></asp:label></td>

 

 

<td><asp:textbox id="TxtFechaHasta" runat="server" maxlength="10" size="12" onkeypress="fnAceptar_Filtrar(event)"></asp:textbox><IMG id="IMG2" style="CURSOR: hand" onclick="window_open('TxtFechaHasta')" src="~/comunes/images/calendario.gif" runat="server">

 

 

</td>

 

 

<td width="5"></td>

 

 

<td colspan="3">

 

 

<table>

 

 

<tr>

 

 

<td><asp:button ID="BtnFiltrar" runat="server" Text="Filtrar" OnClick="BtnFiltrar_Click"></asp:button></td>

 

 

<td><asp:button ID="BtnExportarExcel" runat="server" OnClick="BtnExportarExcel_Click" CssClass="imgExcel" ></asp:button></td>

 

 

<td><asp:button ID="BtnExportarCsv" runat="server" OnClick="BtnExportarCsv_Click" CssClass="imgCsv" /></td>

 

 

<td><asp:button ID="BtnExportarWord" runat="server" OnClick="BtnExportarWord_Click" CssClass="imgWord" ></asp:button></td>

 

 

<td><img src="comunes/images/impresora.gif" runat="server" onclick="fnImprimir('RadGrid1')" id="btnImprimir" style="cursor:pointer"/></td>

 

 

</tr>

 

 

</table>

 

 

</td>

 

 

 

</tr>

 

 

<tr>

 

 

<td colspan="9">

 

 

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

 

 

<colgroup>

 

 

<col width="100" />

 

 

<col width="135" />

 

 

<col width="40"/>

 

 

<col />

 

 

<col width="300"/>

 

 

</colgroup>

 

 

<tr>

 

 

<td><asp:label id="lblAgrupado" runat="server" Text="Agrupado por:"></asp:label></td>

 

 

<td><asp:dropdownlist id="CmbAgrupado" runat="server"></asp:dropdownlist></td>

 

 

<td><asp:label id="lblSala" runat="server" Text="Sala:"></asp:label></td>

 

 

<td><asp:dropdownlist id="CmbSalas" runat="server"></asp:dropdownlist></td>

 

 

<td><sol2008:REPORTEFECHAS id="ReporteFechas" runat="server" NAME="ReporteFechas"></sol2008:REPORTEFECHAS></td>

 

 

<td style="padding-top:5px"><asp:Label ID="lblFechaReporte" runat="server" Text="Fecha Reporte:"></asp:Label> <asp:Label ID="lblFechaReporte1" runat="server"></asp:Label></td>

 

 

</tr>

 

 

</table>

 

 

</td>

 

 

 

</tr>

 

 

</table>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td>

 

 

<telerik:RadSplitter runat="server" Orientation="Horizontal" ResizeWithBrowserWindow="true" ID="splitter" Height="100%"

 

 

FullScreenMode="true"

 

 

VisibleDuringInit="false" Width="100%" style="width:100%" BorderSize="0">

 

 

<telerik:RadPane ID="drillPanel" runat="server" Width="99%" Height="100%">

 

 

<telerik:RadGrid ShowGroupPanel="false" AutoGenerateColumns="false" ID="RadGrid1" AllowFilteringByColumn="False" AllowSorting="true" ShowFooter="true" runat="server" AllowPaging="false" Skin="MyCustomSkin" EnableEmbeddedSkins="false" OnItemDataBound="RadGrid1_ItemDataBound" OnDetailTableDataBind="RadGrid1_DetailTableDataBind" OnSortCommand="RadGrid1_SortCommand" Width="100%" Height="75%">

 

 

<ExportSettings OpenInNewWindow="true" ExportOnlyData="true">

 

 

<Excel Format="Html" FileExtension="XLS"/>

 

 

<Pdf PaperSize="Legal" />

 

 

</ExportSettings>

 

 

<ClientSettings>

 

 

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

 

 

</Scrolling>

 

 

<Resizing AllowColumnResize="true"/>

 

 

</ClientSettings>

 

 

<MasterTableView ShowGroupFooter="true" TableLayout="Auto">

 

 

 

<SortExpressions>

 

 

<telerik:GridSortExpression FieldName="ganancia" SortOrder="Descending" />

 

 

</SortExpressions>

 

 

<Columns>

 

 

<telerik:GridBoundColumn DataField="UID" HeaderText="UID" SortExpression="UID" UniqueName="UID" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="60px"></telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="CUIM" HeaderText="CUIM" SortExpression="CUIM" UniqueName="CUIM" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="50px"></telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="Modelo" HeaderText="Modelo" SortExpression="Modelo" UniqueName="Modelo" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="Fabricante" HeaderText="Fabricante" SortExpression="Fabricante" UniqueName="Fabricante" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Left"></telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="Juego" HeaderText="Juego" SortExpression="Juego" UniqueName="Juego" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Left"></telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="Denominacion" HeaderText="Denom" SortExpression="Denominacion" UniqueName="Denominacion" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="45px" DataFormatString="{0:###,###0.00}"></telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn UniqueName="DeltaCin" HeaderText="Delta C.In" DataField="DeltaCin" Aggregate="Sum" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right" FooterStyle-HorizontalAlign="Right" DataFormatString="{0:###,###,##0.00}" HeaderStyle-Width="95"/>

 

 

<telerik:GridBoundColumn UniqueName="DeltaCout" HeaderText="Delta C.Out" DataType="System.Decimal" DataField="DeltaCout" Aggregate="Sum" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right" FooterStyle-HorizontalAlign="Right" DataFormatString="{0:###,###,##0.00}" HeaderStyle-Width="95"/>

 

 

<telerik:GridBoundColumn UniqueName="DeltaJkpt" HeaderText="Delta C.Jkp" DataType="System.Decimal" DataField="DeltaJkp" Aggregate="Sum" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right" FooterStyle-HorizontalAlign="Right" DataFormatString="{0:###,###,##0.00}" HeaderStyle-Width="85"/>

 

 

<telerik:GridBoundColumn DataField="ganancia" HeaderText="Net Win" SortExpression="ganancia" UniqueName="ganancia" DataFormatString="{0:###,###,##0.00}" EmptyDataText="0,00" Aggregate="Sum" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right" FooterStyle-HorizontalAlign="Right" HeaderStyle-Width="90"></telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn UniqueName="DeltaPartidas" HeaderText="Delta Part." DataType="System.Int32" DataField="DeltaPartidas" Aggregate="Sum" DataFormatString="{0:######0}" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right" FooterStyle-HorizontalAlign="Right" HeaderStyle-Width="80"/>

 

 

<telerik:GridBoundColumn DataField="Dias" HeaderText="Das" SortExpression="Dias" UniqueName="Dias" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="30px"></telerik:GridBoundColumn>

 

 

<telerik:GridCalculatedColumn UniqueName="PorcentajeReal" HeaderText="% Real" DataType="System.Decimal" DataFields="DeltaCin,DeltaCout,DeltaJkp" Expression="IIF({0}<>0,({1}+{2})/{0}*100,0.00)" DataFormatString="{0:######0.00}" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right" FooterStyle-HorizontalAlign="Right" Aggregate="Avg" HeaderStyle-Width="50"/>

 

 

<telerik:GridBoundColumn UniqueName="PorcentajeTeorico" HeaderText="% Terico" DataField="Porcentaje" DataFormatString="{0:######0.00}" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right" FooterStyle-HorizontalAlign="Right" DataType="System.Decimal" Aggregate="Avg" HeaderStyle-Width="45"/>

 

 

<telerik:GridCalculatedColumn UniqueName="PorcentajeDesv" HeaderText="% Desv." DataFields="DeltaCin,DeltaCout,Porcentaje" Expression="IIF({0}<>0,{1}/{0}*100-Porcentaje,0.00)" DataFormatString="{0:######0.00}" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right" FooterStyle-HorizontalAlign="Right" DataType="System.Decimal" Aggregate="Avg" HeaderStyle-Width="55"/>

 

 

</Columns>

 

 

<DetailTables>

 

 

<telerik:GridTableView>

 

 

<Columns>

 

 

<telerik:GridBoundColumn DataField="FechaHora" HeaderText="Fecha Hora" SortExpression="FechaHora" UniqueName="FechaHora" DataFormatString="{0:dd/MM/yyyy}"></telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="FechaDesde" HeaderText="Fecha Desde" SortExpression="FechaDesde" UniqueName="FechaDesde" DataFormatString="{0:dd/MM/yyyy HH:mm:ss}"></telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="FechaHasta" HeaderText="Fecha Hasta" SortExpression="FechaHasta" UniqueName="FechaHasta" DataFormatString="{0:dd/MM/yyyy HH:mm:ss}"></telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="Denominacion" HeaderText="Denom" SortExpression="Denominacion" UniqueName="Denominacion" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="50px" DataFormatString="{0:###,###0.00}"></telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn UniqueName="DeltaCin" HeaderText="Delta C.In" DataType="System.Decimal" DataField="DeltaCin" Aggregate="Sum" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right" FooterStyle-HorizontalAlign="Right" DataFormatString="{0:###,###,##0.00}"/>

 

 

<telerik:GridBoundColumn UniqueName="DeltaCout" HeaderText="Delta C.Out" DataType="System.Decimal" DataField="DeltaCout" Aggregate="Sum" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right" FooterStyle-HorizontalAlign="Right" DataFormatString="{0:###,###,##0.00}"/>

 

 

<telerik:GridBoundColumn UniqueName="DeltaJkpt" HeaderText="Delta C.Jkp" DataType="System.Decimal" DataField="DeltaJkp" Aggregate="Sum" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right" FooterStyle-HorizontalAlign="Right" DataFormatString="{0:###,###,##0.00}"/>

 

 

<telerik:GridBoundColumn UniqueName="DeltaPartidas" HeaderText="Delta Part." DataType="System.Int32" DataField="DeltaPartidas" Aggregate="Sum" DataFormatString="{0:#####0}" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right" FooterStyle-HorizontalAlign="Right"/>

 

 

<telerik:GridBoundColumn DataField="ganancia" HeaderText="Net Win" SortExpression="ganancia" UniqueName="ganancia" DataFormatString="{0:###,###,##0.00}" EmptyDataText="0,00" Aggregate="Sum" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right" FooterStyle-HorizontalAlign="Right"></telerik:GridBoundColumn>

 

 

<telerik:GridCalculatedColumn UniqueName="PorcentajeReal" HeaderText="% Dev.Real" DataType="System.Decimal" DataFields="DeltaCin,DeltaCout,DeltaJkp" Expression="IIF({0}<>0,({1}+{2})/{0}*100,0.00)" DataFormatString="{0:######0.00}" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right" FooterStyle-HorizontalAlign="Right" Aggregate="Avg"/>

 

 

<telerik:GridBoundColumn UniqueName="PorcentajeTeorico" HeaderText="% Dev.Terico" DataField="Porcentaje" DataFormatString="{0:######0.00}" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right" FooterStyle-HorizontalAlign="Right" DataType="System.Decimal" Aggregate="Avg"/>

 

 

<telerik:GridCalculatedColumn UniqueName="PorcentajeDesv" HeaderText="% Desviacin" DataFields="DeltaCin,DeltaCout,Porcentaje" Expression="IIF({0}<>0,{1}/{0}*100-Porcentaje,0.00)" DataFormatString="{0:######0.00}" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right" FooterStyle-HorizontalAlign="Right" DataType="System.Decimal" Aggregate="Avg"/>

 

 

</Columns>

 

 

</telerik:GridTableView>

 

 

</DetailTables>

 

 

</MasterTableView>

 

 

</telerik:RadGrid>

 

 

</telerik:RadPane>

 

 

</telerik:RadSplitter>

 

 

</td>

 

 

</tr>

 

 

</table>

 

 

<sol2008:MSGBOX id="MsgError" title="Advertencia" runat="server" visible="false"></sol2008:MSGBOX>

 

 

<sol2008:BOX id="BoxEnd" runat="server" action="end"></sol2008:BOX>

 

</

 

telerik:RadAjaxPanel>

 

</

 

asp:Content>

 

[Tsvetie]

Hi Fabian Raul Jofre,
You get the scrollbars, because you have set Width=100% for the grid control and that grid control has horizontal borders. As a result, its offsetWidth becomes 100% of the width of its parent element, plus two pixels for the borders. You can remove the horizontal borders of the grid control with the following style:

<telerik:RadGrid ID="RadGrid1" CssClass="RemoveHorizontalBorders"

<style type="text/css">
div.RemoveHorizontalBorders
{
    border-width: 1px 0;
}
</style>

Additionally, I would like to point out that some of your IMG elements are not self-closing tags. For example:

<td>
    <asp:TextBox ID="TxtFechaHasta" runat="server" MaxLength="10" size="12" onkeypress="fnAceptar_Filtrar(event)"></asp:TextBox>
    <img id="IMG2" style="cursor: hand" onclick="window_open('TxtFechaHasta')" src="~/comunes/images/calendario.gif"
        runat="server">
</td>

I noticed that you have not configured your page correctly for the splitter to occupy 100% of the height of its parent element. Basically, when you want to set 100% as height to an element, you must conform to the following rule - if a web page element has its height defined in percent, its parent element must have a height style as well. The rule applies recursively.

You can read about this rule on the W3 site (http://www.w3.org/TR/CSS21/visudet.html#the-height-property). We have mentioned this in our online demos as well - http://demos.telerik.com/aspnet-ajax/Splitter/Examples/ResizeWithWindow/DefaultCS.aspx.

Sincerely yours,
Tsvetie
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.