Set Splitter Height on Validation failure

2 posts, 0 answers
  1. Tarang
    Tarang avatar
    11 posts
    Member since:
    Jun 2013

    Posted 13 Jul 2013 Link to this post

    Hi,

     I've a Master Page containing splitter with two panes.. Left pane is for menu and right pane is for content pages... I've set it to work when you update your content page and which is longer than usual then re set the height of the splitter so that we can see full page. The problem comes when validaition fires on the page,I've to show them in validation summary, at that time splitter size does not get changed and hence hiding bottom portion of the page.

    I am attaching files for it. 

    In SplitterDemo page... Selecting Check box will show hidden panel with long contents. This time splitter's size is changed. Which is desired.
    But 
    Problem 1. When un selecting check box - panel hides but spliiter's size is not changes. 
    Problem 2. After selecting check box - click on button "Click Me' to fire validation. Now since validation summary gets displayed and bottom text boxes gets hidden.

    P.S - I do not want to set scrolling = "Y" as this will brings up two scrolls and user gets confuse about it.

    My Master Page:

    <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="RadControlsWebApp.Site" %>
     
    <!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="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.map"></script>
        <link rel="Stylesheet" type="text/css" href="../App_Themes/Default/Application.css" />
        <asp:ContentPlaceHolder ID="cnthead" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadAjaxManager ID="ram" runat="server">
        </telerik:RadAjaxManager>
        <telerik:RadScriptManager ID="rsm" runat="server">
            <CompositeScript>
                <Scripts>
                     <asp:ScriptReference Path="~/Content/Scripts/Common.js" />
                </Scripts>
            </CompositeScript>
        </telerik:RadScriptManager>
        <telerik:RadScriptBlock ID="rtsb" runat="server">
            <script type="text/javascript">
     
                CheckSplitterSize = function () {
                    var splitter = $find("<%= RadSplitter1.ClientID %>");
                    var pane = splitter.getPaneById('<%= contentPane.ClientID %>');
                    var height = pane.getContentElement().scrollHeight;
                    splitter.set_height(height);
                    pane.set_height(height);
                }
     
                SplitterLoaded = function (splitter, arg) {
                    //alert('in SplitterLoaded ');
                    var pane = splitter.getPaneById('<%= contentPane.ClientID %>');
                    var height = pane.getContentElement().scrollHeight; splitter.set_height(height); pane.set_height(height);
                }
     
                Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function (sender, e) {
                    $get("<%= appLoadingPanel.ClientID %>").style.height = document.documentElement.clientHeight + "px";
                    var loadingImage = document.getElementById('<%= appLoadingPanel.FindControl("imgLoading").ClientID %>');
                    $.showInCenter(loadingImage);
                    if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
                        $get("<%= appLoadingPanel.ClientID %>").style.height = document.documentElement.scrollHeight + "px";
                    }
                });
     
            </script>
        </telerik:RadScriptBlock>
        <telerik:RadWindowManager ID="rwm" runat="server" Style="z-index: 21000" />
        <asp:ContentPlaceHolder ID="ScriptPlaceHolder" runat="server">
        </asp:ContentPlaceHolder>
        <table cellpadding="0" cellspacing="0" style="border-style: solid; width: 100%; background-color: White;">
            <tr>
                <td style="width: 100%;">
                    <p>
                        This is header.
                    </p>
                </td>
            </tr>
            <tr>
                <td style="width: 100%;">
                    <asp:ContentPlaceHolder ID="cphTopPage" runat="server">
                    </asp:ContentPlaceHolder>
                </td>
            </tr>
            <tr>
                <td style="width: 100%;">
                    <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="400px"
                        SkinID="Sunset" OnClientLoaded="SplitterLoaded">
                        <telerik:RadPane ID="navigationPane" runat="server" Width="15%" MinWidth="100" Scrolling="None"
                            Height="100%">
                            <asp:Panel ID="pnlLeftTreeView" runat="server" Height="100%" CssClass="ScrollingMenu">
                                <telerik:RadPanelBar ID="pnlBarLeftNav" runat="server" Width="100%" ExpandMode="SingleExpandedItem"
                                    Skin="Telerik">
                                </telerik:RadPanelBar>
                            </asp:Panel>
                        </telerik:RadPane>
                        <telerik:RadSplitBar ID="RadSplitbar1" runat="server" Height="100%" CollapseMode="Forward">
                        </telerik:RadSplitBar>
                        <telerik:RadPane ID="contentPane" runat="server" Height="100%" Width="85%"
                            ShowContentDuringLoad="false"  Scrolling="None">
                            <table style="width: 100%;">
                                <tr>
                                    <td>
                                        <asp:ValidationSummary ID="vsMain" runat="server" DisplayMode="BulletList" CssClass="ValidationSummary" />
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left">
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right" valign="top">
                                        <asp:ContentPlaceHolder ID="cphRadButtons" runat="server">
                                        </asp:ContentPlaceHolder>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:ContentPlaceHolder ID="cphContent" runat="server">
                                        </asp:ContentPlaceHolder>
                                    </td>
                                </tr>
                            </table>
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        This is site footer.
                    </p>
                </td>
            </tr>
        </table>
        <telerik:RadAjaxLoadingPanel ID="appLoadingPanel" runat="server" IsSticky="true"
            Transparency="50" ClientIDMode="Static" BackgroundPosition="Center" CssClass="LoadingPanel"
            ZIndex="100000">
            <div style="height: 100%; width: 100%; background-color: #fff;">
                <asp:Image ID="imgLoading" runat="server" AlternateText="Loading" SkinID="sknLoading" />
            </div>
        </telerik:RadAjaxLoadingPanel>
        </form>
    </body>
    </html>

    My Content Page (.aspx):

    <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master"
        CodeBehind="SplitterDemo.aspx.vb" Inherits="RadControlsWebApp.SplitterDemo" %>
     
    <asp:Content ID="Content1" ContentPlaceHolderID="cnthead" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ScriptPlaceHolder" runat="server">
        <telerik:RadScriptBlock ID="scr" runat="server">
            <script type="text/javascript">
                OnRequestEnd = function (sender, arg) {
                    CheckSplitterSize();
                }
            </script>
        </telerik:RadScriptBlock>
    </asp:Content>
    <asp:Content ID="Content3" ContentPlaceHolderID="cphTopPage" runat="server">
    </asp:Content>
    <asp:Content ID="Content4" ContentPlaceHolderID="cphRadButtons" runat="server">
        <div>
            <telerik:RadAjaxPanel ID="rapContent" runat="server" LoadingPanelID="appLoadingPanel">
                <asp:Button ID="btnClickMe" runat="server" Text="Click Me" />
            </telerik:RadAjaxPanel>
        </div>
    </asp:Content>
    <asp:Content ID="Content5" ContentPlaceHolderID="cphContent" runat="server">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="appLoadingPanel"
            ClientEvents-OnResponseEnd="OnRequestEnd">
            <asp:CheckBox ID="chkSelect" runat="server" Text="Show/Hide Panel" AutoPostBack="true" />
            <asp:Panel ID="pnlHiddenPanel" runat="server" Visible="false">
                <div style="height: 800px">
                    This is very long text.
                    <br />
                    <asp:Label ID="lblSelect" runat="server" />
                    <br />
                    <asp:DropDownList ID="drpSelect" runat="server" AutoPostBack="true">
                        <asp:ListItem Text="C#" Value="C#" />
                        <asp:ListItem Text="Asp.Net" Value="Asp.Net" />
                        <asp:ListItem Text="SQL" Value="SQL" />
                        <asp:ListItem Text="Telerik" Value="Telerik" />
                    </asp:DropDownList>
                </div>
            </asp:Panel>
            <br />
            Name:
            <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="req1" runat="server" ControlToValidate="txtName"
                ErrorMessage="Name required" Text="!" ForeColor="Red"></asp:RequiredFieldValidator>
            <br />
            Last Name:
            <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtLastName"
                ErrorMessage="Last Name required" Text="!" ForeColor="Red"></asp:RequiredFieldValidator>
            <br />
            Age:
            <asp:TextBox ID="txtAge" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtAge"
                ErrorMessage="Age required" Text="!" ForeColor="Red"></asp:RequiredFieldValidator>
        </telerik:RadAjaxPanel>
    </asp:Content>
    Content Page Code Behind:
    Public Class SplitterDemo
        Inherits System.Web.UI.Page
     
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
     
        End Sub
     
        Private Sub btnClickMe_Click(sender As Object, e As System.EventArgs) Handles btnClickMe.Click
     
        End Sub
     
        Private Sub chkSElect_CheckedChanged(sender As Object, e As System.EventArgs) Handles chkSelect.CheckedChanged
            ConsumeTime(2)
            pnlHiddenPanel.Visible = CBool(chkSelect.Checked)
        End Sub
     
        Private Sub ConsumeTime(ByVal seconds As Integer)
            Dim ticker As DateTime = DateTime.Now()
     
            While DateDiff(DateInterval.Second, ticker, DateTime.Now) <= seconds
     
            End While
        End Sub
     
        Private Sub drpSelect_SelectedIndexChanged(sender As Object, e As System.EventArgs) Handles drpSelect.SelectedIndexChanged
            lblSelect.Text = "You selected :" + drpSelect.SelectedValue
        End Sub
    End Class
    Common.js :
    $.getRadWindow = function (win) {
        var oWindow = null;
        if (win.radWindow) oWindow = win.radWindow;
        else if (win.frameElement && win.frameElement.radWindow) oWindow = win.frameElement.radWindow;
        return oWindow;
    }
     
     
    $.showRadWindow = function (id) {
        var window = $find(id);
        if (window != null) {
            window.set_status("Ready");
            window.show();
            return true;
        }
        else
            return false;
    }
     
     
    $.showInCenter = function (ctrl) {
        posY = $.getScrollOffset() + ($.getInnerHeight() / 2) - (ctrl.height / 2);
        posX = document.documentElement.clientWidth / 2 - (ctrl.width / 2);
        $(ctrl).css({ position: "relative", top: posY + "px", left: posX + "px" });
    }
     
    $.getInnerHeight = function () {
        var y;
        if (self.innerHeight) // all except Explorer
            y = self.innerHeight;
        else if (document.documentElement && document.documentElement.clientHeight)
            y = document.documentElement.clientHeight;
        else if (document.body) // other Explorers
            y = document.body.clientHeight;
        return (y);
    }
     
    $.getScrollOffset = function () {
        var y;
        if (self.pageYOffset)
            y = self.pageYOffset;
        else if (document.documentElement && document.documentElement.scrollTop)
            y = document.documentElement.scrollTop;
        else if (document.body)
            y = document.body.scrollTop;
        return (y);
    }
    application.css :
    body
    {
        background-color: #C0C0C0;
        margin: 0;
        padding: 2px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-style: normal;
        line-height: 18px;
        color: #333333;
        font-weight: normal;
        font-size: 12px;
        height: auto;
    }
     
    a
    {
        text-decoration: underline;
    }
     
    a:hover
    {
        color: #d0981b;
    }
     
    .ValidationSummary
    {
        border: 2px solid red;
        color: red;
        margin: 5px 0px;
        padding: 15px;
        background: #fff url(images/errors.png) no-repeat 5px 50%;
    }
     
    .ValidationSummary ul
    {
        margin: 0;
        padding: 0;
        margin-left: 60px;
        list-style-type: square;
    }
     
    .InformationMessage
    {
        border: 2px solid yellow;
        color: maroon;
        margin: 5px 0px;
        padding: 15px;
        background: #fff url(images/information.png) no-repeat 5px 50%;
    }
     
    .InformationMessage li
    {
        margin: 0;
        padding: 0;
        margin-left: 60px;
        list-style-type: square;
    }
     
    .ScrollingDiv
    {
        position: relative;
        border-color: #4682b4;
        border-style: solid;
        background-color: #FFFFCC;
    }
     
    .ScrollingMenu
    {
        position: relative;
    }
     
    .LoadingPanel
    {
        z-index: 100000;
        background-color: #ffffdd;
        border-color: Gray;
        position:absolute;
        height:100%;
        width:100%;
        top:0px;
        left:0px;
    }
    Image.skin:
    <asp:Image SkinID="sknLoading" runat="server" ImageUrl="Images/Loading.gif" />
    Attaching Loading.gif What i am missing?? How can i resolve both problems?
  2. Tarang
    Tarang avatar
    11 posts
    Member since:
    Jun 2013

    Posted 15 Jul 2013 Link to this post

    I got the solution for problem 2.
    It was so simple and i was clearly not thinking about it yesterday. The solution is to track Page_ClientValidate function. If any validation fires resize the splitter.


    here is the client side function that does that...
    (function ($) {
                    if (typeof (Page_ClientValidate) !== "undefined") {
                        var method = Page_ClientValidate;
                        Page_ClientValidate = function (validationGroup) {
                            var result = method.apply(this, [validationGroup]);
                            if (result == false) {
                                CheckSplitterSize();
                            }
                            return result;
                        };
                    };
                })();
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top