I am running into a strange error while adding a new Tree node to dijit.Tree.
var rawdata = [{
label: 'Date',
id: '1',
children: [{
label: 'Life',
id: '1.1'
}, {
label: 'Liberty',
id: '1.2'
}]
}, {
label: 'Some links (note: the link is <b>not</b> clickable)',
id: '2',
children: [{
id: '2.1',
label: 'Dojo Toolkit'
}, {
id: '2.2',
label: '<img src="http://dojofoundation.org/media/img/dojo.logo.png" alt="greatest ever" height="32px" />'
}, {
id: '2.3',
label: 'my blog'
}]
}];
var store = new dojo.data.ItemFileWriteStore({
data: {
identifier: 'id',
label: 'label',
items: rawdata
}
});
And in order to add item to the tree, I am using the following:
store.newItem({id:'3', label:"New tree node label"});
However, this only seems to work for the first time I add an item to the tree. When trying to add a second item, I get an Error: assertion failed in ItemFileWriteStore ?
Also, currently the node is added at the very first level in the tree. How could I add it in one of the subtree, say the second tree with id:2 ?
Thanks!
The assertion error may be due to having conflicting id values. Is the second item added with a different id than the first?
If you add an item to the store it will be added at top level, unless you add the item to one of the children arrays - the tree has to know where to put the item, if you add it to a store it assumes (correctly) that it is a top level item. If you add the new item as a child of an existing item, then again, the tree knows where it should go.
Related
My table data has nested objects, so I need to use a v-slot to render it correctly on a table. The thing is that the table columns depend on the lenght of another array.
I tried using a v-for outside my v-slot, but then I get an error telling me that the v-slots need to be directly under the root level inside its component.
<div v-for="plant in stockTable.plants" :key="plant.key">
<template v-slot:cell(plant.name)="row">
</template>
</div>
My data looks like this:
{ key: 1, description: 'Stock-1', plants: [{ key: 1, name: 'Plant-1', inventory: [{ type: 'Physical', stock: 875 }, { type: 'Virtual', stock: 1540 }] }, { key: 2, name: 'Plant-2', inventory: [{ type: 'Physical', stock: 458 }, { type: 'Virtual', stock: 525 }] }] }
And the array it depends on it this one:
plants: [{ key: 1, name: 'Plant-1' }, { key: 2, name: 'Plant-2' }]
It has to create columns with the second array, and show the corresponding data of the first one.
Edit: This is a mock up of what I'm trying to do
Found another similar question wich was correctly answered. For what I understand, the issue had to do with some string interpolation.
Here's the answer:
https://stackoverflow.com/a/58143362/11932235
I resolve most of my problem only few left out of which this one is preventing me to submit the form. I am using Nativescript + vue and without Typescript. how to display the Valueproviders with array list? Here is the code
https://play.nativescript.org/?template=play-vue&id=2oWObE
There was the problem with your data type. As per the documentation Array should have key and label properties. But still if you want id and name then you should try like below.
'valuesProvider': {
key: 'id',
label: 'name',
items: [
{ id: 1121, name: 'Shanghai' },
{ id: 3651, name: 'Lagos' },
{ id: 5213, name: 'Moscow' },
{ id: 6214, name: 'São Paulo' },
{ id: 6985, name: 'Sydney' }
]
};
https://docs.nativescript.org/vuejs/ns-ui/DataForm/dataform-editors-providers
Anyway, I tried that and that was not working for me either then searched for it and relaised that there is an open feature request to support the valuesProvider for picker from JSON metadata. You can vote to support the same feature.
https://github.com/NativeScript/nativescript-ui-feedback/issues/369
Solution
Just get you cityList out of vue data and map your data
https://play.nativescript.org/?template=play-vue&id=2oWObE&v=6
more detailed version with groups
https://play.nativescript.org/?template=play-vue&id=rqK7wO&v=3
I'm using a plugin to create a data table with single row select capability such that when I click anywhere in the row, it links to another page in my web app. I need help figuring out how to disable the select capability on the first column of every row. I've tried using css rules but either they do not work or they are applied to columns other than the first.
Table declaration:
var locationTable = $('#locationTable').DataTable({
dom: 'Brtip',
buttons: [
'excel'
],
select: {
style: 'single'
//selector: ':not(:first-child)'
//selector: ':not(td:nth-of-type(1))'
},
processing: true,
serverSide: true,
ajax: "/locationData",
length: 10,
ordering: false,
"lengthChange": false,
//sDom : '<"top">lrtip',
columns: [
{data: 'locationname'},
{data: 'address1'},
{data: 'address2'},
{data: 'city'},
{data: 'state'},
{data: 'zipcode'},
{data: 'phone'},
{data: 'fax'}
]
});
My attempt to configure selection on every column (of every row) except the first:
//locationTable.select.selector(':not(tr>td:nth-child(1))');
locationTable.select.selector('tr>td:nth-child(2)');
demo
Solution: Add a CSS rule for each column you wish to enable select capability. In the example below, I wish to have select capability on all columns except the first.
select: {
style: 'single',
selector: 'tr>td:nth-child(2), tr>td:nth-child(3), tr>td:nth-child(4), tr>td:nth-child(5), tr>td:nth-child(6), tr>td:nth-child(7), tr>td:nth-child(8), tr>td:nth-child(9)'
}
I am working with LazyTreeGridStoreModel .
And need to form a json datastructure with child parent relationship that can support LazyTreeGridStoreModel.
I saw the sample given in the dojo site but couldn't find the relationship between parent child.The below sample provided on dojo site.
data = {
identifier: 'id',
label: 'name',
items: [
{id: 'AF', name:'Africa', children: true},
{id: 'EG', name:'Egypt' , children: false},
{id: 'KE', name:'Kenya',
children:[
{id: 'Nairobi', name:'Nairobi', type:'city'},
{id: 'Mombasa', name:'Mombasa', type:'city'}
]
},
...
]
}
Where i can declare the children of
{id: 'AF', name:'Africa', children: true},
Abhisek
You will need to implement the mechanism in your JSON data and in your datastore.
Typically, an attribute is added to the JSON data to indicate the parent-id.
For example:
{id: 'EG', name:'Egypt' , children: false, '$ref': 'AF'}
Here '$ref' is referring to the parent's id for this child.
The LazyTreeGridStoreModel will call store.fetch() with a query object {parentId: value} and you can extend your store (QRS for example) and implement isItemLoaded(), loadItem(), and getValues() to return the children items appropriate for your data
The following URL has a nice example on how to implement this with queryreadstore:
http://www.ibm.com/developerworks/web/library/wa-dojotreegrid/index.html
Also see:
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/test_treegrid_model_lazy.html
View the source to see how the children in the JSON data are using a "$ref" attribute to indicate their parent
When I update the store using storeObj.insert(modelObj) the List-panel updates itself, as it should. However, Id like to see the newly added item "animate" when it appears in the view. Is there a way to accomplish this?
In your model, have an extra field called newItem. So your model will be:
Ext.regModel('Product', {
fields: [
**{name: 'newItem', type: 'boolean'},**
{name: 'name', type: 'string'},
{name: 'description', type: 'string'},
{name: 'price', type: 'float'},
{name: 'image_url', type: 'string'},
{name: 'in_stock', type: 'boolean'}
]
});
When you insert item into store with
storeObj.insert(modelObj)
you must have modelObj.newItem=true before inserting.
Also, before inserting any new item in, you have to mark all the old items as "NOT NEW". For that you may have to use a dummystore.
Now use EXt.xTemplate like following: (for your Ext.List)
itemTpl: '<tpl for=".">'
+ '<tpl if="newItem==1">'
+ ' <p color="red"> this item is new</p></tpl>'
+ '<tpl else >
+ ' this item is old</tpl>'
+ '</tpl>',