I am trying to set up a context menu in my javascript project. Here is the code I have for the json data of the tree and the creation of the tree.
let json_data = {
'core': {
'data': [
{
'text': 'First',
'state': {
'opened': false,
'selected': false
},
'children': [
{
'text': 'First'
},
{
'text': 'Second'
},
{
'text': 'Third'
}
]
},
{
'text': 'Second',
'state': {
'opened': false,
'selected': false
},
'children': [
{
'text': 'First'
},
{
'text': 'Second'
},
{
'text': 'Third'
}
]
},
{
'text': 'Third',
'state': {
'opened': false,
'selected': false
},
'children': [
{
'text': 'First'
},
]
}
]
},
'plugins': ['contextmenu'],
'contextmenu' : {
'items': this.customMenuOptions
}
};
tree.jstree(json_data).bind("select_node.jstree", function(e, data){});
console.log(tree[0]);
}
And here is the code I have for customMenuOptions:
customMenuOptions(node) {
console.log(node);
let items = {
'item1': {
'label': 'item1',
'action': function(){}
},
'item2': {
'label': 'item2',
'action': function(){}
}
};
return items;
}
I know the right click functionality is working because whenever I right click on the any node on the tree, the print statement at the top of customMenuOptions appears in the console; however, the menu does not show up. Any help would be appreciated. Thanks.
Fixed the issue by increasing the z-index of the context menu element, so that it is not hidden behind the rest of the elements.
Related
I am creating a form builder in Angular, I used Lam Phuoc ThinhI work for reference, check his work here
<https://codepen.io/thinhlam/pen/BowEPp>
Now the problem is I have this 3 arrays, Current Field, Form Fields and Draggable Fields. Everytime I dragged a field, like for example the Header Field and then I changed the text or value of that field, the Draggable Fields is also affected. So if i dragged another Header field the value is the same with the first header field that i drag. Please check the image below.
image
app.component.html
<div *ngFor="let set of CurrentField.Settings; let i = index; trackBy:trackByIdx" [ngSwitch]="set.Type">
<div *ngSwitchCase="'textarea'" class="form-group">
<label for="textarea-{{i}}">{{set.Name}}</label>
<input [name]="'textarea' + i" type="text" class="form-control" [(ngModel)]="set.Value">
</div>
</div>
app.component.ts
FormFields: any;
CurrentField: any;
guid: number;
DragElements = [{
'Name': "Header",
"Type": "textLabel",
'Icon': "fa fa-header",
'Settings': [{
'Name': 'Field Label',
'Value': 'Header',
'Type': 'textarea'
}]
}, {
'Name': "Columns",
"Type": "columns",
'Icon': "fa fa-columns",
'Settings': [{
'Name': 'Number of Columns',
'Value': 0,
'PossibleValue': [2,3,4]
}, {
'Name': 'Column',
'Columns': []
}],
}, {
'Name': "Image",
"Type": "image",
'Icon': "fa fa-image",
'Settings': [{
'Name': 'Field Label',
'Value': 'Image',
'Type': 'textarea'
}]
}, {
'Name': "Single Text",
'Type': "text",
'Icon': "fa fa-font",
'Settings': [{
'Name': 'Field Label',
'Value': 'Single Text',
'Type': 'text'
}]
}, {
'Name': "Number",
'Type': "number",
'Icon': "fa fa-th-large",
'Settings': [{
'Name': 'Field Label',
'Value': 'Number',
'Type': 'text'
}]
}, {
'Name': "Date",
'Type': "date",
'Icon': "fa fa-calendar",
'Settings': [{
'Name': 'Field Label',
'Value': 'Date',
'Type': 'text'
}]
}, {
'Name': "Single Selection",
"Type": "dropdown",
'Icon': "fa fa-dot-circle-o",
'Settings': [{
'Name': 'Field Label',
'Value': 'Single Selection',
'Type': 'text'
}]
}, {
'Name': "Pagaraph Text",
"Type": "textarea",
'Icon': "fa fa-align-left",
'Settings': [{
'Name': 'Field Label',
'Value': 'Paragraph Text',
'Type': 'text'
}]
}];
constructor(
private cd: ChangeDetectorRef,
private zone: NgZone,
) {}
ngOnInit() {
this.CurrentField = {};
this.FormFields = [];
this.guid = 1;
}
createNewField = function() {
return {
'id': ++this.guid,
'Name': '',
'Settings': [],
'Active': true,
'ChangeFieldSetting': function(Value, SettingName) {
switch (SettingName) {
// case 'Field Label':
// this.Settings[0].Value = Value;
// // console.log(Value);
// break;
case 'Image Alignment':
this.Settings[2].DefaultAlignment = Value;
break;
case 'Columns':
let columns : any = {};
this.Settings[0].Value = Value;
for(let i = 0; i < Value; i++) {
columns = {
'ID': i + "-" + this.id,
'Title': 'Column '+i,
'Items': []
}
this.Settings[1].Columns.push(columns);
}
console.log(this);
break;
default:
break;
}
},
'GetFieldSetting': function(settingName) {
let result = {};
let settings = this.Settings;
settings.forEach((index, set) => {
if (index.Name == settingName) {
result = index;
return;
}
});
if (!Object.keys(result).length) {
settings[settings.length - 1].Options.forEach((index, set) => {
if (index.Name == settingName) {
result = index;
return;
}
});
}
return result;
}
};
}
changeFieldName = function(Value) {
this.CurrentField.Name = Value;
this.CurrentField.Settings[0].Value = this.CurrentField.Name;
}
removeElement = function(idx){
if(this.FormFields[idx].Active) {
this.CurrentField = {};
}
this.FormFields.splice(idx, 1);
};
addElement(ele, idx) {
// this.zone.run(() => {
this.CurrentField.Active = false;
this.CurrentField = this.createNewField();
Object.assign(this.CurrentField, ele);
if (idx == null) {
this.FormFields.push(this.CurrentField);
} else {
this.FormFields.splice(idx, 0, this.CurrentField);
}
// });
};
activeField = function(f) {
this.CurrentField.Active = false;
this.CurrentField = f;
f.Active = true;
};
Wherever you are using
Object.assign(this.CurrentField,ele);
like operations
deep clone before pushing.
Object.assign(this.CurrentField, JSON.parse(JSON.stringify(ele)));
This is one way of deep cloning which has its pros and cons. But your solution will be to deep clone using any suitable method.
I'm building a configurator in AngularJS that uses the object $scope.data to allow users to edit the object via the front-end. The user can then save this object to a separate array in $scope.builds, allowing them to have multiple configurations. Here is the function that adds another configuration to $scope.builds.
$scope.addition = function(){
var newData = angular.copy($scope.data);
$scope.builds.push(newData);
}
Unfortunately, despite using the angular.copy function, all of the objects in the array of $scope.builds seem to be the same $scope.data object duplicated over and over.
EDIT:
Here is an abridged version of what $scope.data looks like:
$scope.data = [
{
'title': 'Select your configuration',
'required': true,
'options': [
{
'name': 'Option 1',
'select': true,
'filter': true
}, {
'name': 'Option 2',
'select': false,
'filter': true
}, {
'name': 'Option 3',
'select': false,
'filter': true
}
]
}, {
'title': 'Select your configuration',
'required': true,
'options': [
{
'name': 'Option 1',
'select': true,
'filter': true
}, {
'name': 'Option 2',
'select': false,
'filter': true
}, {
'name': 'Option 3',
'select': false,
'filter': true
}
]
}
];
I want to bind the Local and Remote Datas to the same Kendo UI Control.
Here I am using Kendo treeview.
Here First 2 nodes are Hardcoded(Local data) and the third needs to from Database(Remote Data).So now how to handle this.
$("#AftermarketTreeView").kendoTreeView({
dataTextField: ["text", "text", "MC_ANALYSIS_NAME"],
dataSource: {
data: [
{
text: "Initiate",
items: [
{ text: "Parts Selection", haschildren: false },
{ text: "Assumptions", haschildren: false },
{ text: "Team", haschildren: false },
]
},
{
text: "Analyze",
items: [
{ text: "Part Attributes", haschildren: false },
{ text: "Aftermarket Evaluation", haschildren: false }
]
},
{
text: "Monto Carlo",
items: [
{ text: "Monto Carlo", haschildren: true }
]
}
],
schema: {
model: {
hasChildren: "items",
children: {
schema: {
data: "items",
model: {
hasChildren: "haschildren",
children: {
schema: {
// override the schema.data setting from the parent
data: function (response) {
return response;
}
},
transport: {
read: {
url: ResolveUrl("/CreateMaintainAnalysis/GetMontoCarloData/"),
dataType: "jsonp",
data:onDataSendAnalysisID,
}
},
}
}
}
}
}
}
}
});
So How to bind it using Kendo TreeView ?
You can't have both a local and remote data source on the same element. The best option would be a remote data source only and have it return all of the options you're looking for.
I'm using JSTree, and this is my setup for the contextmenu plugin:
"contextmenu":{
"items": function($node) {
return {
"Remove": {
"separator_before": false,
"separator_after": false,
"label": "Delete group",
"action": function (obj) {
$tree.jstree("get_children_dom", $node).each(function(child){
$tree.jstree("move_node", $tree.jstree("get_node", child, true), "#", "last", function(node, parent, pos){
alert(1);
});
});
$tree.jstree("delete_node", $node);
}
}
};
}
}
basically, I want the children of the group that's being deleted to be moved upwards. The function I've currently got should place the nodes at the end, but how can I place them on the deleted node's place? Also, the current code doesn't work - what am I doing wrong?
Last but not least, how can I check the node type before removing?
Thanks in advance
basically, I want the children of the group that's being deleted to be moved upwards.
If by upwards you mean get into the position of the node that got deleted, check the following example:
var data = [{
'text': 'item 1',
'children': [{
text: 'item 1-1',
children: [{
text: 'item 1-1-1',
children: [{
text: 'item 1-1-1-1'
}, {
text: 'item 1-1-1-2'
}]
}, {
text: 'item 1-1-2'
}, {
text: 'item 1-1-3'
}]
}, {
text: 'item 1-2',
children: [{
text: 'item 1-2-1'
}, {
text: 'item 1-2-2'
}]
}, {
text: 'item 1-3',
children: [{
text: 'item 1-3-1'
}, {
text: 'item 1-3-2'
}]
}, {
text: 'item 1-4',
children: [{
text: 'item 1-4-1'
}, {
text: 'item 1-4-2'
}]
}]
}, {
'text': 'item 2',
children: [{
text: 'item 2-1',
children: [{
text: 'item 2-1-1'
}, {
text: 'item 2-1-2'
}]
}, {
text: 'item 2-2',
children: [{
text: 'item 2-2-1'
}, {
text: 'item 2-2-1'
}]
}, {
text: 'item 2-3'
}]
}, {
'text': 'item 3',
children: [{
text: 'item 3-1',
children: [{
text: 'item 3-1-1'
}, {
text: 'item 3-1-2'
}]
}, {
text: 'item 3-2'
}]
}, {
'text': 'item 4 (you cannot delete this one)',
'disableDelete': true,
children: [{
text: 'item 4-1'
}, {
text: 'item 4-2'
}, {
text: 'item 4-3'
}]
}];
var $tree = $('#jstree_demo').jstree({
'plugins': ['contextmenu'],
'core': {
'animation': 0,
'check_callback': true,
'themes': {
'stripes': true
},
'data': data
},
'contextmenu': {
'items': function($node) {
return {
'Remove': {
'separator_before': false,
'separator_after': false,
'label': 'Delete group',
'action': function(obj) {
if ($node.original.disableDelete) {
document.write('deletion is forbidden for this node');
return;
}
var nodes = $node.children.slice(0); // jstree behaves erratic if we try to move using $node.children directly, so we will clone the array to prevent this issue
var $row = $(obj.reference[0].closest('li'));
$tree.jstree('move_node', nodes, $node.parent, $row.index());
$tree.jstree('delete_node', $node);
}
}
};
}
}
});
<div id="jstree_demo"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">
Last but not least, how can I check the node type before removing?
I´ve added a small sample to show you how you can accomplish it. Check the declaration of a custom attribute disableDeletion to a node:
var data = [{'text': 'item 4 (you cannot delete this one)', 'disableDelete': true}]
And the validation in the context menu action:
if ($node.original.disableDelete) {
document.write('deletion is forbidden for this node');
return;
}
I can access a list (as a container of items) in a controller but I do not know how to access list items properties.
How to create the correct ComponentQuery rule? I tried 'list > item' but it does not work.
Each item has it's title but I get 'undefined' as output in selectSection.
Ext.define( 'UGP.controller.BeginList',
{
extend: 'Ext.app.Controller',
config:
{
views: [ 'BeginList' ],
control:
{
'list':
{
select: 'selectSection'
}
}
},
selectSection: function()
{
Ext.Msg.alert( 'title=' + this.title );
}
}
);
The BeginList.js with the list component:
Ext.define( 'UGP.view.BeginList',
{
extend: 'Ext.List',
config:
{
fullscreen: true,
itemTpl: '{title}',
data:
[
{ title: 'Chapter 1', id: 0, action: "selectSection" },
{ title: 'Chapter 2', id: 1, action: "selectSection" },
{ title: 'Chapter 3', id: 2, action: "selectSection" },
{ title: 'Chapter 4', id: 3, action: "selectSection" }
]
}
}
);
You can see in the select event documentation that it passes arguments. So you can change the signature of your selectSection function to this :
selectSection: function (list, record) {
Ext.Msg.alert( 'title=' + record.get( 'title' ) );
}
You can also take a look at the itemTap event which usually the one used to detect tap events on a list item.
Hope this helps