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

Customize Context Meu

22 Answers 795 Views

Spreadsheet

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

22 Answers, 1 is accepted

Accepted

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.

Accepted

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.

answered on 04 Sep 2017, 10:10 PM

context.png

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

});

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.

answered on 28 May 2020, 12:42 AM

selection.png

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

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