CODEWITHSUNDEEP
javascriptjqueryruby-on-railscontextmenujstree
Shruthi R
Shruthi R

Reputation: 1923

Rails 4 - jstree, How to disable 'delete' action for folders?

In rails 4.2.2, I am using jstree plugin with context menu options. Right now all context menu options are displaying for both files and folder. How can I disable "delete" option for root folder and other particular folders?

Script is,

<script type="text/javascript">
(function() {
var $j = jQuery.noConflict();

$j(document).ready(function() {

  $j("#jstree").jstree({
    "plugins": ["themes", "contextmenu", "dnd"],
    "core" : {
      themes: {"stripes": true},
      check_callback : true,
      animation : 0,
      data : {
        url: '/users/files/treedata.json'
      }
    },
    contextmenu : {
      "items" : function (node) {
        return {
          "view" : {
            label: "View",
            action: function(obj) {
              window.open("/users/files/view/" + node.id);
            }
          },
          "rename" : {
            label: "Rename",
            action: function(obj) {
              $j("#jstree").jstree(true).edit(node)
            }
          },
          "create" : {
            label: "Create New",
            action: function() {
              createNode(node);
            }
          },
          "delete" : {
            label: "Delete",
            action: function() {
              if ( confirm("Really delete " + node.text + "?") ) {
                deleteNode(node);
              }
            },
            separator_before: true
          }
        }
      }
    }
  });

  $j("#jstree").on("move_node.jstree", function(event, data) {
    moveNode(data);
  });

  $j("#jstree").on("rename_node.jstree", function(event, data) {
    renameNode(data);
  });

  $j("#jstree").on("select_node.jstree", function(event, data) {
    displayPath(data.node.id);
  });
});

function moveNode(data) {
  jQuery.ajax({
    type: "GET",
    url: "/users/home/move_node",
    data: {id: data.node.id, parent: data.parent, old_parent: data.old_parent},
    dataType : "script"
  });
}

function renameNode(data) {
  jQuery.ajax({
    type: "GET",
    url: "/users/home/rename_node",
    data: {name: data.text, id: data.node.id, parent: data.node.parent},
    dataType : "script"
  });
}

function createNode(parent) {
  jQuery.ajax({
    type: "GET",
    url: "/users/home/create_node",
    data: {name: "New Folder", parent: parent.id},
    dataType : "script"
  });
}

function deleteNode(node) {
  jQuery.ajax({
    type: "GET",
    url: "/users/home/delete_node",
    data: {id: node.id, parent: node.parent},
    dataType : "script"
  });
}

  function getPath(id) {
   if (id == "#") {
     return "";
    }
    return $j("#jstree").jstree(true).get_path({id: id}, "/");
  }

  function displayPath(nodeId) {
    $j("#path").text("Path: /" + getPath(nodeId));
  }

 })();
</script>

Please help me to accomplish disable options for jstree. And also here, "select_node.jstree" option is not working, how can I fix this issue?

Upvotes: 1

Views: 1265

Answers (1)

vakata
vakata

Reputation: 3886

In your contextmenu.items function return false if the node parameter fits your criteria:

items : function (node) {
    if (node.parents.length < 2) {
        return false;
    }

This is just a demo - inspect node to see what else you can do.

Upvotes: 1

Related Questions