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

Customize Context Meu

22 Answers 358 Views
Spreadsheet
This is a migrated thread and some comments may be shown as answers.
Marc
Top achievements
Rank 1
Marc asked on 20 Dec 2016, 10:52 PM
Is there a way to add more custom options to the context menu?

22 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 22 Dec 2016, 02:31 PM

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.
0
Marc
Top achievements
Rank 1
answered on 22 Dec 2016, 10:30 PM

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!

0
Satyapal
Top achievements
Rank 1
answered on 23 Dec 2016, 12:15 PM
Is there any API documentation for these functions?
0
Ivan Zhekov
Telerik team
answered on 26 Dec 2016, 08:10 AM
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.
0
Marc
Top achievements
Rank 1
answered on 28 Dec 2016, 08:43 AM

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!

0
Marc
Top achievements
Rank 1
answered on 29 Dec 2016, 10:54 AM

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

0
Accepted
Ivan Zhekov
Telerik team
answered on 30 Dec 2016, 09:19 AM
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.
0
Marc
Top achievements
Rank 1
answered on 13 Jan 2017, 09:54 AM

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

0
Accepted
Ivan Zhekov
Telerik team
answered on 17 Jan 2017, 10:49 AM
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.
0
Marc
Top achievements
Rank 1
answered on 17 Jan 2017, 10:54 AM

Hi Ivan!

This is perfect - thanks again!

Marc

0
Neil
Top achievements
Rank 1
answered on 04 Sep 2017, 10:10 PM

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
                });
            });
    });
0
Ivan Zhekov
Telerik team
answered on 06 Sep 2017, 07:10 PM
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.
0
Neil
Top achievements
Rank 1
answered on 06 Sep 2017, 07:22 PM

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"

0
Ivan Zhekov
Telerik team
answered on 08 Sep 2017, 03:45 PM
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.
0
Neil
Top achievements
Rank 1
answered on 08 Sep 2017, 04:02 PM

Thank you Ivan.

 

That fixed my problem.

0
Eduardo
Top achievements
Rank 1
answered on 20 Apr 2020, 01:59 PM

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

0
Ivan Danchev
Telerik team
answered on 22 Apr 2020, 01:33 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Eduardo
Top achievements
Rank 1
answered on 21 May 2020, 02:09 PM

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?

0
Eduardo
Top achievements
Rank 1
answered on 21 May 2020, 04:15 PM
Also, it is possible to to hide or remove one of the default options? CUT for example ?
0
Veselin Tsvetanov
Telerik team
answered on 25 May 2020, 08:21 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Eduardo
Top achievements
Rank 1
answered on 28 May 2020, 12:42 AM

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"),

 

0
Veselin Tsvetanov
Telerik team
answered on 29 May 2020, 08:54 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Spreadsheet
Asked by
Marc
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Marc
Top achievements
Rank 1
Satyapal
Top achievements
Rank 1
Ivan Zhekov
Telerik team
Neil
Top achievements
Rank 1
Eduardo
Top achievements
Rank 1
Ivan Danchev
Telerik team
Veselin Tsvetanov
Telerik team
Share this question
or