I am using the javascript library JsTree the current version to build a tree-kind structure in a web application. I would like to know how best to select a particular node within the tree once the tree is loaded.
Try using the ready.jstree event, than the jstree.select_node() method.
The ready event will occur when the tree is loaded, than you can select the node you want.
Set the state property "selected=true" for the particular node to be selected on tree load.
$('#jstree_test').jstree({
core: {
data: [
{
id: 'parent1',
parent: '#',
text: 'p1',
'state' : {
'opened' : true,
'selected' : true
}
},
{
id: 'child1',
parent: 'parent1',
text: 'c1'
},
{
id: 'child2',
parent: 'parent1',
text: 'c2'
},
{
id: 'child3',
parent: 'parent1',
text: 'c3'
}
]
}
});
JS Bin Demo Link
Related
I have a TabPanel like this:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.TabPanel', {
items: [
{
title: "",
reference: 'tabpanel',
itemId: 'tab1',
items: [{
itemId: 'firstTab',
xclass: 'viewClass'
}],
}, {
title: "",
reference: 'tab2',
layout: 'fit',
items: [{
xclass: "view",
}]
}
]
in the xclass component there is the path of a class where is defined the view. In the view should be a button, after tap on it, the view should refresh and show another class, for example the view should be defined by 'viewClass2' and not anymore by 'viewClass' I'm imaging a function triggered on button tap like this:
Ext.getCmp('tab1').remove('firstTab');
Ext.getCmp('tab1').add({
itemId: 'firstTab',
xclass: 'viewClass2'
})
BUT I must use itemId and not id so I cannot use "Ext.getCmp" and i should use Ext.Component.query but I don't know how to manage remove and add operations
You have to get reference of the component first, then remove it.
Ext.create('Ext.TabPanel', {
id: 'myTabPanel',
items: [
{
title: "",
reference: 'tabpanel',
itemId: 'tab1',
items: [{
itemId: 'firstTab',
xclass: 'viewClass'
}],
}, {
title: "",
reference: 'tab2',
layout: 'fit',
items: [{
xclass: "view",
}]
}
];
var tabPanel = Ext.getCmp('myTabPanel');
var tab = tabPanel.getComponent("tab1");
// remove by id
tab.remove(tab.down("[itemId='firstTab']").id);
// remove by reference
tab.remove(tab.down("[itemId='firstTab']"));
I am implementing primeng multiselect with Angular5, javascript. when I am selecting option from the multiselect dropdown, I am getting all options getting selected.
<p-multiSelect [options]="options" appendTo="body" [maxSelectedLabels]="2" [defaultLabel]="defaultLabel"></p-multiSelect>
options: Array<any> = [
{ name: "Options1", label: "Options1", type: "string", selected: true, id: 1 },
{ name: "Options2", label: "Options2", type: "number", selected: false, id: 2 },
{ name: "Options3", label: "Options3", type: "boolean", selected: false, id: 3 },
{ name: "Options6", label: "Options6", type: "number", selected: false, id: 4 },
{ name: "Options7", label: "Options7", type: "ddn", selected: false, id: 5 },
{ name: "Options8", label: "Options8", type: "date", selected: false , id: 6}
];
When I am using 'value' in json, the functionality is working fine. But, this is a restriction.
'MultiSelect requires a value to bind and a collection of options. There are two alternatives of how to define the options property; one way is providing a collection of SelectItem instances whereas other way is providing an array of arbitrary objects along with the optionLabel property to specify the field name of the option. SelectItem API is designed to have more control on how the options are displayed such as grouping and disabling however in most cases an arbitrary object collection will suffice. Example below demonstrates both cases.'
This is written in Primeng documents for getting started with Multiselect
I tried 'datakey' also as per documentation, but still, I am not able to get the desired result.
I want to bind options with any other key other than 'value' and then on selecting an option, it should particular and only option.
so here is my code
$('#parent').bind(
'tree.click',
function(event) {
// The clicked node is 'event.node'
var node = event.node;
$('#parent').tree('loadDataFromUrl', 'g/admin/rules/getchildstwo/id/' + node.id, node,
function() {
alert('data is loaded');
}
);
$('#parenthide').val(node.id);
}
);
but callback function is not called and subtree is not loaded into node..i tried and loaded data seperatly with ajax and result is somthing like this:
{
label: 'تست سمپل',
id: 2540,
section: '1',
children: []
},
{
label: 'hshhsh',
id: 2541,
section: '1',
children: []
}
but still loadDataFromUrl not working and filling subtree..can anyone tell me whats wrong with my code or show me a working examlple of loading subtree wuth JQTree?
Try like this
var data = [
{
label: 'تست سمپل', id: 2540,
section: '1',
children: []
},
{
label: 'hshhsh', id: 2541,
section: '1',
children: []},
}
];
$('#parent').tree({
dataUrl: 'loadDataFromUrl',
function() {
alert('data is loaded');
}
});
I want to have a list (select) without the default -none- option using w2ui forms.
How can I remove it so only the items I put in there?
When defining your fields in the form, add showNone: false
{ name: 'field', type: 'list', options: {
items: [{ id: 0, txt: 'Adams, John' }, { id: 1, text: 'Adams2, John' }],
showNone: false }
},
In a similar way you can remove - none - for regular fields. See http://w2ui.com/web/docs/form/fields for more information.
First of all, Im new at ExtJS. I wanted your help to let me know the best way to obtain a tree menu with n recursive items in it.
In example:
FOLDER
..FOLDER
....ITEM
....FOLDER
......ITEM
......ITEM
....FOLDER
...
Im following the best practises proposed by Sencha. I was able to do a tree menu with one level, but when trying to do it for n levels, it fails (in fact, the app works but shows infinite nodes of 1st level). Clearly the issue is the model definition of my menu item, see:
Ext.define('Dashboard.model.MenuItem',{
extend: 'Dashboard.model.AbstractMenuElement',
fields:
[
{name: 'content', type: 'string'},
{name: 'skeletonFlag', type: 'string'},
{name: 'fatherId', type: 'int'}
],
associations:
[
{type: 'hasMany', model: 'Dashboard.model.MenuItem', name: 'children', mapping: 'items'}
]
});
So this model recursively creates infinite nodes. But... do you know how should i model my menu item in order to achieve the recursive menu?
Thanks!
To display a tree-like structure in Ext JS, I think your best bet is to use Ext.model.TreeModel, Ext.model.TreeStore in conjunction with Ext.tree.Panel.
Here is an simple example to match the structure you mentioned in the question:
Ext.create('Ext.tree.Panel', {
store: Ext.create('Ext.data.TreeStore', {
root: {
text: 'Root Folder',
expanded: true,
children: [
{text: 'Folder 1', children: [
{text: 'Item 1', leaf: true}
]},
{text: 'Folder 2', expanded: true, children: [
{text: 'Item 2', leaf: true},
{text: 'Item 3', leaf: true}
]},
{text: 'Folder 3', children: []}
]
}
}),
renderTo: Ext.getBody()
});
You can view this example on Plunker.