the-teacher / the_sortable_tree

Nested Set + Drag&Drop GUI. Very fast! Best render helper! 2000 nodes/sec. Ready for rails 4
MIT License
558 stars 127 forks source link

Use Node Link Click for Setting Hidden Input Form Value #82

Closed perlmunger closed 8 years ago

perlmunger commented 8 years ago

I am displaying a tree inside a bootstrap popover and would like to intercept the click on the node and simply pass the selected item's id to a hidden form input value via javascript rather than viewing the show view for the model object. I want the default visual rendering provided by the tree, but I just want to intercept the click. Is there a simple way to do this?

the-teacher commented 8 years ago

@perlmunger Hello!

1. You can create your own render helper. See how helpers look here https://github.com/the-teacher/the_sortable_tree/tree/master/app/helpers Just create yet another one in your project with your own HTML markup. There is a good example of simple render module https://github.com/the-teacher/the_sortable_tree/blob/master/app/helpers/render_tree_helper.rb

2. Use this new Tree Render helper. Option render_module will help you. In my case name of render helper is ShopCategoryRelsManagerHelper

  .mb15.fs15 Brands
  ol.the-sortable-tree.the-sortable-tree--list(data={ max_levels: 5 })
    = sortable_tree all_brands, render_module: ShopCategoryRelsManagerHelper, used_in_ids: products_used_brands_ids

3. Add JS code to process clicks on your nodes and do what you want.

// JS onready event
$(function(){
  $(window).on('click', '.js--my-tree-node', function(e){
     var node = $(e.currentTarget)

     // something like this here
     console.log(node)
     console.log( node.data('id') )
  })
})

Please close this issue if you got an answer or add more details below. Thanks!

perlmunger commented 8 years ago

Thanks. That was what I needed.