When node is selected I want to add a icon on node and on icon click I want to give options to edit or deleted selected node. Is this possible or how to implement this in Vis js?
you can use the click event or nodeSelected.
like this:
network.on('click', function (properties) {
selection = properties.nodes
if (selection > 0) {
var node_sel = nodes.get([selection])[0];
if(node_sel['selected']){
alert('add you buttons');
}
else{
alert('change the style here');
node_sel['selected'] = true;
node_sel['shape'] = 'box';
nodes.update(node_sel);
var msg = JSON.stringify(nodes.get([selection]))
alert(msg);
}
}
});
see this plunker, instead of the alerts put your code.
Related
I have a Google Sheet set up with two buttons on the Form sheet, which are attached to two different scripts. They work perfectly on PC, but unfortunately, custom buttons still do not appear to work on the Google Sheets app for tablets. I was able to incorporate a workaround via a dropdown box, but that is still a bit finicky, so I'm wondering whether I could just switch both PC and tablet users to checkboxes instead.
If the checkbox in cell G3 is checked, the AUTOFILL script should run and the checkbox should be cleared; subsequently, if the checkbox in cell G5 is checked, the UPDATE script should run and its checkbox be cleared.
What would be the best way of doing this, now that checkboxes are a thing in Google Sheets?
Here is the code I am currently using, working for both the buttons and the dropdown:
function onEdit(e) {
if (e.range.getA1Notation() == 'D3') {
if (/^\w+$/.test(e.value)) {
eval(e.value)();
e.range.clearContent();
}
}
}
function AUTOFILL() {
var sheet1 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data');
var sheet2 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Form');
var valueOfData = sheet1.getRange(sheet1.getLastRow(), 1).getValue();
sheet2.getRange('B3').setValue(valueOfData + 1);
}
function UPDATE() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var formSS = ss.getSheetByName("Form");
var dataSheet = ss.getSheetByName("Data");
var values = formSS.getRange("B3:B6").getValues().reduce(function(a, b) {
return a.concat(b)
});
var partNum = values[0];
var row;
dataSheet.getDataRange().getValues().forEach(function(r, i) {
if (r[0] === partNum) {
row = i + 1
}
})
row = row ? row : dataSheet.getLastRow() + 1;
var data = dataSheet.getRange(row, 1, 1, 4).getValues()[0].map(function (el, ind){
return el = values[ind] ? values[ind] : el;
})
var now = [new Date()];
var newData = data.concat(now)
dataSheet.getRange(row, 1, 1, 5).setValues([newData]);
formSS.getRange("B3:B6").clearContent()
}
A you correctly said, running scripts on button clicks does not appear to work on the Android mobile app. This is an issue that has already been reported (see this and this). A common workaround used to be using Android add-ons but they are now deprecated.
In order to make your script run using checkbox, one thing you can do is to modify your onEdit function. After the following modifications, it will check whether any of the checkboxes is enabled, run the appropiate function based on that, and then disable it again. You can see the updated onEdit function below:
function onEdit(e) {
var isAutofill = SpreadsheetApp.getActiveSheet().getRange("G3").getValue();
var isUpdate = SpreadsheetApp.getActiveSheet().getRange("G5").getValue();
if (isAutofill && isUpdate) {
Browser.msgBox("You cannot autofill and update at once!");
SpreadsheetApp.getActiveSheet().getRange("G3").setValue(false);
SpreadsheetApp.getActiveSheet().getRange("G5").setValue(false);
} else if (isAutofill) {
AUTOFILL();
SpreadsheetApp.getActiveSheet().getRange("G3").setValue(false);
} else if (isUpdate) {
UPDATE();
SpreadsheetApp.getActiveSheet().getRange("G5").setValue(false);
}
if (e.range.getA1Notation() == 'D3') {
if (/^\w+$/.test(e.value)) {
eval(e.value)();
e.range.clearContent();
}
}
}
I have succesfully rendered my own component as the cellEditor and would like and on-leave I would like it to try to validate the value and prevent the closing if it fails.
If I look at this then https://www.ag-grid.com/javascript-grid-cell-editing/#editing-api there's cancelable callback functions for editing. But in this callback function is there a way to access the current instantiated component? I would think that would be the easiest way to handle this.
I'm using vee-validate so the validation function is async, just to keep in mind.
Use Full row editing.
Create a global variable like
var problemRow = -1;
Then Subscribe to this events:
onRowEditingStarted: function (event) {
if (problemRow!=-1 && event.rowIndex!=problemRow) {
gridOptions.api.stopEditing();
gridOptions.api.startEditingCell({
rowIndex: problemRow,
colKey: 'the column you want to focus',
});
}
},
onRowEditingStopped: function (event) {
if (problemRow==-1) {
if (event.data.firstName != "your validation") {
problemRow = event.rowIndex
gridOptions.api.startEditingCell({
rowIndex: problemRow,
colKey: 'the column you want to focus',
});
}
}
if (problemRow == event.rowIndex) {
if (event.data.firstName != "your validation") {
problemRow = event.rowIndex
gridOptions.api.startEditingCell({
rowIndex: problemRow,
colKey: 'the column you want to focus',
});
}
else{
problemRow=-1;
}
}
},
I had a similar issue - albeit in AngularJS and the non-Angular mode for ag-grid - I needed to prevent the navigation when the cell editor didn't pass validation.
The documentation is not very detailed, so in the end I added a custom cell editor with a form wrapped around the input field (to handle the niceties such as red highlighting etc), and then used Angular JS validation. That got me so far, but the crucial part was trying to prevent the user tabbing out or away when the value was invalid so the user could at least fix the issue.
I did this by adding a value parser when adding the cell, and then within that if the value was invalid according to various rules, throw an exception. Not ideal, I know - but it does prevent ag-grid from trying to move away from the cell.
I tried loads of approaches to solving this - using the tabToNextCell events, suppressKeyboardEvent, navigateToNextCell, onCellEditingStopped - to name a few - this was the only thing that got it working correctly.
Here's my value parser, for what it's worth:
var codeParser = function (args) {
var cellEditor = _controller.currentCellEditor.children['codeValue'];
var paycodeId = +args.colDef.field;
var paycodeInfo = _controller.paycodes.filter(function (f) { return f.id === paycodeId; })[0];
// Check against any mask
if (paycodeInfo && paycodeInfo.mask) {
var reg = new RegExp("^" + paycodeInfo.mask + '$');
var match = args.newValue.match(reg);
if (!match) {
$mdToast.show($mdToast.simple().textContent('Invalid value - does not match paycode format.').position('top right').toastClass('errorToast'))
.then(function(r) {
_controller.currentCellEditor.children['codeValue'].focus();
});
throw 'Invalid value - does not match paycode format.';
}
}
return true;
};
The _controller.currentCellEditor value is set during the init of the cell editor component. I do this so I can then refocus the control after the error has been shown in the toast:
CodeValueEditor.prototype.init = function (params) {
var form = document.createElement('form');
form.setAttribute('id', 'mainForm');
form.setAttribute('name', 'mainForm');
var input = document.createElement('input');
input.classList.add('ag-cell-edit-input');
input.classList.add('paycode-editor');
input.setAttribute('name', 'codeValue');
input.setAttribute('id', 'codeValue');
input.tabIndex = "0";
input.value = params.value;
if (params.mask) {
input.setAttribute('data-mask', params.mask);
input.setAttribute('ng-pattern','/^' + params.mask + '$/');
input.setAttribute('ng-class',"{'pattern-error': mainForm.codeValue.$error.pattern}");
input.setAttribute('ng-model', 'ctl.currentValue');
}
form.appendChild(input);
this.container = form;
$compile(this.container)($scope);
_controller.currentValue = null;
// This is crucial - we can then reference the container in
// the parser later on to refocus the control
_controller.currentCellEditor = this.container;
$scope.$digest();
};
And then cleared in the grid options onCellEditingStopped event:
onCellEditingStopped: function (event) {
$scope.$apply(function() {
_controller.currentCellEditor = null;
});
},
I realise it's not specifically for your components (Vue.js) but hopefully it'll help someone else. If anyone has done it a better way, I'm all ears as I don't like throwing the unnecessary exception!
I'm new to Titanium so maybe my question is a newbie one, but I'm trying to dynamically populate an option Dialog (use Alloy framework).
Is it possible to create a new ArrayCollection and pass it to my optionDialog like this :
<OptionDialog id="dialog" title="Choose Calendar" src=getAllCalendars>
<Options>
<Option id="{calendar_id}">{calendar_name}</Option>
</Options>
</OptionDialog>
Where getAllCalendar is a function that return a new Array Collection.
I know I've done things like this before in Flex but I can't make it work on Titanium so maybe it isn't the right way.
Thank you for your answers.
You need to write code in js file in Appcelerator(Alloy).
For that way you can easily get that click events.
var dialog = Ti.UI.createOptionDialog({
options : options,//Array
title : 'Hi <?'
});
dialog.show();
dialog.addEventListener('click', function(_d) {
onclickactions[_d.index];
});
I came up with this. If you opt to just create the dialog box, which works in alloy using the classic method, you can do this.
For me, the key part was to keep the order of the options with my options array. After the option was selected, you could then reference the options array with the e.index to find which was selected.
function companyDialog(){
// Build the list of options, maintaining the position of the options.
if(Alloy.Globals.Form){
Alloy.Globals.Form.Controller.destroy();
}
// My list of companies returns companyname, companycode, id
companies = db.listCompanies();
var options = [];
_.each(companies, function(val){
options.push(val.companyname + " (" + val.companycode + ")");
});
options.push("Cancel");
var dialog = Ti.UI.createOptionDialog({
title : 'Companies',
options : options
});
dialog.addEventListener('click', function(e) {
var setCode = "";
var selection = "Unknown";
if(options[e.index] != "Cancel") {
// DO WORK HERE.
alert(options[e.index].companyname);
}
});
dialog.show();
}
I looked at these links
http://www.tokbox.com/opentok/api/tools/js/documentation/overview/publish.html
http://www.tokbox.com/opentok/api/tools/js/tutorials/overview
but their are no examples for publishingunpublishing manually, that is, publishing/unpublishing without using 'streamCreated'/'streamDestroyed' event handler respectively.
The reason I want to do this is that I have a button to publish/unpublish so that the user can do it at will.
Is there a way to do this?
Yes and it is very simple. Check out the prepublish source code to see how. There are 2 functions, startPublishing() and stopPublishing() which achieve this.
Primarily they use session.publish(publisher);to publish and session.unpublish(publisher); to unpublish.
Here is code I have used to work off:
// Called by a button to start publishing to the session
function startPublishing() {
if (!publisher) {
var parentDiv = document.getElementById("myCamera");
var publisherDiv = document.createElement('div'); // Create a div for the publisher to replace
publisherDiv.setAttribute('id', 'opentok_publisher');
parentDiv.appendChild(publisherDiv);
var publisherProps = {
width : VIDEO_WIDTH,
height : VIDEO_HEIGHT
};
publisher = TB.initPublisher(apiKey, publisherDiv.id, publisherProps); // Pass the replacement div id and properties
session.publish(publisher);
show('unpublishLink');
hide('publishLink');
}
}
//Called by a button to stop publishing to the session
function stopPublishing() {
if (publisher) {
session.unpublish(publisher);
}
publisher = null;
show('publishLink');
hide('unpublishLink');
}
I am creating a dynamic context menu and as it is expected I would like to menu to be closed when the mouse leaves the menu box. I have used :
var dlg = new dijit.Menu({
onMouseLeave: function(event){
dijit.popup.close(dlg);
}
});
But when i go out side the box nothing happens. If I put same function inside the MenuItems then when I leave the MenuItem box it closes the box.
Any comment?
This would be because the dijit.Menu does not register onMouseLeave on its domNode.
To do this manually, following is all you need: (havent sampled a test though should work)
var myconnects = []
var dlg = new dijit.Menu({
destroy: function() { // for a neat garbage collections, remove listeners
var ch;
while(ch = myconnects.pop()) ch.disconnect();
this.inherited();
}
...
});
myconnects.push(dojo.connect(dlg.domNode, "onmouseleave", dojo.hitch(dlg, function() {
dijit.popup.close(this);
});