Radcontext menu screen boundary

5 posts, 0 answers
  1. stefan de prins
    stefan de prins avatar
    3 posts
    Member since:
    Jan 2010

    Posted 07 Feb 2011 Link to this post

    I have a single radcontext menu on a page. This context menu gets filled with items from a scriptservice using the radscriptmanager.
    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.
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 10 Feb 2011 Link to this post

    Hello stefan de prins,

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. stefan de prins
    stefan de prins avatar
    3 posts
    Member since:
    Jan 2010

    Posted 10 Feb 2011 Link to this post

    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);

    }

  4. stefan de prins
    stefan de prins avatar
    3 posts
    Member since:
    Jan 2010

    Posted 11 Feb 2011 Link to this post

    Using this way of working I also get strange hover beheaviour. The first time I open a context menu, the hover extends for the full width of the menu item on all items, as it should. The second menu I open up however, the menu items only get highlighted for the width of the text, instead of the entire menu width. In addition the 2nd time the menu is opened, the separators are also no longer rendered.
    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

     

  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 15 Feb 2011 Link to this post

    Hi stefan de prins,

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top