nescalante/knockout.contextmenu

:pushpin: Contextual menu for knockout

knockout.contextmenu

Contextual menu, anywhere you need it

Install

npm install knockout.contextmenu --save

bower install knockout.contextmenu

With npm

Just do:

require('knockout.contextmenu');

Usage

To bind a context menu to an element:

<td data-bind="contextMenu: { 'Option 1': $root.rootMethod, 'Option 2': itemMethod, 'Option 3': anotherMethod }">

Dont forget to include the .css file.

You can also bind a boolean observable to the context menu, that will work as a 'check':

{ 
    "Boolean": someObservableBoolean, 
    "One method": $root.test 
}

You can also set dynamic 'text' and 'visible' values binding an object with the following values instead of a method:

Option	Description
url	Direct access to an URL.
text	Set menu text.
visible	Show/hide item (result must be boolean).
action	Item method, mandatory if not url defined.
disabled	Disable menu item.

Example:

{ 
    "Complex item": { 
        "text": $root.someObservableText(), 
        "visible": someMethod() == '1', 
        "action": $root.someAction 
    }, 
    "One method": $root.test
}

To create a separator between two menus, just create an object with the property separator with true:

{ 
    "Some item": methodOne,
    "Separator": { 
        "separator": true, 
        "visible": someMethod() 
    },
    "Just another item": methodTwo
}

Bind it with left click, if you want to:

<td data-bind="contextMenu: { 'Options': justGoHere }, bindMenuOnClick: true, bindMenuOnContextMenu: false">

Also supports observableArrays!

var menu = ko.observableArray([{ text: 'Item 1', action: doSomething }, { text: 'Item 2', action: doMore }]); 

<td data-bind="contextMenu: menu">

License

MIT

knockout.contextmenu's Issues

unit testing

add unit testing

Menu is rendered off screen if the element it's bound to is near bottom of the page

As per the title.

This at least happens when the element is near bottom of screen; I haven't tested when element is at very right of page too.

Happens with latest version of Chrome on Windows.

Nested Context Menu Not Working

Thanks for the cool plugin, much appreciated.

In my case it is working well when i have only one context menu, if i have multiple with nested then only parent level menu got worked.

ex:

<div data-bind="contextMenu: { 'Parent': function () { console.log('Fired') } }">
<ul>
<li data-bind="contextMenu: { 'Child': function () { console.log('Fired') } }"></li>
</ul>
</div>

so if i click the parent container my parent level menu need to display & if i click on the <li> then my child level menu need get display, it is possible to implement like this with this plugin.

Numeric item keys are reordered in Chrome

Because objects are unordered by definition, specifying the contextMenu as an object may have unexpected results. For example, in Chrome, numeric keys are sorted to the beginning of the object.

<span data-bind="contextMenu: {'3': three, 'foo': foo, '2': two}"></span>

results in:

- 2
- 3
- foo

Perhaps you could support passing an array of menu items like:

<span data-bind="contextMenu: [{text: '3', action: three}, {text: 'foo', action: foo}, {text: '2', action: two}]"></span>

Support for an observable array would be even better!

Edit: Because of the elements of arrays can be accessed the same way as object properties, the above example actually does work. However, the loop over the array is done with for-in, which can also hit object properties https://github.com/nescalante/knockout.contextmenu/blob/master/src/knockout.contextmenu.js#L127.

AMD compliance

Please make this AMD compliant

Unable to place multiple checkboxes

I am trying to use the context Menu as a filter and for each item selected under the contextmenu , I want the selection to be retained . Please help me in solving the Issue.

Add "id" as an option?

Context menu works great. However there is no easy way to add an "id" to the context menu item, and for my use case this would be rather helpful.

Throws error when list of menu items is empty

I'll take a look at this issue too if that's helpful @nescalante?

I rewound to 0.3.1 just to double check it wasn't introduced with the other fix I pushed. But if the list of items for the menu is an empty array (as opposed to uninitialised at all), then we get the following:

Uncaught TypeError: Cannot read property 'style' of undefined
    openMenu @ knockout.contextmenu-0.3.1.js:105

Great binding. Any chance it could work with changing observables?

The visible and disabled properties are only evaluated when the menu is created. Depending on the state of my view I want certain menu options to be hidden.

I've tried changing the init to update which sort of works but the elementMapping array gets bigger and bigger! Do you think this would be a simple change or a bit of a re work?

Submenus

What about nested context menu? It would be nice to have them!

Support for nested menus?

Thanks for the plugin, it seems useful.
However I miss support for nested menus, is this a planned feature. Or is it maybe already there but not documented?

Support for icons would also be a natural feature for any menu plugin.

BR

Could use with knockout in Cesium

I don't know what's the difference between knockout native and Cesium.knockout, but this could use with Cesium knockout, could you please make it compatible?