Custom Icon Menu in window header

[Marc]

I'd like to implement a custom icon in the header, which when clicked, shows a customizable menu (similar to the context menu in the Spreadsheet component).

Is there anything built in which can help me? If not can you please provide the code used to show the context menu in the spreadsheet).

Thanks!

[Dimiter Madjarov]

Hello Marc,

You could check the following example, which demonstrates how to add a custom action in the Window header. On click of this custom command you could display the Kendo UI Context menu.

I hope this information will help you to implement the scenario on your end.

Regards,
Dimiter Madjarov
Telerik by Progress

[Marc]

Hi Dimiter

Thanks for the advice. Is there an easy way to display the context menu directly underneath the icon? A small example would be great (doesn't have to be with a window component)

Thanks,

Marc

[Dimiter Madjarov]

Hello Marc,

This could be achieved by enabling the alignToAnchor option of the Context Menu. Check out the following documentation page, which also contains an example of it:

http://docs.telerik.com/kendo-ui/api/javascript/ui/contextmenu#configuration-alignToAnchor

Regards,
Dimiter Madjarov
Telerik by Progress

[Marc]

Hi Dimiter,

I'm having problems with the target attribute of the context menu. My custom icon does not have an ID attribute, and I cannot use the class attribute, as I will have multiple windows on one screen. Is there any way to specify the target as a jquery element rather than a jQuery element Id?

Thanks

Marc

[Marc]

Don't worry above my above question - I used jQuery to find the custom icon element and assign an Id before I create the KendoContextMenu.

I have one more question - with alignToAnchor the width of the context menu is the same as the target element ( in my case this is around 15 pixels). Is there a way to increase this somehow?

Thanks,

Marc

[Marc]

The context menu is now shown, and the width is fine, however, the span is not visible.

This is the generated html for 1 item.

<li class="k-item k-state-default marcsClass k-first" role="menuitem" id="previousStageSkuLineLevelHeaderContextMenu_mn_active"><span class="k-link">Item 1</span></li>

[Marc]

I have fixed this, solution below.

I could not attach to the custom icon directly, as this is inside a span, and the context menu would not show the text in its own spans.

The target had to be $scope.myWindow.wrapper.find(".k-i-custom").parent() which is the anchor tag which is the direct parent of the custom icon span element.

Thanks again!

[Dimiter Madjarov]

Hello Marc,

Thank you for the updates. I am glad you managed to resolve the issue.

Regards,
Dimiter Madjarov
Telerik by Progress