I simply want to delete a node from my jstree but so far no luck.
HTML:
<!doctype html>
<html>
<head>
<title> </title>
<!-- scripts -->
<script src="../js/jquery-2.1.4.js"></script>
<script src="../js_tree/dist/jstree.js"></script>
<script src="../js/tree.js"></script>
<!-- Styles -->
<link rel='stylesheet' href="../css/main.css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="../js_tree/dist/themes/default/style.min.css">
<!-- <link rel="icon" href="images/favicon.ico"> -->
<!-- Metadata -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
</head>
<body>
<button onclick="deletor();">delete</button>
<div id="tree">
<!-- LOADS JSON DATA-->
</div>
</body>
</html>
The javascript: (I tried 2 ways: in the context menu and through the function deletor). I don't get any errors, it just doesn't do anything.
$(document).ready(function(){
adjustModal();
$('#tree').jstree({
'core' : {
'data' : [
{ "text" : "Root node", "children" : [
{ "text" : "Child node 1" },
{ "text" : "Child node 2" }
]}
]
},
"search" : {
"case_insensitive" : true
},
"plugins": ["contextmenu", "dnd", "search", "wholerow"],
"contextmenu" : {
"items": customMenu
}
});
$('#tree').on("changed.jstree", function (e, data) {
console.log(data.node)
console.log(data.node.text);
});
});
function deletor(){
// alert("hey");
var ref = $('#tree').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
ref.delete_node(sel);
}
function customMenu(node) {
// The default set of all items
var tree = $('#tree');
var items = {
addItem: {
label: "Add Item",
action: function () {
console.log("rename");
}
},
renameItem: { // The "rename" menu item
label: "Rename",
action: function () {
console.log("Rename");
}
},
deleteItem: { // The "delete" menu item
label: "Delete",
action: function () {
var ref = $('#tree').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
ref.delete_node(sel);
}
}
};
if ($(node).hasClass("folder")) {
// Delete the "delete" menu item
delete items.deleteItem;
}
return items;
}
Can you guys tell me what I'm doing wrong?
Ok, so I figured it out. In your tree core section you have to allow the user to modify the tree. Changed the js to this: check_callback section
$('#tree').jstree({
'core' : {
'check_callback' : function (operation, node, node_parent, node_position, more) {
// operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
// in case of 'rename_node' node_position is filled with the new node name
return operation === 'delete_node' ? true : false;
},
'data' : [
{ "text" : "Root node", "children" : [
{ "text" : "Child node 1" },
{ "text" : "Child node 2" }
]}
]
},
"search" : {
"case_insensitive" : true
},
"plugins": ["contextmenu", "dnd", "search", "wholerow"],
"contextmenu" : {
"items": customMenu
}
});
or simply if you want to allow all actions on the tree:
'check_callback': true,
Related
In a table, there is a drop-down for each row.
And every row has unique ID and based on it the values should be populated on UI
ID Country
1 India/Malasia/UK
2 Paris/spain/USA
3 Canada/Chile/China
So, I am trying to send the path of ObjectID.
The below code doesn't work. Not sure how to achieve this.
oEditTemplate = new Select({
forceSelection: false,
selectedKey: sPath,
items: {
path: {
path: "tempModel>ObjectId",
formatter: this._editableFormatter.bind(this, sName)
},
templateShareable: false,
template: new ListItem({
key: "{tempModel>value}",
text: "{tempModel>value}"
})
}
});
You can achieve it by using custom data and onAfterRendering. You can refer this JSBIN example
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.table,sap.m"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-theme="sap_bluecrystal"></script>
<script>
var ITEMS = {
"1": ["India", "Malasia", "UK"],
"2": ["Paris", "Spain", "USA"],
"3": ["Canada", "Chile", "China"]
};
sap.m.Select.extend("CustomSelect", {
metadata: {
properties: {
countryId: "string"
}
},
renderer: {}
});
var oSelect = new sap.m.Select({
customData: {
key: "countryId",
value: "{ID}"
}
});
oSelect.addEventDelegate({
onAfterRendering: function(oEvent) {
var src = oEvent.srcControl;
var countryId = src.data("countryId");
if (!!countryId && src.getItems().length === 0) {
ITEMS[countryId].forEach(function(i) {
src.addItem(new sap.ui.core.Item({
text: i,
value: i
}));
});
}
}
});
var oTable = new sap.ui.table.Table({
rows: '{/d/results}',
columns: [
new sap.ui.table.Column({
label: new sap.m.Label({text: "ID"}),
template: new sap.m.Text({text:"{ID}"}),
filterProperty: 'District'
}),
new sap.ui.table.Column({
label: new sap.m.Label({text: "Country"}),
template: oSelect
})]
});
var model = new sap.ui.model.json.JSONModel({
d: {
results: [
{ ID: "1"},
{ ID: "2"}
]
}
});
oTable.setModel(model);
oTable.placeAt('content');
</script>
</head>
<body id="content" class="sapUiBody sapUiSizeCompact">
</body>
</html>
i am showing a table of picture in the page
var oTemp = new sap.m.ColumnListItem({
vAlign: "Middle",
cells: [
new sap.m.VBox({
items: [
new sap.m.Image({
src: {
path: "myModel>ImageLink",
},
densityAware:false,
decorative: false,
error: function(oEvent) {
this.setSrc(oEvent.getSource().getProperty("src"));
}
})
]
})
]
});
otable.bindItems({
path: "myModel>/Images",
template: oTemp
});
znd in xml
<m:Table id="imageTable">
<m:headerToolbar>
<m:OverflowToolbar>
<m:Title text="some text"/>
</m:OverflowToolbar>
</m:headerToolbar>
<m:columns>
<m:Column>
</m:Column>
</m:columns>
</m:Table>
and it always enter in the error function despite in the debugger the image is l but once i open the image elsewhere the images are loaded perfectly
Will this help? http://jsbin.com/xusikeh/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
<style type="text/css">
.sapMObjLTitle {
cursor: pointer;
}
</style>
<!-- XML-based view definition -->
<script id="oView" type="sapui5/xmlview">
<mvc:View height="100%" controllerName="myView.Template"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:m="sap.m">
<m:Table id="imageTable">
<m:headerToolbar>
<m:OverflowToolbar>
<m:Title text="some text" />
</m:OverflowToolbar>
</m:headerToolbar>
<m:columns>
<m:Column>
</m:Column>
</m:columns>
</m:Table>
</mvc:View>
</script>
<script>
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel',
'sap/m/ColumnListItem',
'sap/m/VBox',
'sap/m/Image'
], function(jQuery, Controller, JSONModel, ColumnListItem, VBox, Image) {
return Controller.extend("myView.Template", {
onInit: function(oEvent) {
var oView = this.getView();
var oTable = oView.byId("imageTable");
oTable.bindItems({
path: "myModel>/Images",
template: new ColumnListItem({
vAlign: "Middle",
cells: new sap.m.VBox({
items: new Image({
src: '{myModel>ImageLink}',
densityAware:false,
decorative: false
})
})
})
});
oView.setModel(new JSONModel({
Images: [{
ImageLink: "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
}]
}), "myModel");
}
});
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody">
<div id='content'></div>
</body>
</html>
<template is="dom-repeat" items="[[routes]]">
<div>{{item.color}} | {{item.Index}}</div>
<google-map-directions id="{{item.name}}"
renderer-options='{"draggable":true,"polylineOptions":{"draggable":true,"strokeColor":"{{item.color}}"},"routeIndex":1}'
start-address="{{item.startAddress}}"
end-address="{{item.endAddress}}"
travel-mode="DRIVING"
waypoints='[{"location": "Palo Alto"}, {"location": "San Mateo"}]'>
</google-map-directions>
<div id="dirt"></div>
</template>
I am creating some routes using dom-repeat. I would like these routes to have different colors. They don't. It seems as if each route is using the same renderer. How can I change the renderer for each route?
It turns out the only missing piece in your code is one character for the attribute-binding.
In order for the compound binding to be deserialized into a JSON object, the following is required:
attribute-binding syntax (i.e., $=) even though binding to a property
Single-quotes around the value instead of double-quotes
the target property must be of type Object (which is true for <google-map-directions>.rendererOptions)
// template
<google-map-directions map="[[map]]"
renderer-options$='{"draggable":true,"polylineOptions":{"draggable":true,"strokeColor":"{{item.color}}"},"routeIndex":1}'
... >
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="google-map/google-map.html">
<link rel="import" href="google-map/google-map-directions.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<style>
google-map {
height: 600px;
}
</style>
<template>
<google-map map="{{map}}" latitude="37.779"
longitude="-122.3892"></google-map>
<template is="dom-repeat" items="{{routes}}">
<google-map-directions map="[[map]]"
start-address="{{item.startAddress}}"
end-address="{{item.endAddress}}"
travel-mode="BICYCLING"
renderer-options$='{"draggable":true,"polylineOptions":{"draggable":true,"strokeColor":"{{item.color}}"},"routeIndex":1}'
waypoints="{{item.waypoints}}"></google-map-directions>
</template>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
properties: {
routes: {
type: Array,
value: function() {
return [
{
color: '#0000FF',
startAddress: 'San Francisco',
endAddress: 'Mountain View',
waypoints: [{location: 'Palo Alto'}, {location: 'San Mateo'}]
},
{
color: '#FF0000',
startAddress: 'Oakland',
endAddress: 'San Jose',
waypoints: [{location: 'Pleasanton'}, {location: 'Union City'}]
},
];
}
}
}
});
});
</script>
</dom-module>
</body>
codepen
Alternatively, you could use a computed binding that returns the appropriate renderer options based on a given color and route index:
// template
<google-map-directions map="[[map]]"
renderer-options="{{_getRendererOptions(item.color, index)}}"
... >
// script
Polymer({
...
_getRendererOptions: function(strokeColor, index) {
return {
draggable: true,
polylineOptions: {
draggable: true,
strokeColor: strokeColor,
routeIndex: index
}
};
}
});
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="google-map/google-map.html">
<link rel="import" href="google-map/google-map-directions.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<style>
google-map {
height: 600px;
}
</style>
<template>
<google-map map="{{map}}" latitude="37.779"
longitude="-122.3892"></google-map>
<template is="dom-repeat" items="{{routes}}">
<google-map-directions map="[[map]]"
start-address="{{item.startAddress}}"
end-address="{{item.endAddress}}"
travel-mode="BICYCLING"
renderer-options="{{_getRendererOptions(item.color, index)}}"
waypoints="{{item.waypoints}}"></google-map-directions>
</template>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
properties: {
routes: {
type: Array,
value: function() {
return [
{
color: '#0000FF',
startAddress: 'San Francisco',
endAddress: 'Mountain View',
waypoints: [{location: 'Palo Alto'}, {location: 'San Mateo'}]
},
{
color: '#FF0000',
startAddress: 'Oakland',
endAddress: 'San Jose',
waypoints: [{location: 'Pleasanton'}, {location: 'Union City'}]
},
];
}
}
},
_getRendererOptions: function(strokeColor, index) {
return {
draggable: true,
polylineOptions: {
draggable: true,
strokeColor: strokeColor,
routeIndex: index
}
};
}
});
});
</script>
</dom-module>
</body>
codepen
I want to plot a scatter chart with timestamp values in x-axis. 'Power' and 'No of plugs' in y-axis. The Power values is in the range of 0 - 60000 and 'No of plugs' in the range of 0 - 600. When I tried with the below code I'm getting wrong plot.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Power Measurements</title>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m,sap.viz,sap.ui.layout">
</script>
<script>
var inputData = $powerValues;
var oModel = new sap.ui.model.json.JSONModel({
graphData : inputData
});
var dataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [
{
axis : 1,
name : 'Timestamp',
value : "{timestamp}"
}
],
measures : [
{
group: 1,
name : 'Power (in KW.h)',
value : '{power}'
},
{
group: 2,
name : 'No of Plugs',
value : '{plugs}'
}
],
data : {
path : "/graphData"
}
});
var line = new sap.viz.ui5.Scatter({
id : "idscatter",
width : "100%",
height : "400px",
title : {
visible : true,
text : 'Power Utilisation'
},
xAxis : {
title : {
visible : true
}
},
yAxis : {
title : {
visible : true
}
},
dataset : dataset
});
line.setModel(oModel);
line.placeAt("content");
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
Click here for existing output chart
In the above chart I need timestamp as x-axis. 'No. of plugs' and 'Power' as two different plots in the same chart (Values of these two are in different ranges).
Thanks.
I have been developing the application and I use the following code for JEditable:
<script type="text/javascript" charset="utf-8">
$(function()
{
$(".field").editable("http://"+document.location.host+"/index.php/welcome/update_record",
{
event : "mouseover",
style : "inherit",
autogrow: {
lineHeight : 0,
maxHeight : 0
},
submitdata: function (value, settings) {
return { "old_value": this.revert};
},
callback: function(value, settings)
{
}
});
});
I need to disable autogrowing of the field in order to if user moves on a fields then the field won't grow. Now field grows if user moves on it. I need it, please help. Thank you very much.
I have used with success
width : '100%' as a parameter. Give it a try.
<script type="text/javascript" charset="utf-8">
$(function()
{
$(".field").editable("http://"+document.location.host+"/index.php/welcome/update_record",
{
event : "mouseover",
width : '100%'
style : "inherit",
autogrow: {
lineHeight : 0,
maxHeight : 0
},
submitdata: function (value, settings) {
return { "old_value": this.revert};
},
callback: function(value, settings)
{
}
});
});