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

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

6 Answers 383 Views

ToolBar

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

6 Answers, 1 is accepted

answered on 29 Jul 2010, 07:04 AM

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">

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

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

item.hideDropDown();

}
}
</script>

answered on 29 Jul 2010, 02:57 PM

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!

answered on 05 Aug 2010, 08:35 AM

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>

answered on 05 Aug 2010, 01:41 PM

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