Develop Reference

How to filter references based on change in another reference?

I have created an object with 3 reference fields - categories, subcategories, and types. I want the subcategories to show subcategories related to the selected category.
{
title: "Product Category",
name: "category",
type: "object",
fields: [
{
name: "categories",
type: "reference",
to: [
{
type: "categories",
},
],
},
{
name: "subcategories",
type: "reference",
to: [
{
type: "subcategories",
},
],
},
{
name: "types",
type: "reference",
to: [
{
type: "types",
},
],
},
],
},
I tried the filter option as mentioned in docs but can't seem to get it working so I removed it.
This is how I defined the categories and subcategories.
// categories.js
export default {
name: "categories",
type: "document",
title: "Categories",
fields: [
{
name: "category",
type: "string",
title: "Category name",
},
{
name: "slug",
title: "Slug",
type: "slug",
description: "URL friendly name",
options: {
source: "category",
maxLength: 96,
},
},
{
title: "Description",
name: "description",
type: "text",
},
],
};
// subcategories.js
export default {
name: "subcategories",
type: "document",
title: "Subcategories",
fields: [
{
name: "subcategory",
type: "string",
title: "Subcategory name",
},
{
name: "slug",
title: "Slug",
type: "slug",
description: "URL friendly name",
options: {
source: "subcategory",
maxLength: 96,
},
},
{
name: "categories",
type: "reference",
to: [
{
type: "categories",
},
],
},
],
};
Any help is appreciated.

Based on your schema, I think this should work:
export default {
title: "Product Category",
name: "category",
type: "object",
fields: [
{
name: "categories",
type: "reference",
to: [
{
type: "categories",
},
],
},
{
name: "subcategories",
type: "reference",
to: [
{
type: "subcategories",
},
],
options: {
filter: 'references($category._id)',
filterParams: {category: 'categories'}
}
},
{
name: "types",
type: "reference",
to: [
{
type: "types",
},
],
},
],
}
This adds the filter and filterParams to the options object on the subcategories field. This should narrow down the items that is selectable in the reference picker.
EDIT:
This should get the job done for you. It will also not yield any results if categories isn't set already:
export default {
title: 'Product Category',
name: 'category',
type: 'object',
fields: [
{
name: 'categories',
type: 'reference',
to: {type: 'categories'}
},
{
name: 'subcategories',
type: 'reference',
to: {type: 'subcategories'},
options: {
filter: ({ document }) => {
console.log(document)
if (!document.category || !document.category.categories) {
return;
}
return {
filter: "categories._ref == $category",
params: {
category: document.category.categories._ref,
}
}
}
}
}
]
}

Cytsocape.js can't create edges in for loop

I'm creating chart with nodes and edges. Once I created nodes, I can't create the associated edges without getting those kind of errors :
Can not create edge 5134fb65-b30f-4947-9870-cc909e293e21 with nonexistant source Peter
My code :
var myJSONdata = info;
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
style: [
{
selector: 'node',
style: {
'content': 'data(id)',
'text-opacity': 0.5,
'text-valign': 'center',
'text-halign': 'right',
'shape': 'hexagon',
'label': 'data(label)',
'background-color': '#11479e'
}
},
{
selector: 'edge',
style: {
'curve-style': 'bezier',
'width': 4,
'target-arrow-shape': 'triangle',
'line-color': '#9dbaea',
'target-arrow-color': '#9dbaea'
}
}
],
// elements: {
// nodes: [
// { data: { id: 'Peter' } },
// { data: { id: 'Claire' } },
// { data: { id: 'Mike' } },
// { data: { id: 'Rosa' } }
// ],
// edges: [
// { data: { source: 'Peter', target: 'Claire' } },
// { data: { source: 'Claire', target: 'Mike' } },
// { data: { source: 'Mike', target: 'Rosa' } }
// ]
// }
});
var array = [];
// Create nodes
for (var i = 0; i <= myJSONdata.length - 1; i++) {
array.push({
group: 'nodes',
data: {
id: i,
label: myJSONdata[i].name
}
}
);
}
// Create edges
for (var i = 0; i <= myJSONdata.length - 1; i++) {
var source = myJSONdata[i].name;
array.push({
group: 'edges',
data: {
source: source,
target: myJSONdata[i].next_op_name
}
});
}
cy.add(array);
cy.layout({
name: 'circle'
}).run();
The "Create nodes" part is working, but the "Create edges" is not.
I tried the solution here but it does not work.
Actually I want to read data from JSON file to create the chart.
I can do it with :
elements: {
nodes: [
{ data: { id: 'Peter' } },
{ data: { id: 'Claire' } },
{ data: { id: 'Mike' } },
{ data: { id: 'Rosa' } }
],
edges: [
{ data: { source: 'Peter', target: 'Claire' } },
{ data: { source: 'Claire', target: 'Mike' } },
{ data: { source: 'Mike', target: 'Rosa' } }
]
}
But I want to automate it according to the JSON file in input.
This is my JSON file :
info = [
{
"name": "Peter",
"next_op_name": "Claire",
}, {
"name": "Claire",
"next_op_name": "Mike",
}, {
"name": "Mike",
"next_op_name": "Rosa",
}, {
"name": "Rosa",
"next_op_name": "Peter",
}
];
I can't understand what is wrong.

