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

Split page height between RadGrid and RadMultiPage

1 Answer 67 Views

General Discussions

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

Pedro asked on 16 Sep 2011, 01:58 PM

desiredLayout.jpg

layoutBig.jpg

Hello there!

I've been trying to create a layout for a page that will be displayed inside a RadWindow (which must support window resizing and maximizing) component in a Web-Desktop scenario application but it's has proven a difficult task.

One of the requirements, is that the page height content must be split between 2 controls: the top half of the page must contain a RadGrid and the bottom half must contain a RadTabStrip (which contains headers to paginate the RadMultiPage below) and a RadMultiPage which will contain input fields.

The 50-50 height ratio between controls should not be changed even if the window is resized.

Here's the current ASPX for the page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Usuarios.aspx.cs" Inherits="BigWeb.PaginaUsuarios" %>

<!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 id="Head1" runat="server">

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

<title>Pagina teste BIG</title>

</head>

<body>

<form id="frmBig" runat="server">

<telerik:RadScriptManager ID="rsmScripts" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

<asp:ScriptReference Path="js/livevalidation_standalone.compressed.js"/>

<asp:ScriptReference Path="js/big.js"/>

</Scripts>

</telerik:RadScriptManager>

<telerik:RadAjaxLoadingPanel ID="loadingPanel" runat="server"

Skin="Hay" IsSticky="False" MinDisplayTime="5">

</telerik:RadAjaxLoadingPanel>

<telerik:RadSkinManager ID="rsmBig" Runat="server" ShowChooser="True"

Skin="Hay" onskinchanging="RadSkinManager1_SkinChanging">

<TargetControls>

<telerik:TargetControl ControlID="rgUsuarios" Skin="Hay" />

</TargetControls>

</telerik:RadSkinManager>

<telerik:RadAjaxManager ID="ajaxManager" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="rgUsuarios">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rgUsuarios"/>

<telerik:AjaxUpdatedControl ControlID="rtsAbas" />

<telerik:AjaxUpdatedControl ControlID="rmpAbas" LoadingPanelID="loadingPanel" />

<telerik:AjaxUpdatedControl ControlID="hidCodigoInterno" />

<telerik:AjaxUpdatedControl ControlID="hidIndexRowGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnSalvar">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rgUsuarios"

LoadingPanelID="loadingPanel" />

<telerik:AjaxUpdatedControl ControlID="rtsAbas" />

<telerik:AjaxUpdatedControl ControlID="rmpAbas" LoadingPanelID="loadingPanel" />

<telerik:AjaxUpdatedControl ControlID="hidCodigoInterno" />

<telerik:AjaxUpdatedControl ControlID="hidIndexRowGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

<ClientEvents OnResponseEnd="ValidaCampos" />

</telerik:RadAjaxManager>

<div id="grid">

<telerik:RadGrid ID="rgUsuarios" runat="server"

AllowFilteringByColumn="True" AllowPaging="True"

AllowSorting="True" CellSpacing="0" CssClass="GridLogos" Culture="pt-BR" GridLines="None" Skin="Hay"

Width="100%" AutoGenerateColumns="False" ShowFooter="True" ShowGroupPanel="True" AllowMultiRowEdit="False"

Height="50%" ViewStateMode="Enabled"

PageSize="30" AllowCustomPaging="True">

<ClientSettings AllowColumnsReorder="True" AllowRowsDragDrop="False"

EnablePostBackOnRowClick="True" ReorderColumnsOnClient="True">

<Selecting AllowRowSelect="True" />

</ClientSettings>

<MasterTableView>

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

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

</EditFormSettings>

<ItemStyle Height="7px" />

</MasterTableView>

<ItemStyle Height="7px" />

<FilterMenu EnableImageSprites="False"></FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>

</telerik:RadGrid>

</div>

<div style="clear:both;"></div>

<div id="campos">

<telerik:RadTabStrip ID="rtsAbas" runat="server" Width="98%"

MultiPageID="rmpAbas" Skin="Hay" SelectedIndex="1">

<Tabs>

<telerik:RadTab runat="server" PageViewID="rpv"

Text="Campos 1">

</telerik:RadTab>

<telerik:RadTab runat="server" PageViewID="RadPageView2" Text="Campos 2"

Selected="True">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

</div>

<asp:HiddenField ID="hidCodigoInterno" runat="server" />

<asp:HiddenField ID="hidIndexRowGrid" runat="server" />

</form>

</body>

</html>

The current CSS being applied:

body

{

margin:0;

padding:0;

height:100%;

width: 100%;

}

.GridLogos

{

height:100%;

}

.CampoTexto

{

margin: 6px;

}

#campos

{

width: 100%;

margin-left: auto;

margin-right: auto;

}

#grid

{

float:left

}

There are 2 images attached to this thread: layoutbig.jpg is the current layout; desiredlayout.jpg is a mockup of the desired result.

Most likely, this solution won't be achieved without Javascript code for the resize function, here's a crappy example of a Javascript of my own:

$telerik.$(window).bind("resize", Resize);

$telerik.$(document).ready(function () { Resize(); });

function Resize()

{

var grid = $find("rgUsuarios");

var tabstrip = $find("rmpPaginas");

var tabheaders = $find("rmpAbas");

var gridHeight = ($(window).height() / 2) - tabheaders.get_element().style.height;

var heightGrid = (window.innerHeight / 2);

grid.get_element().style.height = heightGrid + "px";

tabheaders.repaint();

grid.repaint();

tabstrip.repaint();

}

Please, any advices in order to achieve this layout?

Split page height between RadGrid and RadMultiPage

1 Answer, 1 is accepted