ritesh83 / ember-cli-jstree

ember-cli addon for jstree

Start Bootstrap - Landing Page

Landing Page is a multipurpose landing page template for Bootstrap created by Start Bootstrap.

Getting Started

To begin using this template, choose one of the following options to get started:

• Download the latest release on Start Bootstrap
• Clone the repo: git clone https://github.com/BlackrockDigital/startbootstrap-landing-page.git
• Fork the repo

Bugs and Issues

Have a bug or an issue with this template? Open a new issue here on GitHub or leave a comment on the template overview page at Start Bootstrap.

Creator

Start Bootstrap was created by and is maintained by David Miller, Owner of Blackrock Digital.

• https://twitter.com/davidmillerskt
• https://github.com/davidtmiller

Start Bootstrap is based on the Bootstrap framework created by Mark Otto and Jacob Thorton.

Copyright and License

Copyright 2013-2016 Blackrock Digital LLC. Code released under the MIT license.

ember-cli-jstree's Issues

Fix for Octane this.$() deprecation

In Ember Octane, new deprecation warnings are shown because this add-on uses jQuery.

Using this.$() in a component has been deprecated, consider using this.element [deprecation id: ember-views.curly-components.jquery-element]

Solution:

1. Import Jquery

// old
import $ from "jquery";

// new
import jQuery from 'jquery';

2. Change invocation

// old
  _setupJsTree() {
    return this.$().jstree(this._buildConfig());
  },

// new
  _setupJsTree() {
    return $(this.element).jstree(this._buildConfig());
  },

thanks!

Had to bump jquery to 2.1 for the demo to run

Content Security Policy violation

Hello and sorry if that issue have not a place here. I installed the addon with npm and bower and tried a minimal test. In my package.json "ember-cli-jstree": "yectep/ember-cli-jstree#master"
I just have for the moment a folder icon displayed on my menu page and this message on my terminal. Please, could you tell me how to fix that ?

Content Security Policy violation: {"csp-report":{"document-uri":"http://localhost:4200/category","referrer":"http://localhost:4200/category","violated-directive":"default-src 'none'","effective-directive":"child-src","original-policy":"default-src 'none'; script-src 'self' 'unsafe-eval' localhost:35729 0.0.0.0:35729; font-src 'self'; connect-src 'self' ws://localhost:35729 ws://0.0.0.0:35729 http://0.0.0.0:4200/csp-report; img-src 'self'; style-src 'self'; media-src 'self'; report-uri http://0.0.0.0:4200/csp-report;","blocked-uri":"blob","source-file":"http://localhost:4200/assets/vendor.js","line-number":73749,"column-number":23813,"status-code":200}}

into Chrome console:

[Report Only] Refused to create a child context containing 'blob:http%3A//localhost%3A4200/84fd7dff-2964-4ea6-b181-***' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'child-src' was not explicitly set, so 'default-src' is used as a fallback.

Deprecation in Ember 2.3

There is a deprecation in Ember 2.3: this.container is deprecated in favor of getOwner

NPM Version Publish

Are you going to publish the updated bower-less version to npm soon?

Howto deselect specific Node

I wrote a tag-input component which displays the selected nodes of the ember-cli-jstree component. Select or deselect nodes in the tree works find. The list of selected nodes is correct. Now I want to remove a specific tag from the tag-input component. If I remove an item from the selected node list, the related checkbox in the tree is always checked.

Is it possible to deselect the tree node?

This works:
this.get('jstreeActionReceiver').send('closeAll');

Thank you!

deselectNodes action is a duplicate of deselectAll. Suggest parity with selectNodes

Suggestion: Change deselectNodes to have parity with selectNodes. If called with no arguments, give deprecation warning and call deselectAll

Make tags & releases

npm install installs from master. Thinks it already has the latest, because there's no new tags. But what it has installed is v0.0.10. ember build fails because package.json requires v0.0.11. Have to uninstall & reinstall.

Support new 'ember install' format

ember install [addon-name] now is the correct way to install an add-on in ember-cli 0.2.3.

Using new syntax gives error: The ember generate command requires an entity name to be specified. For more details, use ember help.

Add children per promise

