Rank 1
Now the problem lies in that the screen boundary detection doesn't work, my context menu is always clipped on the bottom and on the right of the page. The scrollbars apear but the context menu doesn't scroll into view. The code to open the context menu :
DocroomPageController.prototype.ShowContextMenu = function(e, row, LoadDelegate, subparam) {
PageController().PreventContextTimeout();
PageController().HideContextMenu();
var menu = PageController().GetContextMenu();
menu.hide();
if (menu.get_items().get_count() > 0) {
menu.get_items().clear();
}
this.contextevent = e;
if (!subparam) {
LoadDelegate(row);
}
else {
LoadDelegate(row, subparam);
}
menu.show(e);
$telerik.cancelRawEvent(e);
}
DocroomPageController.prototype.ContextCompleteCallback = function(ResponseObject, ResponseAsXml, ResponseAsText) {
var menu = this.GetContextMenu();
var i;
for (i = 0; i < ResponseObject.length; i++) {
var childItem
var exists = false;
if (menu.get_items().getItem(i)) {
exists = true;
childItem = menu.get_items().getItem(i);
childItem.set_text(ResponseObject[i].Text);
childItem.set_value(ResponseObject[i].Value);
}
else {
childItem = new Telerik.Web.UI.RadMenuItem();
childItem.set_text(ResponseObject[i].Text);
childItem.set_value(ResponseObject[i].Value);
}
if (ResponseObject[i].isSeparator == true) {
childItem.set_isSeparator(ResponseObject[i].isSeparator);
}
if (ResponseObject[i].Image) {
// alert(ResponseObject[i].Image);
childItem.set_imageUrl('./Images/' + ResponseObject[i].Image);
}
if (!exists) {
menu.get_items().add(childItem);
}
childItem.set_navigateUrl(ResponseObject[i].NavigateUrl);
if (!childItem.get_visible()) {
childItem.show();
}
}
}
with an example of a loaddelegate :
DocroomPageController.prototype.LoadContextItems =
function(item) {
ContextMenus.GetObjectContextMenuItems(item, delegate(PageController(), PageController().ContextCompleteCallback), delegate(PageController(), PageController().ErrorCompleteCallback));
}
We are using the context menu within pages loaded in a radpane.
4 Answers, 1 is accepted
To have the RadContextMenu shown at the desired location you could use showAt() method. Thus, you can call the ContextMenu at any position on the screen. Here is more information on RadContextMenu objects at the bottom of this help article.
Greetings,
Kate
the Telerik team
Rank 1
I did get to solve it using the menu.showAt.
The trick is however to use the showAt in the callback, instead of ShowContextmenu function :
var
mX = 0;
var
mY = 0;
DocroomPageController.prototype.ShowContextMenu =
function(e, row, LoadDelegate, subparam) {
PageController().PreventContextTimeout();
PageController().HideContextMenu();
var menu = PageController().GetContextMenu();
menu.hide();
if (menu.get_items().get_count() > 0) {
menu.get_items().clear();
}
this.contextevent = e;
if (!subparam) {
LoadDelegate(row);
}
else {
LoadDelegate(row, subparam);
}
//store the positions
mX =
this.GetMousePosition(e).x + this.GetScrollPosition(e).x;
mY =
this.GetMousePosition(e).y + this.GetScrollPosition(e).y;
// menu.showAt(mX, mY);
//menu.show(e);
$telerik.cancelRawEvent(e);
}
DocroomPageController.prototype.ContextCompleteCallback =
function(ResponseObject, ResponseAsXml, ResponseAsText) {
var menu = this.GetContextMenu();
var i;
for (i = 0; i < ResponseObject.length; i++) {
var childItem
var exists = false;
if (menu.get_items().getItem(i)) {
exists =
true;
childItem = menu.get_items().getItem(i);
childItem.set_text(ResponseObject[i].Text);
childItem.set_value(ResponseObject[i].Value);
}
else {
childItem =
new Telerik.Web.UI.RadMenuItem();
childItem.set_text(ResponseObject[i].Text);
childItem.set_value(ResponseObject[i].Value);
}
if (ResponseObject[i].isSeparator == true) {
childItem.set_isSeparator(ResponseObject[i].isSeparator);
}
if (ResponseObject[i].Image) {
// alert(ResponseObject[i].Image);
childItem.set_imageUrl(
'./Images/' + ResponseObject[i].Image);
}
if (!exists) {
menu.get_items().add(childItem);
}
childItem.set_navigateUrl(ResponseObject[i].NavigateUrl);
if (!childItem.get_visible()) {
childItem.show();
}
}
menu.showAt(mX, mY);
}
Rank 1
I'm using the "Default" skin.
I have this same beheaviour in a menu (none context) that uses a slightly altered custom skin, based on the default.
I copied the default skin, and changed the following classes to allow for the menu to be aligned on the right side, but to still have the text in the menu items alligned left :
I added :
.RadMenu_MainNavigation
{
float: right!important
}
And altered (adding the float left and width on the separator) :
.RadMenu_MainNavigation .rmGroup .rmLink,
.RadMenu_MainNavigation .rmGroup .rmText,
.RadMenu_MainNavigation .rmGroup .rmItem .rmDisabled,
.RadMenu_MainNavigation .rmGroup .rmItem .rmDisabled:hover,
.RadMenu_MainNavigation .rmGroup .rmItem .rmDisabled .rmText,
.RadMenu_MainNavigation .rmGroup .rmItem .rmDisabled:hover .rmText
{
background-position: 0 500px;
background-repeat: no-repeat;
background-color: transparent;
float:left!important;
}
.RadMenu_MainNavigation_Context .rmSeparator .rmText,
.RadMenu_MainNavigation .rmHorizontal .rmGroup .rmSeparator .rmText,
.RadMenu_MainNavigation .rmVertical .rmHorizontal .rmGroup .rmSeparator .rmText
{
background-color: red;
background-position: 0 -406px;
float:left!important;
width:inherit!important;
}
The non context menu never extends the hover for the full width of the menu.
For both menus, the only item that is fully highlighted is the longest item in the menu. This item is longer then the min width of the menu, in case that is relevant
I noticed that you also have sent us a support ticket with the same issue. Since I answered you there I would like to ask you to continue our communication there in order to avoid any confusion.
Kind regards,
Kate
the Telerik team