I'm trying to use a selector to filter nodes in cytoscape.js depending on data associated with the nodes.
I seems like it is not possible to filter data that is "sub"-property of a property added as data to a node.
cy.nodes("[type = 'typeA']") - works
cy.nodes("[metadata.type = 'typeA']") - fails
I have tried escaping the "\\." but haven't been able to get it to work.
{
"data": {
"id": "run-jmh",
"metadata": {
"type": "typeA",
}
"type": "typeA",
},
"position": {
"x": 550,
"y": 23
},
"group": "nodes",
"removed": false,
"selected": false,
...
}
Selectors strings don't support arbitrary JS syntax, so things like foo.bar or foo['bar'] aren't going to work. The selectors are really just for simple top-level data fields, similar to how you'd use selectors on attributes in HTML.
If you need more complex, arbitrary logic you can use a function for style property values, e.g.:
cytoscape({
container: document.getElementById('cy'),
// ...
style: cytoscape.stylesheet()
.selector('node')
.style({
'background-color': function( ele ){ return ele.data('bg') }
// which works the same as
// 'background-color': 'data(bg)'
})
// ...
// , ...
});
Ref : http://js.cytoscape.org/#style/format
In this case, you'd classify your elements as matching or not etc. in the function along with a general selector like node.
Related
I am using alpacajs to render an HTML form. My requirement is to show certain fields based on a checkbox. there are three checkboxes in my form and I want to show some fields if any of the checkboxes are checked.
I went through alpaca documentation on conditional dependencies and couldn't find a soution to my problem. I can solve this by creating same fields with different names but that's against dry principle.
My code looks like below.
"myCheckBox1": {
"type": "boolean"
},
"myCheckBox2": {
"type": "boolean"
},
"usernameField": {
"label": "Username *",
"order": 6,
"type": "string"
"disallowOnlyEmptySpaces": true,
"showMessages": false,
"disallowEmptySpaces": true,
}
I want to show usernameField if either of myCheckBox1 or myCheckBox2 is checked. I altered schema to show conditional dependencies.
"dependencies": {
"usernameField": [
"myCheckBox1"
],
"usernameField": [
"myCheckBox2"
]
}
But that consider only last given condition ie, it will display usernameField only if myCheckBox2 is checked and does not consider myCheckBox1. I tried below code also:
"dependencies": {
"usernameField": [
"myCheckBox1", "myCheckBox2"
]
}
But that evaluates to an and condition. Is there a way to show same field using different dependencies?
Why you don't use a group of checkboxes using enum type like the following :
// schema
"check": {
"title": "Select...",
"type": "string",
"enum": ["First", "Second"]
},
...
// options
"check": {
"type": "checkbox"
}
Then you use conditional dependencies like this:
"username": {
"dependencies": {
"check": [
'First', // if First is selected
'Second', // if Second is selected
'First,Second' // if both First and Second are selected
]
}
}
Here's a working fiddle for this.
Please tell me if this isn't what you're looking for.
When I try to add a new item to the data store, it does not add it. However it accepts the data item that I set using setData, and I am able to work with the object including get a value, observe property etc.
How do you add additional items to the data store?
My code is below.
<script>
require(
[
'dojo/_base/declare',
'dstore/Memory',
'dmodel/extensions/jsonSchema',
'dmodel/validators/StringValidator',
'dmodel/store/Validating',
"dmodel/Model",
"dojox/json/schema",
"dojo/text!app/model/testing/baseSchema.json",
],
function (declare, Memory, jsonSchema, StringValidator, Validating, Model, DJS, mySchema) {
var validatingMemory2 = (declare([Memory, Validating]))({
Model: jsonSchema(
{
"$schema": "http://json-schema.org/draft-04/schema#",
"title": "Form Elements",
"type": "array",
"items": {
"title": "Form Element",
"type": "object",
"properties": {
"id": {
"description": "identifier",
"type": "string"
},
"positionX": {
"type": "number"
},
"positionY": {
"type": "number"
},
"moduleType": {
"description": "type",
"type": "string"
}
},
"required": ["id"],
"additionalProperties": false
}
}
),
idProperty: "id",
//additionalProperties: false //This indicates whether or not to allow additional properties outside of those defined by the schema. This defaults to true.
});
validatingMemory2.setData([{ "id": "one", "positionX": 100, "positionY": 200, "moduleType": "label" }]);
console.log(validatingMemory2);
validatingMemory2.add({ "id": "two", "positionX": 300, "positionY": 400, "moduleType": "label" }); //does not add this one
console.log(validatingMemory2);
var objectone = validatingMemory2.getSync("one");
console.log(objectone.positionX); //100
var objecttwo = validatingMemory2.getSync("two");
console.log(objecttwo.positionX); //error undefined property
var propOne = objectone.property("positionX");
propOne.observe(function () {
console.log("updated");
});
propOne.put(150);
});
</script>
The dstore.add method returns a promise and does not add immediately.
add(object, [directives]) - This creates an object, and throws an error
if the object already exists. This should return a promise for the
newly created object.
You need to wait for the add to complete.
validatingMemory2.add({ "id": "two",
"positionX": 300,
"positionY": 400,
"moduleType": "label" }).then(function(){
var objecttwo = validatingMemory2.getSync("two");
console.log(objecttwo.positionX);
});
Or use sync methods to add synchronously.
Stores that can perform synchronous operations may provide analogous
methods for get, put, add, and remove that end with Sync to provide
synchronous support. For example getSync(id) will directly return an
object instead of a promise. The dstore/Memory store provides Sync
methods
validatingMemory2.addSync({ "id": "two", "positionX": 300, "positionY": 400, "moduleType": "label" });
I recently ran into a problem when implementing the ajax functionality of jquery DataTables. Until I actually gave my json object collection an explicit name I couldn't get anything to display. Shouldn't there be a default data source if nothing named is returned?
Client Side control setup (includes hidden field that supplies data to dynamic anchor:
$('#accountRequestStatus').dataTable(
{
"destroy": true, // within a method that will be called multiple times with new/different data
"processing": true,
"ajax":
{
"type": "GET",
"url": "#Url.Action("SomeServerMethod", "SomeController")",
"data": { methodParam1: 12341, methodParam2: 123423, requestType: 4123421 }
}
, "paging": false
, "columns": [
{ "data": "DataElement1" },
{ "data": "DataElement2", "title": "Col1" },
{ "data": "DataElement3", "title": "Col2" },
{ "data": "DataElement4", "title": "Col3" },
{ "data": "DataElement5", "title": "Col4" },
]
, "columnDefs": [
{
"targets": 0, // hiding first column, userId
"visible": false,
"searchable": false,
"sortable": false
},
{
"targets": 5, // creates action link using the hidden data for that row in column [userId]
"render": function (data, type, row) {
return "<a href='#Url.Action("ServerMethod", "Controller")?someParam=" + row["DataElement1"] + "'>Details</a>"
},
"searchable": false,
"sortable": false
}
]
});
Here's a snippet of my server side code that returns the json collection.
tableRows is a collection of models containing the data to be displayed.
var json = this.Json(new { data = tableRows });
json.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
return json;
As I said before, the ajax call returned data but wouldn't display until I gave the collection a name. Maybe I missed this required step in the documentation, but wouldn't it make sense for the control to wire up to a single returned collection as the default data source and not require the name? Figuring out the name thing equated to about 2+ hours of messin' around trying different things. That's all I'm saying.
Maybe this'll help someone else too...
dataTables does actually have a dataSrc property! dataTables will look for either a data or an aaData section in the JSON. Thats why you finally got it to work with new { data=tableRows }. That is, if dataSrc is not specified! If your JSON differs from that concept you must specify dataSrc :
If you return a not named array / collection [{...},{...}] :
ajax: {
url: "#Url.Action("SomeServerMethod", "SomeController")",
dataSrc: ""
}
If you return a JSON array named different from data or aaData, like customers :
ajax: {
url: "#Url.Action("SomeServerMethod", "SomeController")",
dataSrc: "customers"
}
If the content is nested like { a : { b : [{...},{...}] }}
ajax: {
url: "#Url.Action("SomeServerMethod", "SomeController")",
dataSrc: "a.b"
}
If you have really complex JSON or need to manipulate the JSON in any way, like cherry picking from the content - dataSrc can also be a function :
ajax: {
url: "#Url.Action("SomeServerMethod", "SomeController")",
dataSrc: function(json) {
//do what ever you want
//return an array containing JSON / object literals
}
}
Hope the above clears things up!
I am trying to fix column width instead of dataTable choosing it automatically , hence i am trying to set sWidth but its not applying. Following is my code,
$(document).ready(function(){
$('#Emp_table').dataTable()
.columnFilter({
aoColumns: [ {type:"text"},
{ type: "text" },
{ type: "select",bSmart: false,"sType": "string", "sWidth": "5%" },
{ type: "select" },
{ type: "select" },
{ type: "select"},
{ type: "select" },
{ type: "select" }
],
});
});
Here all works fine like filter by text or value except the column width, because of that the table length is extending beyond my page. Even though my first value is ID which is not even more than 3 digits the width takes for around 10 characters . Not only sWidth, even bSmart i am trying to false but still it works with smart filter .
You need to set http://datatables.net/reference/option/autoWidth to false
Also it looks like you're creating your table a bit oddly.
For datatables 1.10 use:
$('#Emp_table').DataTable({
'columns': [
{"type": "string", "width": "5%" },
// etc...
],
'autoWidth': false,
})
Surely it should be possible to issue the same query against the same store to populate a dGrid (or any other form of grid) and the dropdown in a filteringSelect with the same rows.
However it looks like the filteringSelect needs a response of the form
{
"identifier": "abbreviation",
"label": "name",
"items": [
{ "abbreviation": "AL", "name": "Alabama" },
{ "abbreviation": "AK", "name": "Alaska" },
{ "abbreviation": "WY", "name": "Wyoming" }
]
}
and the dgrid needs
[
{ "abbreviation": "AL", "name": "Alabama" },
{ "abbreviation": "AK", "name": "Alaska" },
{ "abbreviation": "WY", "name": "Wyoming" }
]
It seems that the identifier and label attributes coming from the store are completely superflous because you are getting the identifier via the identity API and in any case you can specify everything when you instantiate the filteringselect.
Yes I know there are work-arounds - I could use two different stores or queries and get the server-side to generate generate both of these based on some parameter in the query. But if I do this will the changes propagate properly when I make changes via the dgrid? or I could wrap the store API with something that puts the extra fields on the front of the response and pass the wrapped store into the filteringselect, but is there a simpler way?
Use your array to create a data store like:
var store = Observable(new Memory({
idProperty: "abbreviation",
data: [ {
"abbreviation": "AL", "name": "Alabama"
}, {
"abbreviation": "AK", "name": "Alaska"
}, {
"abbreviation": "WY", "name": "Wyoming"
}]
}));
Then, your can set this store to dgrid as :
dgrid.set('store', store);
For your filteringSelect, you can set this store as
new FilteringSelect({
searchAttr:"name",
store: store
});