Hi,
I'm getting close - but I'm having an issue with the positioning being consistant. Also, I'd like to be able to click as well as hover - (since I'm using jquery.hoverIntent.js)
<telerik:RadPanelBar runat="server" ID="itemToolbar" Width="231px" Height="500px" ExpandMode="SingleExpandedItem" AllowCollapseAllItems="true"> |
<DataBindings> |
<telerik:RadPanelItemBinding CssClass="anItem" Depth="1" /> |
</DataBindings> |
</telerik:RadPanelBar> |
<telerik:RadContextMenu ID="itemMenu" runat="server" OnClientItemClicked="subItemClicked" /> |
$(document).ready(function() { |
var isShown = false; |
var hoverIntentConfig = { |
sensitivity: 1, |
interval: 200, // number = milliseconds for onMouseOver polling interval |
over: function(e) { |
var itemName = $(this).text(); |
var panelBar = $find("<%= itemToolbar.ClientID %>"); |
var theItem = panelBar.findItemByText(itemName); |
if (theItem != null) { |
showItemMenu(theItem.get_element(), itemName); |
} |
}, // function = onMouseOver callback (REQUIRED) |
timeout: 500, // number = milliseconds delay before onMouseOut |
out: function(e) { |
} // function = onMouseOut callback (REQUIRED) |
}; |
// Setup the hoverIntent for every item in the panelBar |
$('.anItem').hoverIntent(config); |
}); |
var oldItem = null; |
var isCalled = false; |
function showItemMenu(targetControl, itemName) { |
var theMenu = $find("<%= itemMenu.ClientID %>"); |
theMenu.removeTargetElement(targetControl); |
isCalled = true; |
$.ajax({ |
type: 'POST', |
url: "SamplePage.aspx/GetItemList", |
data: "{'itemName':'" + itemName+ "'}", |
contentType: "application/json; charset=utf-8", |
dataType: "json", |
success: function(result) { |
if (isCalled == true) { |
var menu = $find("<%= itemMenu.ClientID %>"); |
menu.trackChanges(); |
// Empty the context menu out |
menu.get_items().clear(); |
var resultItems = result.d.split(","); |
for (var i = 0; i < resultItems.length; i += 1) { |
var subItem = new Telerik.Web.UI.RadMenuItem(); |
subItem .set_text(resultItems[i]); |
menu.get_items().add(subItem); |
} |
menu.commitChanges(); |
oldItem = targetControl; |
menu.addTargetElement(targetControl); |
var offset = $(targetControl).offset(); |
menu.showAt(offset.left + 50, offset.top); |
isCalled = false; |
} |
}, |
error: function(result) { |
if (isCalled == true) { |
alert(result.status + " " + result.statusText); |
isCalled = false; |
} |
} |
}); |
} |
Sometimes it'll work great, but then other times - the position of the menu is all off. I'm not sure why ..
Anyone have any advice?
Thanks,
Kori