I would like to hide specific menu items from the HighCharts context menu. Can someone point me to an example of how to do that.
Thanks.
exporting.buttons.contextButton.menuItems - this is a property in which you define items for the exporting menu.
Highcharts.defaultOptions.buttons.contextButtons.menuItems is an array with predefined menu items, so you copy and modify it.
exporting: {
buttons: {
contextButton: {
menuItems: Highcharts.defaultOptions.exporting.buttons.contextButton.menuItems.slice(4,5)
}
}
}
example: http://jsfiddle.net/ta9mtap1/
See API Docs - Menu Items.
Related
I have a grid with several columns. For three columns i used the column renderer. Each of the columns contains one button.
If i click one of those buttons, i want to replace the three buttons in that specific row with two other buttons. All the other rows should not be affected. Is this possible in a Vaadin grid?
Components in different columns don't know each other, as they are all defined in a separate scope (in the componentRenderer of their own column. You cannot define the Button outside of the componentRenderer as you found out in another question today). So the "obvious" solution won't work, where you add a clickListener on the Button to directly change the other buttons.
If you had one column with 3 Buttons inside then this would be much easier.
There is a way, but I see this more as a hack than as a solution. Because you need some extra implementation in the item class for this to work.
In the ComponentRenderer, you can add an if-statement where you look at some value of the item. In one case, you'll render button 1, in the other case you'll render the other button. And in the click listeners of the button you change that value in the item and refresh the dataprovider, so the componentRenderer is invoked again. It will now see the value on the item has changed, therefore displaying some other Button.
Here is some code to show what I mean:
// grid item class
public class Foo {
private boolean buttonPressed = false;
public Foo(){
}
public isButtonPressed(){
return buttonPressed;
}
public setButtonPressed(boolean buttonPressed){
this.buttonPressed = buttonPressed;
}
}
// adding of button columns
// do this 3 times for a test of your scenario.
grid.addComponentColumn(item -> {
if(!item.isButtonPressed()){
return new Button("Before Button was Pressed", click -> {
item.setButtonPressed(true);
grid.getDataProvider().refresh(item);
});
} else {
return new Button("Button was Pressed", click -> {
item.setButtonPressed(false);
grid.getDataProvider().refresh(item);
})
}
})
In HighStock, I'd like to use the built-in StockTools toolbar for marking up the chart, but remove some of the tools that aren't needed. I'd like to avoid building a custom toolbar (as described in their docs).
I've tried variations on adjustments to
stockTools:{ gui: { buttons: {...} } }
and
stockTools:{ gui: { definitions: {...} } }
but nothing seems to hide items.
The best option I have at the moment is using CSS to hide various toolbar items but if there's a javascript-configuration option, that would be preferable.
You tried an object but stockTools.gui.buttons is an array - Documentation
stockTools: {
gui: {
buttons: ['indicators', 'separator', 'simpleShapes']
}
},
Fiddle
In high chart there is an event for clicking on the bar. But bar is small in height it is impossible to click on it. Hence I want the event in high chart for further processing.
E.g. I want the event for month name in following example.
Thanks In advance.
If you don't want to use JQuery you can use it as follows
chart.xAxis[0].labelGroup.element.childNodes.forEach(function(label)
{
label.style.cursor = "pointer";
label.onclick = function(){
alert('You clicked on '+this.textContent);
}
});
complete code at http://jsfiddle.net/t07ok5v3/5/
Alternate solution, maintained since Highcharts v3 is to use Custom Events plugin. Plugin adds a lot of new event, natively not supported by Highcharts.
Demo: https://jsfiddle.net/BlackLabel/Utx8g/963/
Events are added the same way as official events in Highcharts, and we don't need to re-inspect every release the DOM:
xAxis: {
labels: {
events: {
click: function () { ... }
}
}
}
I get Error: Object doesn't support property or method 'forEach' when running the solution from Malay Sarkar in Internet Explorer. Here's a workaround I used which works in both Chrome and IE.
for (let i = 0; chart.xAxis[0].labelGroup.element.childNodes.length; i++)
{
chart.xAxis[0].labelGroup.element.childNodes[i].onclick = function(){
alert('You clicked on '+this.textContent);
}
});
I have been using editor.plugins.contextmenu.onContextMenu.add to customize the contextmenu plugin in TinyMCE 3.x but cannot use it in version 4.0
Here is the error I receive:
TypeError: a.plugins.contextmenu.onContextMenu is undefined
and my code for plugin is:
tinymce.PluginManager.add("example", function(a,b) {
a.plugins.contextmenu.onContextMenu.add(function(th, menu, event) {
//my code for customizing contextmenu
})
a.addButton("exampleHelp", {
text : "help",
icon : !1,
onclick : function() {
//some code
}
})
});
Does it relate to init function which I had been using in version 3.X?
I was able to reverse engineer a solution by looking at the table plugin code.
tinymce.init({
plugins: "contextmenu",
contextmenu: "link image inserttable | cell row column deletetable | myMenuItem"
});
// Inside plugin
editor.addMenuItem('myMenuItem', {
text: 'My Menu Item',
context: 'div', // not sure what this does
onPostRender: postRender,
onclick: function() { console.log('hi!'); }
});
// Determine whether menu item is visible
function postRender() {
handleDisabledState(this, 'div.myCustomItem');
}
function handleDisabledState(ctrl, selector) {
function bindStateListener() {
ctrl.visible(editor.dom.getParent(editor.selection.getStart(), selector));
editor.selection.selectorChanged(selector, function(state) {
ctrl.visible(state);
});
}
if (editor.initialized)
bindStateListener();
else
editor.on('init', bindStateListener);
}
So the context menu should only render if it's inside a div.myCustomItem element. If you want the context menu item to always be visible, comment out handleDisabledState()
For now I found a temporary solution:
a.on("contextmenu",function(n){
// console.log($(a.getDoc()).find(' .mce-floatpanel.mce-menu'));
// find a way to add it into current context menu instead of deleting it
$(a.getDoc()).find(' .mce-floatpanel.mce-menu').remove();
var i;
var o=[]
o.push({text:'option1'})
o.push({text:'option2'})
o.push({text:'menu option', menu:o})
t=new tinymce.ui.Menu({items:o,context:"contextmenu"}),t.renderTo(document.body)
// fix positioning
var r={x:n.pageX,y:n.pageY};
a.inline||(r=tinymce.DOM.getPos(a.getContentAreaContainer()),
r.x+=n.clientX,r.y+=n.clientY),t.moveTo( r.x,r.y),
a.on("remove",function() {t.remove(),t=null})
})
I remove the default context menu and replace it with my customized menu. But I still need to know how I can add my items to default context menu
I found a solution on how to customise TinyMCE's (4.1.9) contect menu on the fly, see my response and proposed solution on this page: http://archive.tinymce.com/forum/viewtopic.php?pid=116109#p116109
Thanks,
Nic
I have a page, which is used for building queries and running them against different entities (Kind of a query builder/generic search).
The results are displayed in JQGrid, so effectively the same grid will be used for rendering results from different entities.
This results grid has to support context menus, which will differ for each entity. So I need a way to change the context menu as per the entity. Each entity may have different number of menu items in context menu and each item may respond in a different manner (sometimes an alert, sometimes an action spawning in a different tab).
Rendering different menus (through li) is not an issue but attaching the methods to the li is proving to be a challenge. Any pointers will be highly appreciated.
I am using jquery.contextmenu-ui.js .
Following is from a sample that I picked from their (JQGrid) site
function initGrid() {
$("#EntityGrid").contextMenu('cMenu'
,{
bindings: { /* I would like to avoid this and pass all the actions to one method*/
'edit': function (t) {
editRow();
},
'add': function (t) {
addRow();
},
'del': function (t) {
delRow();
}
},
onContextMenu: function (event, menu) {
var rowId = $(event.target).parent("tr").attr("id")
var grid = $("#EntityGrid");
grid.setSelection(rowId);
return true;
}
}
);
}
Thanks,
Avinash
You can use onShowMenu callback of contextMenu instead of static binding using bindings. In the same way the menuId used as the first parameter of contextMenu could be the id of dynamically created div with empty <ul>. The onShowMenu has the form
onShowMenu: function (e, $menu) {
// here one can clear `<ul>` child of $menu
// and append it with "<li>" items
return $menu;
}
In the answer you will find an example of the code which build menu dynamically.