my page is using frames and i have two grids with in a frame (occupies 80% height and 100% width of the page). i used two panes with in a splitter, to place grids in each pane. Also splitbar between two panes.
Now my requirement is to,
- set the height of splitter according to the height of the frame, so that no vertical scroll bar is visible on page.
- resize splitter and panes accordingly when split bar is dragged upwards and downwards (height of page may be increased).
just after splitter load, when splitter height is set to height of frame:
- when split bar is dragged upwards, first pane height must be decreased with drag and splitter height must remain same
- when splitbar is dragged downwards, height of first pane must be increased and second pane height
- to be decreased if height of first pane is less than its initial height (upto initial height of splitter)
- if height of first pane exceeds its initial height, second pane initial height to be maintained and splitter height to be increased accordingly (so that splitter height exceeds its initial height and page height is also increased)
all the above things working fine. problem occurs when dragging upwards (when the splitter height is greater than its initial height) so that the splitter height would be less than its initial height. i was not able to set the height of splitter at this event.
i am giving you java script i used for this. Please help me in the issue.
at splitter load event.
- i am setting size of splitter according to frame
- getting initial height of splitter and top pane and assigning the value to hidden fields ( when splitter loads for first time)
- getting height of splitter and panes and assigning the value to hidden fields ( each time the splitter is loaded)
java script function for 'OnClientResized' event of first pane:
function
OnPane1Resized()
{
var FrameHeight = document.getElementById("<%= hdnFrameHeight.ClientID %>").value;
var splitter = $find("<%= RadSplitter1.ClientID %>");
var topPane = splitter.getPaneById("<%= RadPane1.ClientID %>");
var btmPane = splitter.getPaneById("<%= RadPane2.ClientID %>");
var sptrHeight = splitter.get_height();
var topPaneHeight = topPane.get_height();
var btmPaneHeight = btmPane.get_height(); // i am setting paneOldHeight to hidden fields on splitter 'load' event
var topPaneOldHeight = parseFloat(document.getElementById("<%= hdnTopPaneOldHeight.ClientID %>").value);
var btmPaneOldHeight = parseFloat(document.getElementById("<%= hdnBtmPaneOldHeight.ClientID %>").value);
var topPaneNewHeight = topPaneHeight;
document.getElementById(
"<%= hdnTopPaneOldHeight.ClientID %>").value = topPaneNewHeight;
var HeightDiff = topPaneNewHeight - topPaneOldHeight;
var resizeSptr = sptrHeight + HeightDiff ;
var resizeBtmPane = btmPaneHeight + HeightDiff ; // i am setting initialHeight to hidden fields when splitter loads for the first time
var initSptrHeight = parseFloat(document.getElementById("<%= hdnInitSptrHeight.ClientID %>").value) ;
var initTopPaneHt = parseFloat(document.getElementById("<%= hdnInitTopPaneHeight.ClientID %>").value );
var OldSptrHt = topPaneOldHeight + btmPaneOldHeight ;
var SpaceHeight = initSptrHeight - OldSptrHt ;
// var btmPaneHeight1 = 0.35 * initSptrHeight;
if(HeightDiff > 0)
{
if (topPaneHeight > initTopPaneHt)
{
if(SpaceHeight >= 1)
{
var b = (resizeSptr - SpaceHeight);
var c = (resizeBtmPane - SpaceHeight);
splitter._setSize(
null,b);
btmPane._setSize(
null,c);
topPane._setSize(
null,topPaneHeight);
}
else
{
splitter._setSize(
null,resizeSptr);
btmPane._setSize(
null,resizeBtmPane);
topPane._setSize(
null,topPaneHeight);
}
}
else
{
}
}
else if(HeightDiff < 0)
{
if (topPaneHeight < initTopPaneHt)
{
var bpHeight = initSptrHeight - topPaneHeight ;
var Diff = sptrHeight - initSptrHeight ;
if (Diff > 1) // this is not working. as a final try i have set to initial size which can be seen below. even this is not working
{
splitter._setSize(
null,initSptrHeight);
topPane._setSize(null,initTopPaneHt);
else
{
splitter._setSize(
null,initSptrHeight);
}
}
else
{
splitter._setSize(
null,resizeSptr);
btmPane._setSize(
null,resizeBtmPane);
topPane._setSize(
null,topPaneHeight);
}
}
}