Hi, I'm new in Ember, and I have a little problem.
I'm trying to create a tree, that on opening the node I will send request to the server, to get it's children.
I don't want to load whole tree in the beginning.
How can I do it?>
When I tried to do it, but what when I click on some node, I get response from server (children), but then whole the tree becomes only the tree of children
Sorry, if it is not the right place.

Dont see tree on Ember 3

Hi. I just installed addon and tried to give static data as in example. But my tree is never visible.
I don't know why. Is this addon compatible with Ember3.
ember-cli: 3.1.4

Disable multiple selection

I'm trying to disable multiple selection as per the example at https://www.jstree.com/docs/config/. It needs to be an item passed to the 'core' config element. I can't see a way to get it through, based on the options exposed to ember and then all the way through to the configObject ie https://github.com/ritesh83/ember-cli-jstree/blob/master/addon/components/ember-jstree.js.

Is there a workaround or trick I have missed?

actionReceiver is null

My environment version is as below:
version: 1.13.1
node: 0.12.4
npm: 2.12.1
when ember-cli-jstree is installed, I use the component in this way:

//hbs file
{{ember-jstree
  actionReceiver=jstreeActionReceiver
  data=data
  eventDidBecomeReady="handleTreeDidBecomeReady"
  }}

and

//controller
App.MyController = Ember.Controller.extend({
jstreeActionReceiver: null,
data:[],
action:{
handleTreeDidBecomeReady:function(){
      console.log(this.get('jstreeActionReceiver'));       
      }
}
})

the jstreeActionReceiver is null,So what the mistake I have made?

Allow custom core configuration in a nice way.

In order to add a core config I had to create the file components/ember-jstree.js which extends ember-jstree, override _buildConfig, call super, edit the config object and return it.. For instance,

import EmberJstree from 'ember-cli-jstree/components/ember-jstree';

export default EmberJstree.extend({
  _buildConfig() {
    let obj = this._super();
    obj['core']['expand_selected_onload'] = false;
    return obj;
  }
});

Although it doesn't hurt, I think it would be nice to have a better way to do that because everytime I update this addon I have to check if this method has changed.

selectedNodes not set on ready.jstree event

Hi, thanks for the great addon! :)

I had a need to disable a few (or all) nodes immediately after finishing loading based on some app state and logic but the ready.jstree doesn't seem to set the selectedNodes here which makes it difficult to tell what to disable for me. I've tested with setting the selectedNodes in this event hook and it seems to work well on the initial loaded content. Would you accept a PR if I add the following two lines into the ready.jstree event?

let selNodes = Ember.A(this.get('treeObject').jstree(true).get_selected(true));
this.set('selectedNodes', selNodes);

Thanks,

Release a new version?

It looks like the fix released in #61 wasn't ever published to npm, would it be possible to get a new release cut? Thanks!

search plugin: Cannot read property 'toString' of undefined

Hey,
first of all, thanks for this great addon.

I'm using the search plugin and on each time I initialize the tree, i get this error named in the title.
The problem is on line 7261:
if(str === false || $.trim(str.toString()) === "") { return this.clear_search(); }

I think you have also to check for 'undefined'.

Fix breaking changes in FastBoot 1.0

The current ember-cli-fastboot releases (1.0.0-rc.1 and above) introduce breaking changes. These will most likely break your current FastBoot implementation.

See ember-fastboot/ember-cli-fastboot#387 for more information and a guide on how to fix your addon. Also you may want to visit the -fastboot Slack channel to get help from other users.

Note: this issue has been created automatically, by searching for certain patterns in your code. If you think this has been falsely created, feel free to close!

Grid plugin

I know that you write that "more plugin on the way", but still...
I want to use grid plugin, so I need somehow override $.jstree.defaults of grid.
Any idea, how can I do it?

eventDidChange triggers before selectedNodes gets set

Hi

I am trying to use the selectedNodes value on a change event but in the "ember-cli-jstree\addon\components\ember-jstree.js" on changed method you send the eventDidChange action before updating the selected nodes so I get the old values.

I updated this method from

