Auto increase of Rad Splitter Height

5 posts, 1 answers
  1. Padmaja
    Padmaja avatar
    12 posts
    Member since:
    Dec 2008

    Posted 13 Jul 2010 Link to this post

    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">
    <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">
                                    <asp:HyperLink ID="HyperLink5" runat="server" Text="© Copyright 2000-2010 Inspire-Tech Pte Ltd. All Rights Reserved."
                                        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.

     

  2. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 15 Jul 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Padmaja
    Padmaja avatar
    12 posts
    Member since:
    Dec 2008

    Posted 15 Jul 2010 Link to this post

    Hi Telerik,

    Thank you very much. Working fine
  5. Padmaja
    Padmaja avatar
    12 posts
    Member since:
    Dec 2008

    Posted 19 Jul 2010 Link to this post

    Hi Telerik,
    last time i said its working, But am always getting the javascript error "Object doesn't support this property or method" and width or height was not readjusting to content of the page. when i debug error was showing in the below line

     var pane = splitter.getPaneById('<%= RadPaneContent.ClientID %>');

    Could you please guide me what could be the reson this was happening..............
  6. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 22 Jul 2010 Link to this post

    Hello Padmaja,
    Unfortunately, the information you have provided is not enough for me to point you in the right direction. It would be best if you open a new support ticket and send me a running test project that demonstrates the problem you have.

    Greetings,
    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017