Unplanned
Last Updated: 01 Dec 2020 10:14 by ADMIN
Tom
Created on: 01 Dec 2020 10:06
Category: Menu
Type: Bug Report
1
Context Menu going off screen when using Item's ContentTemplate

The boundary detection is not applied to the ContentTemplate of a ContextMenu item:

<telerik:RadContextMenu runat="server" ID="RadContextMenu1" EnableScreenBoundaryDetection="true"  >
	<Items>
		<telerik:RadMenuItem Text="Item 1" Value="1">
		</telerik:RadMenuItem>
		<telerik:RadMenuItem Text="Item 2" Value="2" >
			<GroupSettings Width="400px" />
			<ContentTemplate>
				<div style="width: 400px;">
				some content here
				</div>
			</ContentTemplate>
		</telerik:RadMenuItem>
	</Items>
</telerik:RadContextMenu>

1 comment
ADMIN
Peter Milchev
Posted on: 01 Dec 2020 10:14

Hello,

Placing the following script under the ScriptManager will achieve the boundary detection functionality for the ContentTemplate of an item:

if (Telerik.Web.UI.RadMenuItem) {

    Telerik.Web.UI.RadMenuItem.prototype._doOpenContentTemplate = function (animationContainer) {
        var that = this,
            slide = that._slide;

        this.withView(function () { that.get_view()._ensureDecorationElements(); });

        // 1) Show animation container and hide visually
        animationContainer.style.display = "block";
        animationContainer.style.visibility = "hidden";

        // 2) Prepare the slide element
        that._resetAnimatedElementPosition();
        slide.set_direction(that._getSlideDirection());
        slide.set_animatedElement(that._getAnimatedElement());
        slide.updateSize();

        // 3) Position child container by calling the basic method, since there is no support
        //for screen boundary detection and scrolling when content template is used.
        var position = that._positionChildContainerBasic();

that._adjustForScreenBoundaries(position.left, position.top) animationContainer.style.visibility = "visible"; that._updateZIndex(); slide.expand(); } }

Regards,
Peter Milchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.