The source and target fields in the edge are the IDs of nodes, not labels.
When you create the nodes, you need to set id to myJSONdata[i].name as well.

Display Kendo Chart (pie chart) based on grid data

I am using KendoUI - Grid component
How can I convert this into Kendo Grid:
For Eg:
I have created kendo grid (table) by using local data. As soon as I click on "Generate chart" button, above table's filter data should create the Kendo pie chart like below...
As I am new to Kendo, can somebody please suggest me the answer?
Code:
var localData = [
{
Id: 1,
userName: "John",
game: "A",
difficultyLevel: "Easy",
startTime: "25-05-2017",
endTime: "26-05-2017",
score: "210"
},
{
Id: 2,
userName: "Sam",
game: "B",
difficultyLevel: "Hard",
startTime: "04-11-2016",
endTime: "01-12-2016",
score: "4800"
},
];
var dataSource = new kendo.data.DataSource({
data: localData,
schema: {
model: {
fields: {
Id: {
type: "number"
},
userName: {
type: "string"
},
userName: {
type: "string"
},
difficultyLevel: {
type: "string"
},
startTime: {
type: "string"
},
endTime: {
type: "string"
},
score: {
type: "number"
},
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
scrollable: true,
height: 300,
sortable: true,
filterable: false,
groupable: true,
pageable: true,
columns: [{
field: "Id",
title: "Id",
filterable: true
}, {
field: "userName",
title: "userName"
}, {
field: "game",
title: "game"
}, {
field: "difficultyLevel",
title: "difficultyLevel"
}, {
field: "startTime",
title: "startTime"
}, {
field: "endTime",
title: "endTime"
}, {
field: "score",
title: "score"
}]
});
JsFiddle

You need to prepare your data to the chart's format. Something like:
$chartContainer.kendoChart({
dataSource: {
data: localData,
schema: {
parse: function(data) {
return data.map(x => {
return {
value: Number(x.score),
category: x.userName
}
});
}
}
},
series: [{
type: "pie",
field: "value",
categoryField: "category"
}],
tooltip: {
visible: true,
template: "#= category #: #= value #"
}
});
Updated Fiddle

Extjs 5, data model association & load nested data

trying to make this work....
I want to load nested data on two object model
Ext.application({
name : 'MyApp',
launch : function() {
Ext.define('MyApp.model.Address', {
extend: 'Ext.data.Model',
entityName: 'Address',
fields: [
{
name: 'id',
type: 'int'
},
{
name: 'addressLine',
type: 'string'
},
{
name: 'city',
type: 'string'
},
{
name: 'created',
type: 'date',
dateFormat: 'time',
persist: false
}
]
});
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
entityName: 'User',
fields: [
{
name: 'id',
type: 'int'
},
{
name: 'address',
reference: 'Address'
},
{
name: 'name',
type: 'string'
},
{
name: 'lastname',
type: 'string'
},
{
name: 'created',
type: 'date',
dateFormat: 'time',
persist: false
}
]
});
var user = new MyApp.model.User({
"id": 1,
"name": "Pedro",
"lastname": "Carbonell",
"address": {
"id": 1,
"addressLine": "Bailen 22",
"city": "Barcelona",
"created": 1420668866000
},
"created": 1420668866000
});
console.info(user);
console.info(user.getAddress());
}});
It's result on no error when created the user, but when I access to associated data via user.getAddress() it returned an exception:
Uncaught Error: The model ID configured in data ("[object Object]") has been rejected by the int field converter for the id fieldext-all-debug.js
Try to define proxy like memory or localstorage on model definitions, but the result it is the same.
Ext fiddle: https://fiddle.sencha.com/#fiddle/h2d
Any help will be appreciated!

Solved, but only find this solution: when use loadRawData...
var store = new Ext.data.Store({
model: MyApp.model.User
});
store.loadRawData({
"id": 1,
"name": "Pedro",
"lastname": "Carbonell",
"address": {
"id": 1,
"addressLine": "Bailen 22",
"city": "Barcelona",
"created": 1420668866000
},
"created": 1420668866000
});
console.info(store.first());
console.info(store.first().getAddress());
sample at this new fiddle: https://fiddle.sencha.com/#fiddle/h4e
you'r right, ext is a bit flaky, very....

I've been playing around with the code in your fiddle and not been able to get the association working the official way as of yet.
I simulated the functionality using this code:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'name',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}, {
name: 'created',
type: 'date',
dateFormat: 'time',
persist: false
}],
getAddress: function() {
if ('undefined' === this.data.address) {
return null;
}
return Ext.create('Address', this.data.address);
}
});
Basically I've removed the association and created a custom function to create a model record based off of the raw data passed in, You could also return a new, empty model if the address data does not exist instead of null, I used null as it's easier to determine whether you have a valid address record or not.
As already mentioned - this is not the official way to do this, I will have another play around with the fiddle and post a better solution once I find it, this may help in the meantime.

