Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 02 Mar 2021 15:31 by ADMIN
Aramis
Created on: 09 Aug 2019 19:36
Category: Kendo UI for jQuery
Type: Bug Report
0
ContextMenu is showing at incorrect position inside of kendo editor

I am currently experiencing an issue between the Kendo ContextMenu and the Kendo EditorFor. When I open the ContextMenu inside of the EditorFor it display offset relative to the cursor, both the left and top values are completely incorrect relative to the editor.

Attached you will find a solution where this issue has been replicated, I removed the scripts folder in order to keep the file size small. I hope this can be fixed soon.

Attached Files:
4 comments
ADMIN
Martin
Posted on: 26 Aug 2019 13:48
Hello Aramis,

In order the ContextMenu to be displayed precisely at the bottom right of the cursor, that would require to set the cursor as a target. As this cannot be done, the closest to this would be to set the target to be the custom button in the toolbar, as you need to drag your mouse to the button and click it. Here is a Dojo example for reference.

Regarding the second point, if you wish to have a custom Tool which opens a ContextMenu, the way to do that is demonstrated in the above Dojo example. Note that for this approach, you will have to initialize different menu for each Editor.

I am afraid that in the Editor scenario discussed, you won't be able to use a single ContextMenu, which changes its target.

If you have further questions regarding this subject, I suggest to open a new support ticket for it, as this thread is not related to a bug in the implementation of the ContextMenu. You will also be replied much faster.

Regards,
Martin
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Aramis
Posted on: 19 Aug 2019 16:15

Thanks for the reply,

I would like it to be displayed to the bottom right of the cursor, like when clicking on a regular textbox. I had opened a ticket with telerik where I was trying to use a kendo editorfor inside of an MVC editor template which was not triggering the context menu to open on right click, I was informed that I would have to set the target of the context menu to the editor. This rolls into the second point, this was a proof of concept for a larger page with multiple editors where I did not want to have a context menu for each single editor. The context menu target would be set when the user clicked into the editor. Onto the third point, initializing the context menu on document.ready wasnt targeting the correct editor, my solution was to dynamically bind so it would appear in the desired editor.

I tried testing it in my current solution with no luck, I can provide you with the support ticket I opened if that would be helpful, still having issues.

ADMIN
Martin
Posted on: 19 Aug 2019 06:43
Hello Aramis,

After our investigation there are several questions that remained unanswered. If it is not much trouble, please provide additional information so that we can better understand the issue and provide the most appropriate solution.

1) Where would you like to have the ContextMenu displayed? 
2) Why is the parent element dynamically calculated and set?
3) Is there a particular reason you are initializing the ContextMenu in the Exec() configuration, instead of in a document.ready function, for example?

Currently, the ContextMenu is displaying as reported because of the target set to the widget:
target: $(editor.document).find("html"),

That way the top attribute of the ContextMenu would be set to 0. However this attribute is in relation with the "html" of the main page and not the "html" inside the iframe, in which the Editor exists. That is the reason for the current display of the ContextMenu.

Still, I could offer some suggestions to alter the code in order to display the widget differently. You can use some of the Editor's elements as a target to the ContextMenu. You have three acceptable options:

1) You can set the target to be your custom button. That means that the ContextMenu will be displayed right below the button. Please refer to the first screenshot.
target: $(".k-i-custom-button"),

2) You can set the target to be the Editor's toolbar. The ContextMenu will be displayed right below the toolbar. Please see the second screenshot for reference.
target: $(".k-editor-toolbar-wrap"),

3) You can set the target to be the Editor's body. The ContextMenu will be displayed below the editor's editable area. Pleasee refer to the third screenshot.
target: $(".k-editable-area"),

Also, when you create your custom button, it would be better to use a hardcoded string for Name instead of Guid:
.CustomButton(button => button
              .Name("customButton")
              .Exec("onClick")
              .ToolTip("Insert a Snippet"))))

I hope that the above would resolve the issue you are experiencing. Attached you will find a sample solution which implements the second approach, which I find to be most suitable.

Feel free to ask if you have questions regarding the above suggestions.

Regards,
Martin
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Attached Files:
ADMIN
Martin
Posted on: 16 Aug 2019 15:44
Hello Aramis,

Thank you for the provided project. We are currently investigating if the behavior is really a bug in the ContextMenu implementation. I will follow you up once we have more information.

Regards,
Martin
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Create an account Log In
View
Type
Status
Category