i want to bind an object to the fancytree source by reference, so that when i change any property in that object will suddenly reflect on the tree
var data = [
{title: "Node 1", key: "1"},
];
$("#tree").fancytree({
autoCollapse: true,
autoScroll: true,
checkbox: true,
selectMode: 3,
source: data
});
is this possible with fanytree ?
i tried with this code(given below) but fail
data = [{title: "Node 10", key: "1"}];
($("#tree").fancytree("getTree")).reload().done(function(){
alert("reloaded");
});
did you try this:
data = [{title: "Node 10", key: "1"}];
($("#tree").fancytree("getTree")).reload(data).done(function(){
alert("reloaded");
});
I.e. pass the new data to reload()?
Related
I am newbie in AngularJS. I need to create a TreeView Structure From JSON Object.
My Return JSON Object is looks like below.
var categoryTree = [{Name:'Item1', Childnodes : {}, id: 1},
{Name:'Item2', Childnodes : {
items = [
{Name:'Sub Item21', Childnodes : {}, id: 21}
{Name:'Sub Item22', Childnodes : {}, id: 22}
]
}, id: 2}];
Could you please help me to create a AngularJS Tree View.
Thanks in Advance.
You can create a Tree view using the Webix framework along with AngularJS.
https://github.com/TheAjinkya/webixTreeWithJava-
https://github.com/TheAjinkya/AngularWebixApplication
treedata = [{
id: "1",
value: "Book 1",
data: [{
id: "1.1",
value: "Part 1"
},
{
id: "1.2",
value: "Part 2"
}
]
},
{
id: "2",
value: "Book 2",
data: [{
id: "2.1",
value: "Part 1"
}]
}
];
tree = new webix.ui({
view: "tree"
});
tree.parse(treedata)
<script src="https://cdn.webix.com/edge/webix.js"></script>
<link href="https://cdn.webix.com/edge/webix.css" rel="stylesheet" />
Please use some sort of tree view module. They can make your life much easier. The only thing is that you need to re-format your data structure to the tree module style. You can write a service and do all re-formatting inside a service.
Some tree view module and plugin:
http://ngmodules.org/modules/angular.treeview
https://angular-ui-tree.github.io/angular-ui-tree/#/basic-example
Please see example below.
JSFiddle: http://jsfiddle.net/R7UvH/2/
How do I make typeahead.js (0.10.1) search for matches in more than one property value? Ideally, within whole data (data.title, data.desc and in all data.category[i].name)
datumTokenizer: function(data) {
// **search in other property values; e.g. data.title & data.desc etc..**
return Bloodhound.tokenizers.whitespace(data.title);
},
Whole example:
var data = [{
title: "some title here",
desc: "some option here",
category: [{
name: "category 1",
}, {
name: "categoy 2",
}]
},
{
title: "some title here",
desc: "some option here",
category: [{
name: "category 1",
}, {
name: "categoy 2",
}]
}];
var posts = new Bloodhound({
datumTokenizer: function(data) {
// **search in other property values; e.g. data.title & data.desc etc..**
return Bloodhound.tokenizers.whitespace(data.title);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: data
});
posts.initialize();
$('#search-input').typeahead({
highlight: true
}, {
name: 'Pages',
displayKey: 'title',
source: posts.ttAdapter(),
templates: {
header: '<h3>Pages</h3>'
}
});
Typeahead 0.10.3 added "support to object tokenizers for multiple property tokenization."
So, your example becomes
var posts = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title', 'desc'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: data
});
However, I don't think this will work for properties nested inside, that is, the data.category object in your case.
As a side note, if you are using prefetched data, be sure to clear the local storage first, otherwise the new tokenizer won't take effect (Because datumTokenizer is used when adding to the search index, and if data is already present in localStorage, then the search index will not be updated). I was stuck on this for a while!
return Bloodhound.tokenizers.whitespace(data.title) returns an array of strings.
So, instead of returning that value: save it (and your other desired values), then concatenate them and return that value...
x = Bloodhound.tokenizers.whitespace(data.title);
y = Bloodhound.tokenizers.whitespace(data.desc);
z = Bloodhound.tokenizers.whitespace(data.category[i].name);
return x.concat(y).concat(z);
I've implemented a solution here:
http://jsfiddle.net/Fresh/4nnnG/
As you have a local datasource you need to create individual datasets to enable you to match on multiple data properties. e.g.
$('#search-input').typeahead({
highlight: true
}, {
name: 'titles',
displayKey: 'title',
source: titles.ttAdapter()
}, {
name: 'descs',
displayKey: 'desc',
source: descs.ttAdapter()
}, {
name: 'cats',
displayKey: 'name',
source: cats.ttAdapter()
});
I have a kenodui treeview that I am trying to expand the top level nodes if they have the following values: "Active" or "Closed", the remaining nodes can remain closed. I am using the following code to create my treeview:
if (CI.Popup.treeview == null) {
CI.Popup.treeview = $("#RelatedPropertyListing").kendoTreeView({
template: "#= item.Name #",
dataImageUrlField: "image",
dataSource: CI.Popup.treeDS,
dataTextField: ["Name", "Name"],
encoded: true
}).data("kendoTreeView");
}
My datasource is defined as a json kendo.data.HierarchicalDataSource. I have tried generating the treeview using html instead of a datasource but it was unbareably slow so I have to use this method.
Any ideas how I can expand only those nodes that have a value of "Active" or "Closed"???
Thanks in advance for any help.
If you can slightly change your returned data, you can set expanded to true for each node that you want expanded and KendoUI will automatically take care of it.
Example:
var data = [
{
text : "node 1",
expanded: true,
items : [
{ text: "node 1.1" },
{
text : "node 1.2",
expanded: false,
items : [
{ text: "node 1.2.1" },
{ text: "node 1.2.2" },
{ text: "node 1.2.3" }
]
},
{ text: "node 1.3" }
]
}
];
var treeview = $("#treeview-left").kendoTreeView({
dataSource : data,
loadOnDemand: true
}).data("kendoTreeView");
JSFiddle in here
I'm looking for a best solution how to do this.
What I have:
// model
Ext.define("User", {
extend: "Ext.data.Model",
fields: [
{name: "id", type: "int"},
{name: "name"},
{name: "description", type: "string"}
]
});
// store with data
var oStore = new Ext.data.Store({
model: "User",
data: [
{id: 1, name: {name:"John"}, description: "Fapfapfap"},
{id: 2, name: {name:"Danny"}, description: "Boobooboo"},
{id: 3, name: {name: "Tom"}, description: "Tralala"},
{id: 4, name: {name:"Jane"}, description: "Ololo"},
]
});
// and finally I have a grid panel
Ext.create("Ext.grid.Panel", {
columns: [
{dataIndex: "id", header:"ID"},
{
dataIndex: "name",
header: "Name",
renderer: function(value){return value.name;},
editor: "textfield"},
{dataIndex: "description", header: "Description", flex: 1, editor: "htmleditor"}
],
plugins: [new Ext.grid.plugin.CellEditing({clicksToEdit: 2})],
store: store,
renderTo: document.body
});
When I doublecick on a cell I see [object] Object in editor's field, and when I enter valid value than I see empty cell in the grid.
So, the question is – how could I setup celleditor to get data not from record.name but from record.name.name?
You can override get and set methods on model, so the will support multi-level field names. Below is sample implementation.
Ext.define("User", {
extend: "Ext.data.Model",
fields: [
{name: "id", type: "int"},
{name: "name"},
{name: "description", type: "string"}
],
get: function(key) {
if (Ext.isString(key) && key.indexOf('.') !== -1) {
var parts = key.split('.');
var result = this.callParent([ parts[0] ]);
return result[parts[1]];
}
return this.callParent(arguments);
},
set: function(key, value) {
if (Ext.isString(key) && key.indexOf('.') !== -1) {
var parts = key.split('.');
var result = this.get(parts[0]);
result[parts[1]] = value;
this.callParent([ parts[0], result ]);
return;
}
this.callParent(arguments);
}
});
I am not sure if store detects change made to name.name field. If no, you should also probably mark record as dirty.
Working sample: http://jsfiddle.net/lolo/dHhbR/2/
The editor accepts whatever value is provided in the "dataIndex" field of the column. Since "name" is an object, that's what you're getting. After entering a name in the editor, value is equal to a string (not an object) and your renderer is trying to get the name property of the string.
The easiest way to fix this is to make the "name" field of your store a string instead of an object. However, I'm assuming there's a reason you want to do it this way.
The CellEditing plugin has three events it can listen for: beforeedit, edit, and validateedit. You can implement a beforeedit listener to get the "name" object from the column, then get the "name" property of that object and fill the editor with that value. Then on validateedit, get the value from the editor and set the "name" property of the "name" object in the record with that value.
For quick reference, here's the event definition: CellEditing events
An easier way is to modify your User Model object to map the "name" property differently:
{name: "name", mapping:'name.name'}
then everything else stays the same.
I'm trying to dynamically fill an Ext.form.CheckboxGroup with Ext.form.Checkboxs derived from a JSON object pulled from a jsp page. My JSON object looks like this:
{
"sensors": [
{ "id": 200, "name": "name - B - A" },
{ "id": 201, "name": "name - B - B" },
{ "id": 202, "name": "name - C - A" },
{ "id": 203, "name": "name - C - B" }
]
}
I can load these objects into an Ext.data.JsonStore with code like this:
new Ext.data.JsonStore({
id: 'sensorStore',
autoLoad: true,
method: 'GET',
baseParams: {
jobType: 'sensor'
},
url: 'getstatus.jsp',
root: 'sensors',
sortInfo: { field: 'id', direction: 'ASC' },
fields: [ 'id', 'name' ]
}),
My understanding is that this will give me access to a set of Ext.data.Record objects, but I can't figure out how to go about iterating through those Records to create any Ext.form.Checkboxs, or if there's some other way of achieving the same result.
I'm not trying to set the values of the checkboxes, though I will need to be able to reference them when I submit the form.
Assuming the store is loaded (since you have autoLoad:true), you need to
iterate through the records to create an array of checkbox configs
create the checkboxgroup object (using the array created in #1 above as items config)
add this checkboxgroup to your form (or whatever container) and call this container's doLayout() if it is already rendered
Snippet to iterate and create checkbox configs-
var checkboxconfigs = []; //array of about to be checkboxes.
mystore.getRange().each(function(record){
checkboxconfigs.push({ //pushing into array
id:record.data.id,
boxLabel:record.data.name,
//any other checkbox properties, layout related or whatever
});
});
Snippet to create checkboxgroup-
var myCheckboxgroup = new Ext.form.CheckboxGroup({
id:'myGroup',
fieldLabel: 'Checkboxes in two columns',
columns:2,
items:checkboxconfigs //created in previous snippet.
//any other checkbox group configuration
});
Add to your container and redraw it-
mycontainer.add(myCheckboxgroup).doLayout();
EDIT - Your JsonStore config does not match to the data returned. (id needs to be an int)
new Ext.data.JsonStore({
id: 'sensorStore',
autoLoad: true,
method: 'GET',
baseParams: {
jobType: 'sensor'
},
url: 'getstatus.jsp',
root: 'sensors',
sortInfo: { field: 'id', direction: 'ASC' },
fields: [ {name:'id', type:int}, 'name' ]
}),