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
6 Answers, 1 is accepted
Rank 1
Rank 1
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>
Rank 1
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!
Rank 1
if (Telerik.Web.UI.IRadToolBarDropDownItem.isInstanceOfType(parent)){ //Rest of code here}Hopes it helps someone.
Rank 1
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>
Rank 1
<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