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

Set Splitter Height on Validation failure

1 Answer 96 Views

Splitter

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

Tarang asked on 14 Jul 2013, 02:34 AM

Loading.gif

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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?

1 Answer, 1 is accepted

answered on 15 Jul 2013, 02:08 PM

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;

};

})();