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

[Dae Kim]

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 ?

[Nikolay Tsenkov]

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