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

How can I hive the sliding pannel bar when I click on the page ?

1 Answer 36 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Dae Kim
Top achievements
Rank 1
Dae Kim asked on 28 Jun 2010, 10:42 AM
Hello,
I am novice telerik radControl user. I used telerik radPannelbar . and Its work properly.I used this:
http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/slidingpanelbar/defaultcs.aspx

I want to hide the menu div (Pannel bar) when I click anywhere on page.
How can I hide the "sliding pannel bar" when I click on the page ?


1 Answer, 1 is accepted

Sort by
0
Nikolay Tsenkov
Telerik team
answered on 01 Jul 2010, 02:50 PM
Hello Dae Kim,

You can achieve this by slightly modifying the JavaScript of the example.
Here is something that should work for you:
var panelDomElement = $get('<%=RadPanelBar1.ClientID %>');
var timage = $get('<%= tbimage.ClientID %>');
 
if (panelDomElement)
{
    SetUpAnimation(timage.id, Telerik.Web.UI.jSlideDirection.Right, panelDomElement);
}
 
var panelDomElementRight = $get('<%=RadPanelBar2.ClientID %>');
var timageRight = $get('<%= tbimageRight.ClientID %>');
 
if (panelDomElementRight)
{
    SetUpAnimation(timageRight.id, Telerik.Web.UI.jSlideDirection.Left, panelDomElementRight);
}
function SetUpAnimation(image, direction,element)
{
    element.style.position = "relative";
    var slider = document.getElementById(image);
  
    var expanded = false;
     
    var expandAnimation =new Telerik.Web.UI.AnimationSettings({});
    var collapseAnimation = new Telerik.Web.UI.AnimationSettings({});
     
 var slide = new Telerik.Web.UI.jSlide(element, expandAnimation, collapseAnimation, false);
  
    slide.initialize();
     
    slide.set_direction(direction);
 
    $telerik.$(slider).click(function (event) {
 
        element.parentNode.style.visibility="visible";
        element.parentNode.style.display="block";
        if(!expanded) {
            slide.expand();
        }
        else {
            slide.collapse();
        }
        expanded=!expanded;
 
        var collapseSlide=function () {
            slide.collapse();
            expanded=false;
            $telerik.$(document).unbind('click',collapseSlide);
        };
 
        $telerik.$(document).bind('click',collapseSlide);
        event.stopPropagation();
        return false;
    });
}

Hope this will help you!


Regards,
Nikolay Tsenkov
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
PanelBar
Asked by
Dae Kim
Top achievements
Rank 1
Answers by
Nikolay Tsenkov
Telerik team
Share this question
or