This is a migrated thread and some comments may be shown as answers.

Custom Icon Menu in window header

8 Answers 39 Views
Window
This is a migrated thread and some comments may be shown as answers.
Marc
Top achievements
Rank 1
Marc asked on 21 Dec 2016, 03:02 PM

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!

8 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 23 Dec 2016, 09:02 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Marc
Top achievements
Rank 1
answered on 29 Dec 2016, 12:46 PM

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

0
Dimiter Madjarov
Telerik team
answered on 02 Jan 2017, 09:08 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Marc
Top achievements
Rank 1
answered on 13 Jan 2017, 10:24 AM

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

0
Marc
Top achievements
Rank 1
answered on 13 Jan 2017, 10:31 AM

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

0
Marc
Top achievements
Rank 1
answered on 13 Jan 2017, 10:38 AM

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>

0
Marc
Top achievements
Rank 1
answered on 13 Jan 2017, 11:09 AM

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!

0
Dimiter Madjarov
Telerik team
answered on 13 Jan 2017, 03:04 PM

Hello Marc,

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

Regards,
Dimiter Madjarov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Window
Asked by
Marc
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Marc
Top achievements
Rank 1
Share this question
or