can i expand the toolbar dropdown when hovering the mouse over it and collapse the toolbar drop down when hovering the mouse out of it

7 posts, 0 answers
  1. Mohammad
    Mohammad avatar
    12 posts
    Member since:
    Jun 2009

    Posted 28 Jul 2010 Link to this post

    hi alll

    how are you

    i wish anyone could help me in this problem

    i have a rad toolbar on an aspx page.

    the toolbar contains one rad toolbar dropdown as a child

    the rad toolbar dropdown contains two rad toolbar buttons as itschilds

    i want the rad toolbar dropdown to expand when i hover the mouse over it and show its child buttons
    and when i hover the mouse out of the drop down i want it to collapse

    also i want to be able to hover the mouse over the two child toolbar buttons of the toolbar dropdown when the dropdown is opened inorder to click on one of the buttons

    i know this is available in the rad menu

    but can it be done in the rad toolbar

    thanks  alot
  2. Sébastien
    Sébastien avatar
    55 posts
    Member since:
    Jun 2010

    Posted 28 Jul 2010 Link to this post

    I'm looking forward to something like this also, but it didn't find any collapse or expand function for the radToolBar DropDown and SplitButton. I still don't have an answer to this. You might take a look at my post (SplitButton Collapse function ??). When I have an answer you  might have a beginning of answer for your problem.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mohammad
    Mohammad avatar
    12 posts
    Member since:
    Jun 2009

    Posted 29 Jul 2010 Link to this post

    thanks sebastien for ur reply

    i have used this code for expanding and collapsing the toolbar dropdown and it also worked for the split button

    the problem is that if i expand the toolbar dropdown when i hover the mouse over it and then hover the mouse over the toolbar dropdown child buttons the OnClientMouseOut event fires and closes the toolbar dropdown . i cant keep the toolbar dropdown expanded while hovering over it childe buttons inorder to press one

    hope this might help you

    thanks a lot

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication11._Default" %>

    <%@ Register Assembly="Telerik.Web.UI, Version=2009.2.826.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
        Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title></title>
      
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
     <telerik:RadToolBar ID="MainToolbar" runat="server" OnClientMouseOver="ShowDropDown" OnClientMouseOut="HideDropDown">
        <Items>
        <telerik:RadToolBarDropDown Text="DropDown" runat="server">
        <Buttons>
        <telerik:RadToolBarButton Value="Button1" Text="Button1" runat="server"></telerik:RadToolBarButton>
        <telerik:RadToolBarButton Value="Button2" Text="Button2" runat="server"></telerik:RadToolBarButton>
        </Buttons>
        </telerik:RadToolBarDropDown>
            <telerik:RadToolBarButton Value="Button3" Text="Button3" runat="server"></telerik:RadToolBarButton>
            <telerik:RadToolBarSplitButton Value="SplitButton" Text="SpliteButton" runat="server">
            <Buttons>
            <telerik:RadToolBarButton Value="Button4" Text="Button4" runat="server"></telerik:RadToolBarButton>
            <telerik:RadToolBarButton Value="Button5" Text="Button5" runat="server"></telerik:RadToolBarButton>
            </Buttons>
            </telerik:RadToolBarSplitButton>
        </Items>
        </telerik:RadToolBar>

       </div>
        </form>
    </body>
    </html>

    <script type="text/javascript">
        function ShowDropDown(toolbar, args) {
            var item = args.get_item();
            if (item._isDropDownItem()) {
                item.showDropDown();
            }
        }

        function HideDropDown(toolbar, args) {
            var item = args.get_item();
            var s = args.get_domEvent();
            if (item._isDropDownItem()) {

                item.hideDropDown();

            }
        }
    </script>

  5. Sébastien
    Sébastien avatar
    55 posts
    Member since:
    Jun 2010

    Posted 29 Jul 2010 Link to this post

    Yippee! I got something. It might not be the best solution but it's working well. Here are the javascript function I used, mostly upgraded your's :

    function getParentItem(p_group) {
        var parent;
        switch (p_group) {
            case "groupPrint":
                 parent = getToolBar().findItemByValue("btnPrint");
                 break;
            case "groupEdit":
                 parent = getToolBar().get_items().getItem(7);
                 break;
       }
       return parent;
    }
     
    function toolBarOnMouseOut(sender, args) {
        var item = args.get_item();
        if (item._isDropDownItem()) {
            $get("hideDropDown").value = true;
            setTimeout(function () { hideDropDown(item) }, 500);
        }
        else if (item.get_group() != "") {
            $get("hideDropDown").value = true;
            setTimeout(function () { hideDropDown(getParentItem(item.get_group())) }, 500);
        }
    }
     
    function toolBarOnMouseOver(sender, args) {
        var item = args.get_item();
        if (item._isDropDownItem()) {
            item.showDropDown();
        }
        else if (item.get_group() != "") {
            $get("hideDropDown").value = false;
        }
    }
     
    function hideDropDown(p_item) {
        if ($get("hideDropDown").value == true.toString()) {
            if (p_item._isDropDownItem()) {
                p_item.hideDropDown();
            }
         $get("hideDropDown").value = false;
         }
    }

    The idea : When I mouseOver I show the dropDown, wich was working. On mouseOver I call the hideDropDown function, but I use setTimeout() to delay it. I have an html hidden input named "hideDropDown" wich I initialize at true when I call the delayed hideDropDown(). On MouseOver I added a condition to see if it is child item, if it is I put the hidden input to false so that when the function will be called it will not hide the dropDown.

    Upgrade : As of now I use the Group attribute of an item to check if it is a child item and to get his parent element. Of course, the group attribute must be set for all of the child items and you will need to modify the getParentItem() function for your need. I have done it like this only because I can't find a function that return me the parent item. If you know an properties or a function that return the parent item, I would really like to know.

    Hopes it help!
  6. Sébastien
    Sébastien avatar
    55 posts
    Member since:
    Jun 2010

    Posted 04 Aug 2010 Link to this post

    I modified my code using the get_parent() method that Telerik team told me about. I removed the getParentItem function I use this line of code to verifeid that it was a valid parent :

    if (Telerik.Web.UI.IRadToolBarDropDownItem.isInstanceOfType(parent)){
        //Rest of code here
    }

    Hopes it helps someone.
  7. Mohammad
    Mohammad avatar
    12 posts
    Member since:
    Jun 2009

    Posted 05 Aug 2010 Link to this post

    thanks sebastian for ur reply

    but i still cant make the toolbar behaves in the same manner as the menu when hovering over the raddropdown or when hovering out of the raddropdown

    and i dont know why no one of the telerik team has responded to my problem

    i wish anyone could help in this problem

    thanks a lot

    here is my code:

     <telerik:RadToolBar ID="MainToolbar" runat="server" OnClientMouseOver="ShowDropDown" OnClientMouseOut="HideDropDown">
        <Items>
        <telerik:RadToolBarDropDown Text="DropDown" runat="server">
        <Buttons>
        <telerik:RadToolBarButton Value="Button1" Text="Button1" runat="server"></telerik:RadToolBarButton>
        <telerik:RadToolBarButton Value="Button2" Text="Button2" runat="server"></telerik:RadToolBarButton>
        </Buttons>
        </telerik:RadToolBarDropDown>
            <telerik:RadToolBarButton Value="Button3" Text="Button3" runat="server"></telerik:RadToolBarButton>
            <telerik:RadToolBarSplitButton Value="SplitButton" Text="SpliteButton" runat="server">
            <Buttons>
            <telerik:RadToolBarButton Value="Button4" Text="Button4" runat="server"></telerik:RadToolBarButton>
            <telerik:RadToolBarButton Value="Button5" Text="Button5" runat="server"></telerik:RadToolBarButton>
            </Buttons>
            </telerik:RadToolBarSplitButton>
        </Items>
        </telerik:RadToolBar>

    <script type="text/javascript">
        function ShowDropDown(toolbar, args) {
            var item = args.get_item();
            if (item._isDropDownItem()) {
                item.showDropDown();
            } else if (item._isDropDownChild()) {
                item.get_parent().showDropDown();
            }
        }
       

        function HideDropDown(toolbar, args) {
            var item = args.get_item();
            if (item._isDropDownItem()) {
                item.hideDropDown();
            } else if (item._isDropDownChild()) {
                item.get_parent().hideDropDown();
            }
        }
    </script>

  8. Sébastien
    Sébastien avatar
    55 posts
    Member since:
    Jun 2010

    Posted 05 Aug 2010 Link to this post

    OK, with the same code, I have been able to do it, just change the javascript for this :
    <script type="text/javascript">
    function ShowDropDown(toolbar, args) {
        //On Mouse Over
        var item = args.get_item();
        if (item._isDropDownItem()) {
            // It's a DropDown so show it!
            item.showDropDown();
        } else if (item._isDropDownChild()) {
            //item.get_parent().showDropDown();
            // It's a DropDownChild so cancel the imminent hidding function
            $get("hideDropDown").value = false;
        }
    }
     
     
    function HideDropDown(toolbar, args) {
        // On Mouse Out
        var item = args.get_item();
        if (item._isDropDownItem()) {
            //item.hideDropDown();
            // It's a DropDown so prepare to hide it in 0.5 seconds
            $get("hideDropDown").value = true;
            setTimeout(function () { hiding(item) }, 500);
     
        } else if (item._isDropDownChild()) {
            //item.get_parent().hideDropDown();
            // It's a DropDownChild so prepare to hide his parent in 0.5 seconds
            $get("hideDropDown").value = true;
            setTimeout(function () { hiding(item.get_parent()) }, 500);
        }
    }
     
    function hiding(dropDown) {
        // First, check if the event has not been canceled by the MouseOver
        // of a DropDownChild.
        if ($get("hideDropDown").value == true.toString()) {
            // Hide the DropDown
            dropDown.hideDropDown();
            $get("hideDropDown").value = false;
        }
    }
    </script>

    They key in my logic was to delay the the hideDropDown(). The hideDropDown method MUST be in a different function then the event. In doing this when I MouseOut, I can tell the function to execute in a certain amount of times (I used 0.5 seconds, but it could be less then that). Doing it like this lets me cancel the execution of the hiding function (using an input of type hidden) when I MouseOver a ChildElement so it will only close when I MousOut and I don't MouseOver in the next 0.5 seconds. If you want the behavior to not be delayed just set the inerval of setTimeout to 1. It will still work, and it will be nearly instantly.

    Thats the best I can do I'm afraid. Hopes it help!
    Sébastien
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017