Splitbar drag events

2 posts, 0 answers
  1. pavan
    pavan avatar
    2 posts
    Member since:
    Jun 2010

    Posted 28 Jul 2010 Link to this post

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

     

    }

     

    }

     

     

    }

  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 03 Aug 2010 Link to this post

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