Customize Context Meu

11 posts, 2 answers
  1. Marc
    Marc avatar
    154 posts
    Member since:
    Sep 2016

    Posted 20 Dec 2016 Link to this post

    Is there a way to add more custom options to the context menu?
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2512 posts

    Posted 22 Dec 2016 Link to this post

    Hello Marc,

     

    Yes, you can. Get the context menu instance via the cellContextMenu / rowHeaderContextMenu / colHeaderContextMenu methods of the spreadsheet object. You can add items to a context menu dynamically via the append method.

     

    Regards,
    Alex Gyoshev
    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
    154 posts
    Member since:
    Sep 2016

    Posted 22 Dec 2016 in reply to Alex Gyoshev Link to this post

    Hi Alex,

    This is great - thank you! Can you provide a small example of how to use this, as inside my context menu I would like new menu items, with custom functions. The link does not explain how to add the function - or would I do it via the jQuery click handler event? In which case I need a way to differentiate, as I will have several spreadsheets on the same screen, inside separated Kendo Window instances.

    Thanks!

  4. Satyapal
    Satyapal avatar
    2 posts
    Member since:
    Dec 2016

    Posted 23 Dec 2016 in reply to Alex Gyoshev Link to this post

    Is there any API documentation for these functions?
  5. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    579 posts

    Posted 26 Dec 2016 Link to this post

    Hi, Marc,

    The methods for accessing the contextmenus, namely cellContextMenu, rowHeaderContextMenu and colHeaderContextMenu are not yet in production, they are implemented, but not yet released.

    With 2017 R1 they will be made available.

    Github item for reference -- https://github.com/telerik/kendo-ui-core/issues/2411.

    Prior that any code that we supply, will not work.

    Regards,
    Ivan Zhekov
    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.
  6. Marc
    Marc avatar
    154 posts
    Member since:
    Sep 2016

    Posted 28 Dec 2016 in reply to Ivan Zhekov Link to this post

    Hi Ivan,

    Thanks for clarifying the availability of these methods. I had noticed they didn't seem to be available - however there is a way around this (for the moment at least, until the first release 2017). 

    You can use spreadSheet._controller.cellContextMenu 

    Thanks

    Marc!

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

    Posted 29 Dec 2016 in reply to Ivan Zhekov Link to this post

    Hi Ivan,

    Once these options are in production, will there be a way to separate custom items added to the context menu. For instance, at the moment the menu holds 4 options (cut, copy, paste and merge). However there is a horizontal rule between paste and merge. I was hoping there would be a way to add more of these, between the standard options and the custom options I will add?

    Thanks,

    Marc

  8. Answer
    Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    579 posts

    Posted 30 Dec 2016 Link to this post

    Mark, just add an item with cssClass equal to "k-separator" e.g.:

    // more items on top
    { cssClass: "k-separator" },
    // more items below

    Here is why this works: append (and all methods for adding) calls internally _insert, which in terms calls updateItemClasses which takes care of the item, as long as it has "k-separator" class.

    I admit, adding an item with isSeparator or separator option would be a more visible if not natural option, but the cssClass also works just fine.

    Here a quick and simple dojo -- http://dojo.telerik.com/@joneff/ElUCo.

    Regards,
    Ivan Zhekov
    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.
  9. Marc
    Marc avatar
    154 posts
    Member since:
    Sep 2016

    Posted 13 Jan in reply to Ivan Zhekov Link to this post

    Hi Ivan!

    Perfect thank you! Is there a way to remove the defaults (cut, copy, paste and merge) from the current spreadsheet context menu? Please note I may want to remove some or all, so just overwriting the current context menu is not an option.

    Thanks!

    Marc

  10. Answer
    Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    579 posts

    Posted 17 Jan Link to this post

    Mark, you could always employ the API to suit your needs and remove the items. The same way you will be able to append items, you could clear all the initial items.

    I've updated my example to have one initial example: http://dojo.telerik.com/@joneff/ElUCo and I remove it prior appending the rest of the items.

    And here is the help topic on removing items: http://docs.telerik.com/kendo-ui/api/javascript/ui/menu#methods-remove.

    Regards,
    Ivan Zhekov
    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.
  11. Marc
    Marc avatar
    154 posts
    Member since:
    Sep 2016

    Posted 17 Jan in reply to Ivan Zhekov Link to this post

    Hi Ivan!

    This is perfect - thanks again!

    Marc

Back to Top