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

[Solved] Split page height between RadGrid and RadMultiPage

1 Answer 109 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?

1 Answer, 1 is accepted

answered on 21 Sep 2011, 07:52 PM

Hi Pedro,

The following code library example demonstrates several alternative ways to set height to a RadGrid with Javascript on the client. Please examine it and let me know if it helps to achieve the desired functionality.
http://www.telerik.com/community/code-library/aspnet-ajax/grid/how-to-set-radgrid-height-client-side-with-javascript.aspx

Best wishes,
Pavlina
the Telerik team

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 their blog feed now