I'm using context menu is jsTree and here's my code:
"contextmenu" : {
"items": function ($node) {
return {
"create": {
"separator_before": false,
"separator_after": false,
"label": "Créer",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
inst.create_node(obj, {}, "last", function (new_node) {
new_node.type = "child";
setTimeout(function () {
inst.edit(new_node);
}, 0);
});
}
},
"Rename": {
"separator_before": false,
"separator_after": false,
"label": "Renommer",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
inst.edit(obj);
}
},
"Remove": {
"separator_before": false,
"separator_after": false,
"label": "Supprimer",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
inst.delete_node(obj);
}
}
};
}
},
If I am renaming a node and I decide to cancel it, I just press the escape button and the node returns to its previous name.
If I want to create a node, it creates the node first and put it into editing mode. Now if I press escape, the editing mode is exited but the node remains. What I want to accomplish is if I'm in creation mode, and I press escape, it should remove the newly created node.
Any ideas on how I can do this?
The node edit function itself accepts a callback as a second argument. The callback function when called, receives a boolean flag indicating if the user cancelled the edit.
inst.edit(new_node,"New node",function(node,bStatus,bCancelled){
if(bCancelled){
this.delete_node(node);
}
});
The current node and the instance is also returned which can be used to delete the node.
Reference: https://www.jstree.com/api/#/?q=edit
Related
I'm using ag-Grid Enterprise Vue.
I see in the docs how to enable a "context menu" that is available by right-clicking any individual cell.
I instead would love to have a special column (pinned to the right) that has a button (maybe looking like ⚙ or ...) that opens a menu upon left-click.
How could I go about enabling this? I have found no examples in the docs.
Ag-grid Cell containing menu button is a similar question but has no answer.
From this comment on this ag-grid-enterprise issue, I was able to fork the example, and I think it will work for my situation.
The relevant code is:
var gridOptions = {
columnDefs: columnDefs,
enableRangeSelection: true,
getContextMenuItems: getContextMenuItems,
allowContextMenuWithControlKey: true,
onCellClicked: params => {
console.log(params);
if(params.column.colDef.field === '...'){
params.api.contextMenuFactory.showMenu(params.node, params.column, params.value, params.event)
}
},
onCellContextMenu: params => {
params.api.contextMenuFactory.hideActiveMenu()
}
};
function getContextMenuItems(params) {
console.log('getContextMenuItems', params);
const node = params.node;
console.log('node.id, node.rowIndex, node.data', node.id, node.rowIndex, node.data);
var result = [
{
name: `Alert 'Row ${node.rowIndex + 1}'`,
action: function() {
window.alert(`Row ${node.rowIndex + 1}`);
},
cssClasses: ['redFont', 'bold']
},
'separator',
{
name: 'Checked',
checked: true,
action: function() {
console.log('Checked Selected');
},
icon: '<img src="../images/skills/mac.png"/>'
},
'copy' // built in copy item
];
return result;
}
I did the steps to catch and handle invalid hashes with SAPUI5 but my application is not working.
When i try to navigate to NotFound view changing the Hash i only gets an Info message:
But the view isn't displayed.
[EDIT]:
Adding source code files:
Here i added the bypassed section
I've created the target in Targets section of the manifest:
This is the NotFound.controller.js
sap.ui.define([
"my/path/controller/BaseController"
], function (BaseController) {
"use strict";
return BaseController.extend("my.path.controller.NotFound", {
onInit: function () {
var oRouter, oTarget;
oRouter = this.getRouter();
oTarget = oRouter.getTarget("NotFound");
oTarget.attachDisplay(function (oEvent) {
this._oData = oEvent.getParameter("data"); // store the data
}, this);
},
// override the parent's onNavBack (inherited from BaseController)
onNavBack : function (oEvent){
// in some cases we could display a certain target when the back button is pressed
if (this._oData && this._oData.fromTarget) {
this.getRouter().getTargets().display(this._oData.fromTarget);
delete this._oData.fromTarget;
return;
}
// call the parent's onNavBack
BaseController.prototype.onNavBack.apply(this, arguments);
}
});
});
Here the NotFound.view.xml:
<mvc:View
controllerName="my.path.controller.NotFound"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<MessagePage
title="{i18n>NotFound}"
text="{i18n>NotFound.text}"
description="{i18n>NotFound.description}"
showNavButton="true"
navButtonPress="onNavBack"/>
</mvc:View>
And here the onInit method at the App controller:
onInit: function(){
jQuery.sap.log.setLevel(jQuery.sap.log.Level.INFO);
var oRouter = this.getRouter();
oRouter.attachBypassed(function (oEvent) {
var sHash = oEvent.getParameter("hash");
// do something here, i.e. send logging data to the backend for analysis
// telling what resource the user tried to access...
jQuery.sap.log.info("Sorry, but the hash '" + sHash + "' is invalid.", "The resource was not found.");
});
oRouter.attachRouteMatched(function (oEvent){
var sRouteName = oEvent.getParameter("name");
// do something, i.e. send usage statistics to backend
// in order to improve our app and the user experience (Build-Measure-Learn cycle)
jQuery.sap.log.info("User accessed route " + sRouteName + ", timestamp = " + new Date().getTime());
});
}
and
Any can help me?
Regards,
Check this plunker:
https://plnkr.co/edit/pxOkRSM8c97hXO6gkbpV
The key config is this on manifest.json:
"targets": {
"tgHome": {
"viewPath": "sapui5Example",
"viewName": "home"
},
"notFound": {
"viewPath": "sapui5Example",
"viewName": "NotFound",
"transition": "show"
}
}
To fire the 'not found' route, download the plunker and in the URL, after the hash just type anything and you will the the not Found Page (if you do it directly on plunker it won't work). Here is a pic:
I am using druska/native_js_drag_and_drop_helper.js to automate angular-drag-and-drop-lists
Issue :
Even after event.dataTransfer.setData(mimeType,angular.toJson(item))
dataTransfer.types is not set or probably not allowed to read in dragstart and drop event
Observation : during manual drag drop dragstart event
dataTransfer {dropEffect: "none", effectAllowed: "move", items: DataTransferItemList, types: Array(1), files: FileList}
dropEffect:"move"
effectAllowed:"move"
files:FileList
items:DataTransferItemList
types:Array(0)
__proto__:DataTransfer
DataTransferItemList {0: DataTransferItem, length: 1}
length: 0
__proto__: DataTransferItemList
DataTransferItem {kind: "string", type: "application/x-dnd"}
kind: ""type: ""
__proto__: DataTransferItem
Observation:when using custom event
dataTransfer:Object
data:Object
application/x-dnd:"[{"id":"706","title":"Ab 2","drag":false,"selected":true}]"
__proto__:Object
dropEffect:"move"
effectAllowed:"move"
getData:function (type)
setData:function (type,val)
files:Object
items:Object
types:Array(0)
I am using
var event = new CustomEvent("CustomEvent", {"cancelable": true})
event.initCustomEvent(type, true, true, null);
event.dataTransfer = {
data: {
},
setData: function(type,val) {
this.data[type] = val
},
getData: function(type) {
return this.data[type]
},
dropEffect: 'move',
effectAllowed:'move',
types: [],
items:{},
files:{}
}
I am not able to initialize dataTransfer object.
dataTransfer.items and dataTransfer.types being read only property , i don't know how to correctly
initialize them .MDN dataTransfer
Issue was setData dint had code to set DataTransfer.types that was being used by angular-drag-and-drop-lists during drag drop.
setData: function(type,val) {
this.data[type] = val
this.types[0] = type
}
Above changes fixed the issue .Drag drop working fine now using native js
My first question why I cant get into 'check_node.jstree' event although I check a checkbox in tree..
And second. Here is my tree definition each time I click expand button which trigger 'before_open.jstree' event and refresh tree with new datas.. but after it rebuild tree it triggs the the event again and post to server.. how can I just refresh tree then stop the work.
$('#tree_2').jstree({
'plugins': ["checkbox","types","json_data" ,"ui"],
'core': {
"themes" : {
"responsive": true,
"icons":true
},
'data': [{}]
},
"types" : {
"default" : {
"icon" : "fa fa-folder icon-state-warning icon-lg"
},
"file" : {
"icon" : "fa fa-file icon-state-warning icon-lg"
}
}
}).bind('check_node.jstree', function (e, data) {
debugger
alert("check_node.jstree")
}).bind('before_open.jstree', function (e, datap) {
$.ajax({
url: "../../Controller/ActiveDirectoryController.php5",
type: "POST",
dataType: "json",
data: datap.node.text,//selected node text
success: function (result) {
debugger
if(result.Objects.length>0)
{
passOpen=false;
treeData_ = prepareObjectsforTree(result.Objects);
resfreshJSTree(treeData_);
}
},
error: function (a, b, c) {
}
})
})
and rebuild jstree with response data:
function resfreshJSTree(treeDataa) {
$('#tree_2').jstree(true).settings.core.data = treeDataa;
$('#tree_2').jstree("refresh");
}
check_node.jstree will only fire if checkbox.tie_selection is set to false in your config. If it is not - listen for select_node.jstree (or changed.jstree).
As for the second question - do not implement lazy loading this way - please read the docs on lazy loading - that is not the way to achieve it.
In jsTree component available a ContextMenu plugin.
But it's available only when user clicked on specific node.
I need to add context menu by clicking on component's background (to add root nodes, for example).
Is it possible to attach a context menu plugin for background ?
Yes you can, but you need to define all actions you need to be available, as the defaults are related to a node, so they won't work (rename, delete, etc).
This will show a menu when the tree container is clicked and will show an option to create a root node:
$('#tree').on('contextmenu.jstree', function (e) {
e.preventDefault();
if($(e.target).is('#tree')) {
$(document).one("context_show.vakata.jstree", $.proxy(function (e, data) {
var cls = 'jstree-contextmenu jstree-default-contextmenu';
$(data.element).addClass(cls);
}, this));
$.vakata.context.show($(this), { 'x' : e.pageX, 'y' : e.pageY }, {
"create" : {
"separator_before" : false,
"separator_after" : false,
"_disabled" : false,
"label" : "Create",
"action" : function (data) {
var inst = $.jstree.reference(e.target);
inst.create_node(null, {}, "last", function (new_node) {
setTimeout(function () { inst.edit(new_node); },0);
});
}
}
});
}
});