Make the RadPanelBar Timeout OnBlur

Thread is closed for posting
3 posts, 0 answers
  1. Joe
    Joe avatar
    6 posts
    Member since:
    Dec 2007

    Posted 31 Mar 2008 Link to this post

    Requirements: RadRanelbar for ASP.NET

    RadRanelbar version

    4.x

    .NET version

    2.0

    Visual Studio version

    2005

    programming language

    JavaScript

    browser support

    all browsers supported by RadControls

     
  2. PROJECT DESCRIPTION

    The following applies to the Rad Panelbar Version 4.x. This takes the existing Sliding Panelbar example and incorporates the onblur and onmouseover client side functionality:
    1. Take your already functional Rad Panelbar and add OnClientMouseOver="PreventTimeOut()" and OnClientMouseOut="HideMenu()"
    2. Replace your javascript with the javascript in the attached file
    3. Tweak the 3 variables within the very first 5 lines of code: 1) indicate the name of the button triggering the menu to hide/unhide on client click, 2) indicate the name of the PanelBar control and 3) indicate how long the menu should stay in place before timing out, in case the user moves the mouse away from the control.
  • CSurieux
    CSurieux avatar
    465 posts
    Member since:
    Jan 2007

    Posted 03 Dec 2008 Link to this post

    Hello,

    I am using the last Q3 2008 version of radcontrols for ajax.net, I followed the instructions but I get an error in javascript when browser load my page:
    'RadControlsNamespace is undefined'

    Is this sample Ok for last version ?

    CS
  • CSurieux
    CSurieux avatar
    465 posts
    Member since:
    Jan 2007

    Posted 03 Dec 2008 Link to this post

    It was old version, these calls nomore exists.
    I finally adapted it to Q3 2008, using something like

    var expanded = false;
    var panelDomElement =  -same as previous sample-;
    var  slide;
    var slider-same as previous sample-;
    var timeout;
    var timerlength = 3000; // how long before the menu should time-out!

    function ShowMenu() {
        PreventTimeOut();
        if (!expanded) {
            SetUpAnimation(); // call the function that will make the menu appear           
            expanded = true;
        }
    }

    function PreventTimeOut(panelbar, args) {
        window.clearTimeout(timeout);
    }

    function HideMenu(panelbar, args) {
        timeout = window.setTimeout(
                function() {
                    slide.collapse();
                    expanded = false;
                }, timerlength);
    }

    function SetUpAnimation() {
        panelDomElement.style.position = "relative";
        if (!slide) {
            var expandAnimation = new Telerik.Web.UI.AnimationSettings({});
            var collapseAnimation = new Telerik.Web.UI.AnimationSettings({});
            slide = new Telerik.Web.UI.Slide(panelDomElement, expandAnimation, collapseAnimation, false);
        slide.initialize();
        slide.set_direction(Telerik.Web.UI.SlideDirection.Right);
        }
        slider.onclick = function() {
            panelDomElement.parentNode.style.visibility = "visible";
            panelDomElement.parentNode.style.display = "block";
            if (!expanded) {
                slide.expand();
            }
            else {
                slide.collapse();
            }
            expanded = !expanded;
            return false;
        }
    }

    Every improvment welcome.
    CS

  • Back to Top