Customize Context Meu

[Marc]

Is there a way to add more custom options to the context menu?

[Alex Gyoshev]

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

[Marc]

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!

[Satyapal]

Is there any API documentation for these functions?

[Ivan Zhekov]

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

[Marc]

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!

[Marc]

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

[Ivan Zhekov]

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

[Marc]

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

[Ivan Zhekov]

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

[Marc]

Hi Ivan!

This is perfect - thanks again!

Marc

[Neil]

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
                });
            });
    });

[Ivan Zhekov]

Hello, Neil.

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

Regards,
Ivan Zhekov
Progress Telerik

[Neil]

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"

[Ivan Zhekov]

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

[Neil]

Thank you Ivan.

 

That fixed my problem.

[Eduardo]

Hi, someone have idea how to hide the Merge option if I click over a merged cell?

I only want Merge over Unmerged and Unmerge over Merged

Thanks

[Ivan Danchev]

Hi,

Currently, the API does not allow you to check whether you've selected a merged cell or a not, and this information is needed, in order to show/hide the respective options in the menu.

Regards,
Ivan Danchev
Progress Telerik

[Eduardo]

Hi Ivan,

then after some validations we could need to hide an item

for this example the previously added "Create Named Range" item

how can I do it?

[Eduardo]

Also, it is possible to to hide or remove one of the default options? CUT for example ?

[Veselin Tsvetanov]

Hello Eduardo,

Yes you could equally remove a default item from the context menu or the newly added custom item. In order to do that, you could handle the open event of the ConextMenu and use its remove() method:

cellContextMenu.bind("open", function(e) {
  var menu = e.sender;
  menu.remove('[data-action="cut"]');
  menu.remove('.custom-item');
})

Where you have assigned a custom class to the custom Menu item:

var cellContextMenu = spreadsheet._controller.cellContextMenu;

cellContextMenu.append([
  { cssClass: "k-separator" },
  { text: "Create Named Range", cssClass: "custom-item" }
]);

Here is a Dojo sample demonstrating the above:

http://dojo.telerik.com/oGIdiJOD/2

Regards,
Veselin Tsvetanov
Progress Telerik

[Eduardo]

Thanks Veselin

 

here another issue

I get the correct cell value

but I am not getting the right range selected when I try to use e.range._sheet._viewSelection.selection

I only get the previous selected range and not the actual

                render: function (e) {
                    // do custom height calculations to determine desired height
                    var height = window.innerHeight - 77;
                    e.sender.element.innerHeight(height);
                },
                select: function (e) {
                    console.log(e.range.value());
                    console.log(e.range._sheet._viewSelection);
                    console.log(e.range._sheet._viewSelection.selection);
                }

            }).data("kendoSpreadsheet"),

 

[Veselin Tsvetanov]

Hello Eduardo,

Within the select event of the Spreadsheet you will get the newly selected range in the event arguments object:

 select: function (e) {
  var selectedRange = e.range;
  ...

If you need to get the selected range from the outside of the event, you should use the selection() method of the Sheet instance:

https://docs.telerik.com/kendo-ui/api/javascript/spreadsheet/sheet/methods/selection

If you need to get then the rangeRef object, which describes the cell, you could do that from the _ref private field of the Range object:

var ref = selection._ref;

Regards,
Veselin Tsvetanov
Progress Telerik