treeObject.on('changed.jstree', function (e, data) {
            Ember.run(this, function() {
                if (this.get('isDestroyed') || this.get('isDestroying')) {
                    return;
                }
                this.sendAction('eventDidChange', data);

                // Check if selection changed
                if(this.get('treeObject') && !(this.get('isDestroyed') || this.get('isDestroying'))) {
                    var selectionChangedEventNames = ["model", "select_node", "deselect_node", "select_all", "deselect_all"];
                    if (data.action && selectionChangedEventNames.indexOf(data.action) !== -1) {
                        var selNodes = Ember.A(this.get('treeObject').jstree(true).get_selected(true));
                        this.set('selectedNodes', selNodes);
                    }
                }
            });
        }.bind(this));

to

treeObject.on('changed.jstree', function (e, data) {
            Ember.run(this, function() {
                if (this.get('isDestroyed') || this.get('isDestroying')) {
                    return;
                }

                // Check if selection changed
                if(this.get('treeObject') && !(this.get('isDestroyed') || this.get('isDestroying'))) {
                    var selectionChangedEventNames = ["model", "select_node", "deselect_node", "select_all", "deselect_all"];
                    if (data.action && selectionChangedEventNames.indexOf(data.action) !== -1) {
                        var selNodes = Ember.A(this.get('treeObject').jstree(true).get_selected(true));
                        this.set('selectedNodes', selNodes);
                    }
                }
                this.sendAction('eventDidChange', data);
            });
        }.bind(this));

This resolves my issue but will obviously break when the library gets updated is there a reason you do it this way? Or is this a bug?

Contextmenu doesn't show up

Context menu isn't showing up in the dummy app.
Might be relevant that I'm on Chrome, OSX (Yosemite).

Infinite rendering invalidation detected when dynamic creation of tree data is made

I'm working on an application where I'm using ember-cli-jstree to handle user bookmarks, and I'm getting Uncaught Error: infinite rendering invalidation detected when working with deeply nested tree strucutres.

In my application, the tree data provided to the ember-jstree component is a computed property with data of the result from a recursive function, something like below:

{{ember-jstree
  data=treeData
  ...
}}

