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

Splitbar drag events

1 Answer 21 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
pavan
Top achievements
Rank 1
pavan asked on 28 Jul 2010, 03:36 PM
Hello every one,

        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);

 

}

 

}

 

 

}

1 Answer, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 03 Aug 2010, 09:14 AM
Hi Pavan,

I examined the provided code and noticed that you have used private methods of the RadSplitter's and RadPane's client-side APIs (methods and properties starting with "_" are considered private). Private methods are intended for internal use and might require the execution of additional functionality and using them may cause an unexpected behavior.

Please, rework your code to use public methods only and you should not experiencing any problems. If the problem still exists, however, could you prepare a sample runnable project that demonstrates the problem and send it so we can investigate it further?


All the best,
Dobromir
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
Tags
Splitter
Asked by
pavan
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
Share this question
or