CODEWITHSUNDEEP
jqueryfancytree
dr.jekyllandme
dr.jekyllandme

Reputation: 623

How to deactivate/disable a fancytree node?

I am using fancytree to render a directory, and when the user selects a node in the fancytree, I want to deactivate it. I've been searching through the apis and came across setActive(false) which I thought would do the trick. But it doesn't work. In fact, the user can still select the node, expand, etc...

node.setActive() // not working

Does anyone the correct way to disable a node in fancytree?

Upvotes: 2

Views: 2644

Answers (2)

Tim
Tim

Reputation: 1

I know this is a really old thread, but I needed to be able to disable a row in fancy tree so I thought I would share the solution. It is easily possible with CSS in the last version of Fancytree (2.38.3) by using the extraClasses property of a node, or toggleClass method of the node. Add a class like the following to your CSS:

.disabled-node {
    opacity: 0.5;
    pointer-events: none;
}

Your server-side code can add the extraClasses property when the node definition is returned (this is backend language dependent, but here is a sample in Python/Flask)

@app.route("/data", methods=['GET'])
def get_data():

    def should_be_disabled(title):
        if title == 'Art of War':
            return True
        return False
        
    data = [
        {
            'title': (title:='Art of War'),
            'extraClasses': 'disabled-node' if should_be_disabled(title) else '',
        },
        {
            'title': (title:='The Hobbit'),
            'extraClasses': 'disabled-node' if should_be_disabled(title) else '',
        },
    ]
    
    return data

You can also do it on the client side by using the toggleClass method like so. Make a button with id="button1", and add the following JS:

$("#button1").click(function() {
  var tree = $.ui.fancytree.getTree(),
    node = tree.findFirst(function(n) {
      return n.title === "Art of War";
    });

  node.toggleClass("disabled-node");
});

Upvotes: 0

mar10
mar10

Reputation: 14794

In Fancytree there is one (or no) node active. A node may become active when clicked by the user, using keyboard, or using the setActive() API.

See here for an overview of different statuses: https://github.com/mar10/fancytree/wiki/FAQ

This has nothing to do with a 'disabled' property. There is no API to support that directly, but you could return false in the 'click', 'expand', ... event handlers to prevent default behavior.

Upvotes: 2

Related Questions