treeData: computed('groups.[]', function() {
  return this.get('groups').map((group => this._treeData(group));
}

_treeData(group) {
  const children = [];

  group.get('children').forEach((child) => {
    children.push(this._treeData(child));
  });

  return { name: group.get('name'), children }
},

When the user has a tree structure that is deeper than 10 levels an error is thrown when the user tries to add a bookmark to the deepest level (10 is the maximum number of loops before the error is thrown). You can see where the error in ember-glimmer is thrown here

When digging around looking for solutions to this problem it seems that the problem many of the times is related to the ember runloop. And when I looked through your source code I noticed that there's a lot of Ember.run in your event handlers. In my case, changing Ember.run to Ember.run.next solves all my problems and the error can no longer be reproduced. Does anyone know if there's another solution to my problem? If not, is it possible to submit a PR making the necessary changes?

Please add some dummy examples.

Hello, I try with the last commit, but it's not working for me yet. 99% that's my fault. I tried to load model into the controller or with some fixtures corresponding to the jstree doc.
So a short description expample of how is injected your data into a template of a project will be very welcome, i'm shure it will help other people. Bye

Expected Broccoli node, got undefined with version 3.1.4

After installing the addon on Ember 3, I got this error as I restarted the Ember server after addon installation.

BroccoliMergeTrees: Expected Broccoli node, got undefined for inputNodes[0]
Stack Trace and Error Report: /var/folders/9s/kjpz6ztd7_9b1vf867k9_w7c0000gn/T/error.dump.77414cbcfd04d41f5f2f8439407054f5.log

Contextmenu doesn't work anymore beginning with version 1.0.6

I tried to upgrade to the newest version but that was not possible because of the not working contextmenu. I tried each version backwards till it worked again with version 1.0.5.

The "check_callback" function is replaced by the true value

If you provide a checkCallback function and you use 'contextmenu', 'dnd' and/or the 'unique' plugins, then it is discarded.

Ember.Test Dependency

Thanks for the awesome addon. I just started using it today and it is flexible and nicely documented.

I ran into a problem with this addon in my ember-cli app when I do a production build with ember build --environment production. It produces the following error: "Uncaught TypeError: Cannot read property 'registerWaiter' of undefined"

The problem is this component now depends on Ember.Test in this recent commit: dd8101e. I don't think Ember.Test is available by default when building an ember-cli app for production. Why does this addon need to depend on Ember.Test?

Prototype use in Ember Addon

Ember addon should have extend_prototypes : false.
EmberENV: { EXTEND_PROTOTYPES : false, }
define('ember-component-inbound-actions/inbound-actions', ['exports', 'ember', 'ember-component-inbound-actions/action-proxy'], function (exports, Em, ActionProxy) {

  exports['default'] = Em['default'].Mixin.create({
    _inbound_actions_setup: function() {
      var proxy = ActionProxy['default'].create({
        target: this
      });

      this.set('actionReceiver', proxy);
    }.on('init') <---
  });

Can be converted to:

Ember.on('init', _inbound_actions_setup : function()
{
    ...
});

I can go through and fix and submit a PR if you agree.

Wrong file of jstree.js used

Hi,

in the last commit, you changed the used jstree.js file. The one from src is included instead of the one from dist. The plugins aren't working anymore as they are not included in the src/jstree.js file.

Integration Tests `searchTerm` Setting Issue on Destroy

Thanks for the great work on this!

I'm currently having some issues with integration tests of my component that's using the ember-cli-jstree. It seems to me that it would randomly fails because it tries to set _searchTerm when the object has been completely destroyed in an integration test.

Here's the error message that we're getting:

Uncaught Error: Assertion Failed: calling set on destroyed object: <dummy@component:ember-jstree::ember246>._searchTerm =

In general we'd be doing multiple test cases with this.render(hbs..). Every now and then one of them would randomly fails.

Would love to get some insights to whether we're doing something wrong here.

Search plugin not working on Ember 2.10 (Glimmer 2)

Using Ember 2.10 and the search plugin with this option:
searchOptions: { 'show_only_matches' : true }

I'm getting the following error when testing the search feature:

"Assertion Failed: You modified searchTerm twice on <my-app-name@controller:application::ember294> in a single render. This was unreliable and slow in Ember 1.x and is no longer supported. See https://github.com/emberjs/ember.js/issues/13948 for more details."

Related to this Glimmer 2 update: emberjs/ember.js#13948

Contextmenu dynamic items causes 'undefined is not a function'

If the context menu is defined like this, it will break with the error 'undefined is not a function':

options: {
  "show_at_node": false,
  "items": function(node){
    return {
     "option1": {"label": "Option 1", "action": "someAction", disabled:node.data.isDisabled?true:false}
    };
  }
}

with stacktrace:

Uncaught TypeError: undefined is not a function
$.vakata.context._execute @ jstree.js:5852
(anonymous function) @ jstree.js:6058
jQuery.event.dispatch @ jquery.js:4670
jQuery.event.add.elemData.handle @ jquery.js:4338

This works (for the most part, at the very least it sends the action, but 1.13 issue stops it there):

options: {
  "show_at_node": false,
  "items": {
       "option1":{"label": "Option 1", "action": "someAction"}
  }
}

This might be related to #17 . I got most of the tree working in Ember 1.13.7, except for the context menu actions.

[Deprecation] document.registerElement is deprecated and will be removed in M73, around March

jstree has updated to 3.3.7 to fix this, vakata/jstree#2165

package slider already allows this, just need to update and release a new version

jstree is overlapping itself

Hello,

we are on Ember 2.5 and want to use ember-cli-jstree and run into following issue:

We use the option of retrieving our children dynamically from backend-server. At first it looks good and works, but after some nested nodes are opened the tree start to overlap itself. Do you have a hint, how we could solve the problem.

Our implementation of the controller is very similar to the dynamic-example of the dummy-app. We could not reproduce the error with static data.

thanks

Implement sort options

Sort options is not implemented on this library but feature exists on jstree library. It will be nice improvement to add it in.

Need new version with the current changes

Hi, I wish to have a new version with the current changes that was merged from the forked branch 4 days earlier. I need that functionality for my work. Please consider asap.

Stranded web workers after destroy

I noticed via my sources tab (see below) in chrome dev tools that random web workers kept piling up. I traced it down to jstree. Everytime a jstree instance gets destroyed the worker is not being killed along with it. The result is idle workers getting left behind every time a jstree instance is created then destroyed.

I already commented on an issue about this in js tree but thought I would bring it up here. One short term option might be to expose the worker property that jstree has which can be set to false to disable using a web worker.

update Babel?

Using Ember 2.18 gives following warning after building:

DEPRECATION: ember-cli-babel 5.x has been deprecated. Please upgrade to at least ember-cli-babel 6.6. Version 5.2.8 located:  ember-cli-jstree -> ember-cli-babel
DEPRECATION: ember-cli-babel 5.x has been deprecated. Please upgrade to at least ember-cli-babel 6.6. Version 5.2.8 located:  ember-cli-jstree -> ember-component-inbound-actions -> ember-cli-babel

Support for edit mode

I can't find support for entering edit mode of a node, this would be handy to be able to rename nodes easily.

jstree api reference:
https://www.jstree.com/api/#/?f=edit(obj [, default_text, callback])

The version should be 1.1.0 instead of 1.0.10

The commit on December 19th, 2017 updated the version from 1.0.9 to 1.0.10. Shouldn't it have been updated to 1.1.0?

My bad. Please disregard this issue.

Add support for search plugin

We're using ember-cli-jstree and needed support for the search plugin. I got this working for us over at https://github.com/usermindinc/ember-cli-jstree (currently in internal PR at https://github.com/usermindinc/ember-cli-jstree/pull/1), but it conflicts with existing functionality for selectNodes when used with a non-id property, which leverages explicit search callback. We don't use this functionality, so I didn't need to maintain it for our purposes.

If you have any thoughts on how we could continue to support selectNodes as is and add support for the search plugin, I'd be happy to help implement it. It could be potentially done by an exclusive feature flag (i.e. you get selectNodes on non-id properties or regular search, but not both).

Fastboot compatibility

So we need to not import jstree bower dependency when in fastboot mode, and not invoke jquery outside didInsertElement hooks.

Checkbox Cascade option does not work .

When I am sending the config hash from the controller , the cascade option of tree hierarchy selection does not work . However the three_state option works .

Below is code :
Controller :
checkboxOptions:{
cascade : 'up'
},
plugins:'checkbox,wholerow,types'

Template : {
{{ember-jstree
actionReceiver=jstreeActionReceiver
selectedNodes=jstreeSelectedNodes
data=data
plugins=plugins
checkboxOptions=checkboxOptions
typesOptions=typesOptions
eventDidSelectNode="selectAccount"
eventDidDeselectNode="deselectAccount"
contextMenuReportClicked="contextMenuReportClicked"
eventDidBecomeReady="handleTreeDidBecomeReady"
}}
}

Publish 1.1.0 to npm

@ritesh83 Can you please publish version 1.1.0 to npm?

New version without phantomjs?

Hey there,

I notice that you recently committed a change that properly puts phantomjs into devDependencies. Any chance you could release a new version with this change? phantom is causing errors

Set position of node in json mode

Hi,

I'm not able to define the position of a node when I calculate my json object for the tree.

How can I achieve this?

Implement custom event listeners

Hi,
first of all, thank you for this nice Tool.
I tried to implement some event listeners, but this doesnt work.
I used your code written in the Readme.

Can You explain how and where to implement this one?

I know this is probably no issue.

Need some help in disabling default sort

@ritesh83 Thanks for this ember addon. Need one help . How can we disable the default sort behavior. I don't want the nodes to be sorted.

How to add create,edit,delete bootstrap icon in hover action on jstree node menu in emberJS

{{ember-jstree actionReceiver=jstreeActionReceiver selectedNodes=jstreeSelectedNodes data=data eventDidBecomeReady="handleTreeBecomeReady" plugins=plugins themes=themes checkboxOptions=checkboxOptions contextmenu=contextmenu contextMenuReportClicked="contextMenuReportClicked" searchOptions=searchOptions stateOptions=stateOptions typesOptions=typesOptions searchTerm=searchTerm eventDidBecomeReady="handleTreeDidBecomeReady" eventDidHoverNode=eventDidHoverNode

}}
eventDidHoverNode: "hoverAction",

actions: {
hoverAction: function(){
// How can I apply the buttons to the view from here?
},

I dont know what I should do to get this working. I am using this https://www.npmjs.com/package/ember-cli-jstree in ember.js.

I have used ember-cli-jstree plugin in my ember js project but I am able to add create, edit, delete bootstrap icon in hover action on node menu.