Custom Icon Menu in window header

9 posts, 0 answers
  1. Marc
    Marc avatar
    133 posts
    Member since:
    Sep 2016

    Posted 21 Dec 2016 Link to this post

    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!

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2205 posts

    Posted 23 Dec 2016 Link to this post

    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.
  3. Marc
    Marc avatar
    133 posts
    Member since:
    Sep 2016

    Posted 29 Dec 2016 in reply to Dimiter Madjarov Link to this post

    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

  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2205 posts

    Posted 02 Jan Link to this post

    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.
  5. Marc
    Marc avatar
    133 posts
    Member since:
    Sep 2016

    Posted 13 Jan in reply to Dimiter Madjarov Link to this post

    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

  6. Marc
    Marc avatar
    133 posts
    Member since:
    Sep 2016

    Posted 13 Jan in reply to Marc Link to this post

    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

  7. Marc
    Marc avatar
    133 posts
    Member since:
    Sep 2016

    Posted 13 Jan in reply to Marc Link to this post

    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>

  8. Marc
    Marc avatar
    133 posts
    Member since:
    Sep 2016

    Posted 13 Jan Link to this post

    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!

  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2205 posts

    Posted 13 Jan Link to this post

    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.
Back to Top