We Keep Coding

How to get React to listen for a click event called in Jquery

I'm using dabeng/OrgChart in a react app. When the user clicks on a node Jquery populates an input box. An example of this can be seen here.
I want react to do this instead of Jquery so I can save the selected node in state instead of the inputbox holding a value.
I've tried things like using references, tried to see if I can call a react method within the jquery function but no joy.
Maybe a publisher/subscriber model would be the solution but not sure how to implement something like that.
class OrgTreeBase extends Component {
state = {
list: {
'name': 'Ball game',
'children': [
{
'name': 'Football',
'children': [
{
'name': 'man united',
'children': [
{ 'name': 'fred' },
{ 'name': 'ander herrera' },
{ 'name': 'scott mctominay' },
]
}
]
},
{
'name': 'Basketball',
'children': [
{'name': 'lakers'},
{ 'name': 'warriors' },
]
},
{ 'name': 'Volleyball' }
]
},
currentLevel: 0,
currentItem: [],
selectedItem: '',
};
componentDidMount() {
this.$el = $(this.el);
let datasource = this.state.list;
this.getId = () => {
return (new Date().getTime()) * 1000 + Math.floor(Math.random() * 1001);
}
//creates the initial chart with the following settings
var oc = $('#chart-container').orgchart({
'data': datasource,
'chartClass': 'edit-state',
'exportButton': true,
'exportFilename': this.state.name,
'parentNodeSymbol': 'fa-th-large',
'createNode': function ($node, data) {
$node[0].id = this.getId;
},
})
//when node is selected
oc.$chartContainer.on('click', '.node', function () {
var $this = $(this);
console.log("this is : " + $this.find('.title').text());
$('#selected-node').val($this.find('.title').text()).data('node', $this);
});
...
onNodeSelected = (node) => {
console.log(node + " was selected");
}
I want to see this.onNodeSelected() called when a node is clicked.
onNodeSelected = (node) => {
console.log(node + " was selected");
}
Thanks in advance for any help you can give me on this.

IMO you're already committed to using jQuery with this library. So I don't see why you can't just do something like this let's say:
//somewhere above
const self = this;
//when node is selected
oc.$chartContainer.on('click', '.node', function () {
var $this = $(this);
console.log("this is : " + $this.find('.title').text());
$('#selected-node').val($this.find('.title').text()).data('node', $this);
//set state and save node here on click. Or the node's text value
self.setState({})
});
Since, this isn't within your requirements I should say that the reason I suggest this is because the DOM appears to be generated by the orgChart library and adding react listeners to that is difficult. And there isn't any reason why you can't call react setState inside a jQuery click function.
It would also be wrong of me to suggest this without adding the warning that jQuery and React are both pretty large libraries that do largely similar-ish things. You probably already know that but, I still want to suggest finding a different organization library or make your own with React.

Populating kendo-tree using from Json

I am in Angular environment using Kendo. All I want to do is following:
Take Json
Produce Kendo tree using it
I have tried it with simple data and it seems to work fine. But this time I have somewhat complex data and it seems like it does not work well with complex Json. I have been trying to have it render Json but it seems like it keeps on thinking and never comes back. I have created a sample Dojo for reference:
http://dojo.telerik.com/EdOqE
I am not sure what am I doing wrong but it just does not seem to work. Can anyone help me with this please?

I presume you have controll over the resultant json, because you'll have to change it a little to fit the TreeView's expected format. Check this out:
{
"items": [{ // Projects
"Id": 0,
"Name": "Your Example Project",
"CreatedOn": "",
"hasChildren": true,
"items": [{ // Analyses
"Id": 0,
"Name": "1.0 - Your Example Run",
"CreatedOn": "",
"hasChildren": true,
"items": [{ // Samples
"Id": 0,
"Name": "Sample 1",
"hasChildren": false,
"Description": "ample frample sample"
}, {
"Id": 0,
"Name": "Sample 2",
"hasChildren": false,
"Description": null
}]
}]
}]
};
The above json is what I did to work in the widget. First of all, the collection properties were renamed to items. All of them, in all levels. With that, kendo will know how property it should deal with. A hasChildren property was added to let it know when it has to show the expand icon. Otherwise it will show the expand option even if the item doesn't haves any children. So user clicks it and get an empty result.
This is the widget initialization options:
{
dataSource: new kendo.data.HierarchicalDataSource({
data: things,
schema: {
data: "items"
}
}),
dataTextField: "Name"
};
With schema.data I tell which property kendo will deal as the collection item. The dataSource expects an array, but if you give him an object, you have to set this property. If it was an array, then kendo would look for item property of each child for default. dataTextField is the name of the property it will use as the label.
Demo
Here is another demo with the data as an array. No need to set schema.data.
Update:
I was afraid you would say that. Yes, there is a way to deal with the data if you can't change it in the server-side. You have to intercept the data at the schema.parse() method and change the resultant data object property to items, so then the widget will understand:
schema: {
data: "items",
parse: function(data) {
if (data.hasOwnProperty("Projects")) {
return { items: data.Projects };
}
else if (data.hasOwnProperty("Analyses")) {
return { items: data.Analyses };
}
else if (data.hasOwnProperty("Samples")) {
return { items: data.Samples };
}
}
}
Demo
Every node when opened will call parse with items collection as data parameter. You have to return a new object with the property name as items instead of Projects, Analysis or Samples.
I forgot you can't touch the data, so can't add hasChildren property as well. Then you have to add a tiny logic into parse to set those properties in each level, otherwise the expand icon would not appear:
schema: {
data: "items",
parse: function(data) {
if (data.hasOwnProperty("Projects")) {
data.Projects.forEach(p => {
p.hasChildren = false;
if (p.hasOwnProperty("Analyses")) {
p.hasChildren = true;
}
});
return { items: data.Projects };
}
else if (data.hasOwnProperty("Analyses")) {
data.Analyses.forEach(a => {
a.hasChildren = false;
if (a.hasOwnProperty("Samples")) {
a.hasChildren = true;
}
});
return { items: data.Analyses };
}
else if (data.hasOwnProperty("Samples")) {
return { items: data.Samples };
}
}
}
Demo
It is ugly, I know. But get used to Kendo, it is the it goes with it.

Create object from Backbone collection that maps model values to one another

We are using Backgrid which allows you to define grid columns with an array of Javascript objects which it converts to a collection. We are trying to take advantage of this to have configurable validation on a column by column basis, so we might have the following where we've added a "validator" function to a couple of the columns:
[
{
label: "Delete",
name: "delete",
cell: "boolean"
},
{
label: "Alias",
name: "alias",
cell: "string",
sortType: "toggle",
validator: function (value) {
return true;
}
},
{
label: "Assigned Server",
name: "assignedServer",
cell: "string",
sortType: "toggle",
validator: function (value) {
return new Error("Cannot Assign Server")
}
}
]
We are listening to edits to the grid in the following prescribed manner and for the purposes of this question we can ignore the model argument to the function but concentrate on the column (delete, alias or assignedServer from above) which is itself a model in a collection. So far I have a snippet of code leveraging underscore.js's _.filter that returns the validatableColumns but I want to take this further and end up with an object of the format {name: validator, etc...}. Bearing in mind my specific use case, what is a succinct way to create an object from a Backbone collection that maps model values to one another?
certificateGrid.listenTo(certificateCollection, "backgrid:edited", function (model, column) {
var validatableColumns = _.filter(column.collection.models, function (c) {
return c.get('validator');
});
//etc.

Using _.reduce seems to do the trick:
var validatorFns = _.reduce(column.collection.models, function (fns, model) {
var validator = model.get('validator');
if (model.get('validator')) {
fns[model.get('name')] = validator;
}
return fns;
}, {});

Populating OnDemandGrid with custom Dojo widget using Solr and JsonRest

I have an OnDemandGrid with one column that I want to populate with a custom Dojo widget I built. The data used to populate each of these widgets comes from a Solr query. Since I am expecting possibly thousands of search results, I need to use a JsonRest object to make the queries and handle pagination. Here's what I have so far:
The store:
var store = new JsonRest ({
target: "/solr/json/response",
});
Creating the grid:
var grid = new (declare([OnDemandGrid, Pagination])) ({
store: store,
getBeforePut: false,
columns: [
{
label: "Test",
field: "first",
renderCell: myRenderFunction //To render the custom widget
}
]
}, "grid");
grid.startup();
myRenderFunction:
var myRenderFunction = function(object, data, cell) {
var widget = new MyCustomWidget({
doc: object,
foo: bar
}, cell.appendChild(document.createElement("div"));
widget.startup();
return widget;
}
Sample Solr response, in JSON form:
{
"response":{
"docs":[
{
"foo": "Hello",
"bar": "World"
},
{
"foo": "Easy as",
"bar": "ABC"
},
{
"foo": "Simple as",
"bar": "Do re mi"
}
]
},
"highlighting": { ... },
"numFound": "74",
"start": 0
}
I have followed a few examples online demonstrating how to do this using JsonRest and any of the dgrid flavors (and they all worked), but when I try to render the widget to the grid nothing shows up and I get a TypeError: transform(...) is null.
Is there any reason why I can't render my widget to the grid?

I ran into the same problem trying to use Solr results with dgrid and JsonRest.
JsonRest uses QueryResults as a wrapper for what it returns.
Your problem is that QueryResults accepts only arrays or promises and you're currently giving it an object.
In order to give QueryResults the docs array, write a custom JsonRest store similar to:
define([
"dojo/Deferred", "dojo/io-query", "dojo/_base/declare", "dojo/request/xhr",
"dojo/store/JsonRest", "dojo/store/util/QueryResults"
], function (Deferred, ioQuery, declare, xhr, JsonRest, QueryResults) {
return declare([JsonRest], {
target: '/solr/json/response',
idProperty: 'foo',
query: function (query, options) {
var results, total, count = options.count, start = options.start;
if (start > 0 || count >= 0) {
query.start = start;
query.rows = ((options.hasOwnProperty('count') &&
count !== Infinity) ? count : 25);
} else {
console.error('Missing start and count arguments');
return;
}
results = new Deferred();
results.total = new Deferred();
xhr(this.target, {
query: ioQuery.objectToQuery(query),
handleAs: 'json',
headers: {
Accept: this.accepts
}
}).then(function (data) {
total = data.response.numFound;
results.total.resolve(total);
results.resolve(data.response.docs);
}, function (e) {
console.error(e.response.status + '. ' + e.message);
});
return new QueryResults(results);
}
});
});
I also recommend waiting to use a custom renderCell function until after you get dgrid properly populated.
edit: OnDemandGrid is not going to work with the Pagination extension.
So decide whether you want discreet paging controls or infinite scroll (paging handled by dgrid).
See Pagination and OnDemand docs.

ExtJS4: TreePanel Store is loading the json File again and again by Itemclick

I have a json which has 3 main-menupoints. In the first menupoint, there is one submenu, so the menupoint 1 is no 'leaf'. When I click at the folder Symbol, the whole menu (the whole json file) is again under the submenu. So its infinity. Can someone help me with this please? THANK YOU!!
Here are my files:
app/data/tree.json
{
'result':
[
{
"text": "Point1",
'children':[
{
"text": "SubPoint1",
'leaf':true
},
]
},
{ "text": "Point2",
'leaf':true
},
{
"text": "Point3",
'leaf':true
},
]
}
view/TreeMenu.js
Ext.define('App.view.TreeMenu', {
extend: 'Ext.tree.Panel',
alias: 'widget.treemenu',
title:'Title',
store: 'TreeMenu'
});
store/TreeMenu.js
Ext.define('App.store.TreeMenu', {
extend: 'Ext.data.TreeStore',
requires: 'App.model.TreeMenu',
model: 'App.model.TreeMenu',
proxy: {
type: 'ajax',
url: 'app/data/tree.json',
reader: {
type: 'json',
root: 'result'
}
}
});
model/TreeMenu.js
Ext.define('App.model.TreeMenu', {
extend: 'Ext.data.Model',
fields: [
{ name: 'name', type: 'int', leaf:false, text:'name'},
{ name: 'value', type: 'string', leaf:false, text:'value'},
]
});
controller/TreeMenu.js
Ext.define('App.controller.TreeMenu', {
extend: 'Ext.app.Controller',
views: ['TreeMenu'],
models: ['TreeMenu'],
stores: ['TreeMenu'],
onLaunch: function() {
var treeStore = this.getTreeMenuStore();
treeStore.load({
//callback: this.onStationsLoad,
scope: this
});
},
refs: [{
selector: 'tree',
ref: 'treemenu'
}],
init: function() {
this.control({
'treemenu': {
itemclick : this.treeItemClick
}
});
},
treeItemClick : function(view, record) {
console.log(record);
}
});

It took me a while to realize but your tree is actually working as designed :)
I created a fiddle for it to visualize: http://jsfiddle.net/dbrin/auBTH/
Essentially every time you expand a node in a tree the default behavior is to load that node's children. That means the store will send a GET request to the server specified by the proxy url property. It sends the id of the node that you clicked on to expand so that the server side would use that id to run the query.
As you said you always return the same data set back and that is exactly what you are seeing: every time you expand a tree node an identical data set is appended to the tree as the children of the expanded node. One of the nodes you return is expandable .. and so you can repeat the process again :)
EDIT: upon further thought I found a separate issue that makes the node look for children nodes on the server instead of the already fetched sub nodes underneath. The issue is with how the reader is defined. In your original code you set json reader to parse data returned from the server specifying the root property set to result.
While this works on the initial load of data it also has an impact on how the children nodes are read. Essentially root config overrides the default children config. I corrected my previous example changing the root property to children - http://jsfiddle.net/dbrin/auBTH/4/ now it works as expected.

Do any children of Json tree has "leaf : true" ?
Maybe it's the problem...
-- EDIT:
I see that you have the leaf value.
Maybe can be this:
'children':[
{
"text": "SubPoint1",
'leaf':true
}-->, <------------------------- ERASE final comma.
]

I can confirm it helps. The trick is in json format
var data = {
"result": [{
"text": "Point1",
"children": [{
The problem is the array of nodes is firstly under "results" and next under "children". These must be the same and used in root configuration in proxy
var data = {
"result": [{
"text": "Point1",
"result": [{
root: 'result'
Michal