Customize Context Meu

16 posts, 2 answers
  1. Marc
    Marc avatar
    161 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
    2513 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
    161 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
    596 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
    161 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
    161 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
    596 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
    161 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
    596 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
    161 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

  12. Neil
    Neil avatar
    31 posts
    Member since:
    Aug 2016

    Posted 04 Sep Link to this post

    I've followed the examples, and I get my context menu to appear on top of the one created for the spreadsheet. Here's my code...

     

    <ul id="context-menu"></ul>
     
    <script type="text/javascript">
        var msg = "";
        var notification;
        var datasheetid = -1;
     
        $(document).ready(function () {
            $("#context-menu").kendoContextMenu({
                target: "#spreadsheet_DatasheetTemplate"
            });
     
            var contextMenu = $("#context-menu").data("kendoContextMenu");
     
            contextMenu.append(
                [
                    { text: "Create Named Range" },
                    { cssClass: "k-separator" }
                ]);
            contextMenu.bind("select",
                function (e) {
                    var cellname = e.target.childNodes[0].childNodes[0].firstChild.children["0"].childNodes["0"].value.split(":")[0].trim();
                    $("#textbox_CellName").val(cellname);
                    var window = $("#window_CreateNamedRange").data("kendoWindow");
                    window.open().element.closest(".k-window").css({
                        top: 55,
                        left: 15
                    });
                });
        });
  13. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    596 posts

    Posted 06 Sep Link to this post

    Hello, Neil.

    I am not quite sure I see the question or issue you are showing. Could you elaborate?

    Regards,
    Ivan Zhekov
    Progress Telerik
    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.
  14. Neil
    Neil avatar
    31 posts
    Member since:
    Aug 2016

    Posted 06 Sep in reply to Ivan Zhekov Link to this post

    I would like for my addition to appear below "UnMerge" instead of on top of the Spreadsheet's default context menu. I would also like the context menu to be the same width as my text is longer than the text of the default options.

    When I add "Create Named Range" it covers up "Cut"

  15. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    596 posts

    Posted 08 Sep Link to this post

    Neil,

    you need to append the items to the cell context menu, not the one created Ad-hoc, just as shown in this example -- http://dojo.telerik.com/@joneff/iTaDe.

    In your case you have two context menus placed at the same location and the second (in your case your custom menu) covers the first (the original cell menu).

    Regards,
    Ivan Zhekov
    Progress Telerik
    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.
  16. Neil
    Neil avatar
    31 posts
    Member since:
    Aug 2016

    Posted 08 Sep in reply to Ivan Zhekov Link to this post

    Thank you Ivan.

     

    That fixed my problem.

Back to Top