Using the original code, I made a few modifications and now it appears to be working.
Ext.application({
name : 'MyApp',
launch : function() {
Ext.define('MyApp.model.Address', {
extend: 'Ext.data.Model',
//entityName: 'Address',
fields: [
{
name: 'id',
type: 'int'
},
{
name: 'addressLine',
type: 'string'
},
{
name: 'city',
type: 'string'
},
{
name: 'created',
type: 'date',
dateFormat: 'time',
persist: false
}
],
hasMany: 'User'
});
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
//entityName: 'User',
fields: [
{
name: 'id',
type: 'int'
},
{
name: 'name',
type: 'string'
},
{
name: 'lastname',
type: 'string'
},
{
name: 'created',
type: 'date',
dateFormat: 'time',
persist: false
}
],
hasMany: { model: 'Address', name: 'Address' }
});
var user = new MyApp.model.User({
"id": 1,
"name": "Pedro",
"lastname": "Carbonell",
"address": {
"id": 1,
"addressLine": "Bailen 22",
"city": "Barcelona",
"created": 1420668866000
},
"created": 1420668866000
});
console.info(user);
console.info(user.data.address);
}
});

Is this the sort of thing you're after? I set Address manually on the User model. Not ideal but it's interpreted correctly as a record then.
Ext.define('MyApp.model.Address', {
extend: 'Ext.data.Model',
entityName: 'Address',
fields: [
{
name: 'id',
type: 'int'
},
{
name: 'addressLine',
type: 'string'
},
{
name: 'city',
type: 'string'
},
{
name: 'created',
type: 'date',
dateFormat: 'time',
persist: false
}
]
});
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
entityName: 'User',
fields: [
{
name: 'id',
type: 'int'
},
{
name: 'addressId',
reference: 'Address'
},
{
name: 'name',
type: 'string'
},
{
name: 'lastname',
type: 'string'
},
{
name: 'created',
type: 'date',
dateFormat: 'time',
persist: false
}
]
});
var user = new MyApp.model.User({
"id": 1,
"name": "Pedro",
"lastname": "Carbonell",
"created": 1420668866000
});
var addr = new MyApp.model.Address({
"id": 1,
"addressLine": "Bailen 22",
"city": "Barcelona",
"created": 1420668866000
});
user.setAddress(addr);
console.info(user);
console.info(user.getAddress());

Trouble with Dojo Dgrid

I wanted to replace dojox.grid.DataGrid with new Dgrid but I have trouble with it. I'm using Dojo 1.9.1 and here is excerpts of my code:
HTML:
<script type="text/javascript"><!--
require({
baseUrl: "/res/js/",
packages: [
{ name: "dojo", location: "dojo/dojo" },
{ name: "dijit", location: "dojo/dijit" },
{ name: "dojox", location: "dojo/dojox" },
{ name: "put-selector", location: "put-selector" },
{ name: "xstyle", location: "xstyle" },
{ name: "dgrid", location: "dgrid" },
{ name: "allwins", location: "allwins" }
]
},[
"allwins/Admin",
"dojo/parser",
"dojo/domReady!"
],function(admin, Parser){
admin.initUi(/*...*/);
});
</script>
<!-- ... -->
<div data-dojo-id="invoicesTab2"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="region: 'center',
title: 'Faktury 2'">
<div id=invoicesGridTab2"></div>
</div>
JavaScript:
request(invoicesDataUrl, {
handleAs: "json"
}).then(function (response) {
var store = new Memory({ data: response });
var grid = new OnDemandGrid({
region: "center",
store: store,
columns: {
invoice_id: { label: "FID" },
user_id: { label: "UID" },
invoice_no: { label: "Číslo" },
user_fullname: { label: "Plátce" },
created_formatted: { label: "Vystavena" },
payment_date_formatted: { label: "Splatnost" },
payment_total: { label: "Částka" }
}
}, "invoicesGridTab2");
grid.startup();
});
I can add few more things:
List item
I have no errors at the JavaScript console
data source is already tested with using older dojox.grid.DataGrid
it seems that main problem is with the rendering
Thanks for any help or advice!

You need to specify the field attribute in your columns that match with the response data object, for example:
request(invoicesDataUrl, {
handleAs: "json"
}).then(function (response) {
var store = new Memory({ data: response });
var grid = new OnDemandGrid({
region: "center",
store: store,
columns: {
invoice_id: { label: "FID", field: "invoice_id" },
user_id: { label: "UID", field: "user_id" },
invoice_no: { label: "Číslo", field: "invoice_no" },
user_fullname: { label: "Plátce", field: "user_fullname" },
created_formatted: { label: "Vystavena", field: "created_formatted" },
payment_date_formatted: { label: "Splatnost", field: "payment_date_formatted" },
payment_total: { label: "Částka", field: "payment_total" }
}
}, "invoicesGridTab2");
grid.startup();
});
I do not know if those field names are correct, but I assume you would. :)