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

[Solved] Auto increase of Rad Splitter Height

4 Answers 319 Views

Splitter

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

Padmaja asked on 13 Jul 2010, 06:16 AM

Hi Telerik,

Am using the new telerik controls in my web application. But am facing the issue with auto adjustment of RadSplitter.

Am using Splitter and RadPane

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="RR_Web.Site1" %>

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

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

<title></title>

<script type="text/javascript" src="../RR.js"></script>

<link href="App_Themes/Default/Grid.InspireGrid.css" rel="stylesheet" type="text/css" />

<link href="App_Themes/Default/TabStrip.InspireTabStrip.css" rel="stylesheet" type="text/css" />

</head>

<script language="javascript" type="text/javascript">

function pnlRequestStarted(ajaxPanel, eventArgs)

//AJAX

{

var sPath = window.location.pathname;

var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);

for (i = 0; i < document.forms[0].elements.length - 1; i++)

//search for "FILE" textbox where upload filename is stored

//if this field is not empty, meaning that file is being uploaded

//once then, must disable AJAX for the upload to work properly.

//This does not work if the page is using a Wizard and the upload component is not in first wizard step.

if (document.forms[0].elements[i].type == "file")

eventArgs.EnableAjax = false;

//TODO: these pages require file uploading. AJAX must be disabled for upload to work.

if (sPage == "NewScenario.aspx" || sPage == "NewActivation.aspx" || sPage == "ContactsMgmt.aspx")

eventArgs.EnableAjax = false;

}

</script>

<body>

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

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

</asp:ScriptManager>

<table border="0" cellspacing="0" cellpadding="0" class="HeaderBg" width="100%">

<tr style="height: 50px">

<td class="HeaderBg" style="width: 100%">

<table border="0" cellspacing="0" cellpadding="0" width="100%">

<tr>

<td width="300px" valign="middle" align="left"> <a style="font-weight: bold; font-size: larger">Welcome to Rapid Recall</a> </td>

<td width="50px" nowrap="nowrap"> </td>

<td valign="middle" align="left">

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

<tr>

<td align="center"><asp:ImageButton ID="btnkNewContact" runat="server" ImageUrl="~/Images/newContact.gif" Visible="false" onclick="btnkNewContact_Click" /></td>

<td align="center"><asp:ImageButton ID="btnkNewScenario" runat="server" ImageUrl="~/Images/newScenario.gif" Visible="false" onclick="btnkNewScenario_Click" /></td>

<td align="center"><asp:ImageButton ID="btnNewActivation" runat="server" ImageUrl="~/Images/newActivation.gif" Visible="false" onclick="btnNewActivation_Click" /></td>

<td align="center"><asp:ImageButton ID="btnhUserMgmt" runat="server" ImageUrl="~/Images/usersMgmt.gif" Visible="false" onclick="btnhUserMgmt_Click" /></td>

</tr>

<tr>

<td><asp:Literal ID="lblNewContact" runat="server" Text="New Contact" Visible="false"></asp:Literal></td>

<td><asp:Literal ID="lblNewScenario" runat="server" Text="New Scenario" Visible="false"></asp:Literal></td>

<td><asp:Literal ID="lblNewActivation" runat="server" Text="New Activation" Visible="false"></asp:Literal></td>

<td><asp:Literal ID="lblUsersMgmt" runat="server" Text="Users Mgmt." Visible="false"></asp:Literal></td>

</tr>

</table>

</td>

<td valign="top" width="200px" align="right"> <asp:Label ID="lblDateTime" runat="server"></asp:Label> </td>

</tr>

</table>

</td>

</tr>

<tr>

<td class="titleBarBg">

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td style="width: 20px; height: 19px;">

<asp:Image ID="Image4" runat="server" ImageUrl="~/Images/pgtitleimage.gif" />

</td>

<td style="width: 400px; height: 19px;" nowrap="nowrap" align="left">

<asp:Label ID="lblTitle" runat="server" CssClass="titleBar"></asp:Label>

</td>

<td width="500px" align="right" valign="middle">

<asp:Label ID="lblUsername" runat="server"></asp:Label> |

<asp:HyperLink ID="hlnkChgPwd" runat="server" NavigateUrl="~/ChangePassword.aspx" Text="Change Password"></asp:HyperLink> |

<asp:HyperLink ID="hlnkAccountInfo" runat="server" NavigateUrl="~/CreateUser.aspx" Text="Account Info"></asp:HyperLink> |

<asp:HyperLink ID="hlnkLogout" runat="server" NavigateUrl="~/Logout.aspx" Text="Logout"></asp:HyperLink>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td valign="top" align="left" width="100%">

<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%">

<telerik:RadPane ID="RadPaneMenus" runat="server" Width="200px" Scrolling="None" MinWidth="250" MaxWidth="250">

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="FullExpandedItem" OnItemClick="RadPanelBar1_ItemClick" Height="100%">

<Items>

<telerik:RadPanelItem Text="Manage Contacts" ImageUrl="Images/mngContacts.png" Visible="false">

<Items>

<telerik:RadPanelItem NavigateUrl="ContactsMgmt.aspx" Text="Manage Contacts" />

<telerik:RadPanelItem NavigateUrl="ImportContacts.aspx" Text="Import Contacts" />

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Scenarios" ImageUrl="Images/mngScenarios.png" Visible="false">

<Items>

<telerik:RadPanelItem NavigateUrl="Scenarios.aspx" Text="Scenarios" />

<telerik:RadPanelItem NavigateUrl="NewScenario.aspx" Text="New Scenario" />

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Activations" ImageUrl="Images/mngActivations.png" Visible="false">

<Items>

<telerik:RadPanelItem NavigateUrl="Activations.aspx" Text="Activations" />

<telerik:RadPanelItem NavigateUrl="NewActivation.aspx" Text="New Activation" />

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Manage Users" ImageUrl="Images/mngUsers.png" Visible="false">

<Items>

<telerik:RadPanelItem NavigateUrl="UserList.aspx" Text="Manage Users" />

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward"></telerik:RadSplitBar>

<telerik:RadPane ID="radPaneContent" runat="server" Width="100%">

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</telerik:RadPane>

</telerik:RadSplitter>

</td>

</tr>

<tr>

<td class="skinfooter">

NavigateUrl="http://www.inspire-tech.com"></asp:HyperLink>

</td>

</tr>

</table>

</form>

</body>

</html>

and RadPanelBar. I want the RadSplitter auto increase to page content. I tried to height Offset attribute still i can't get the results.

Down side am placing my master page code. please check let me know how to set the splitter height auto set to the content place holder height. i don't want to see the vertical scroll bar in content place holder rad pane.

4 Answers, 1 is accepted

Accepted

answered on 15 Jul 2010, 02:02 PM

Hello Padmaja,
When you set Height=100% for the splitter control, you configure it to become 100% of the height of its parent. In this case, the height of the splitter does not depend on the height of its content. From your explanation, I understand that you want to set Height=Auto for the splitter control. Unfortunately, the splitter does not support this setting. You can use the client-side API of the control, however, to get the splitter to become as high as its content. Basically, you can calculate the height of the content using JavaScript and then set the calculated value as height for the splitter. For additional information and sample code, please refer to the following knowledge base article:

http://www.telerik.com/support/kb/aspnet-ajax/splitter/initially-resize-the-radsplitter-according-to-its-content.aspx

Best wishes,
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