jstree and jstreegrid plugin - using select_cell.jstree-grid

[jplevene]

I have created a tree

$("#tree").jstree({
 plugins : ( /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) ? ["state","types","grid"] : ["state","types","dnd","grid"],
 core : {
    check_callback:true,  // Enables create, rename, move & delete
    themes:{stripes:true,icons:true,dots:true,url:false,responsive:false},
 multiple:false,
 data:function(node,cb){cb(get_JSON());}
 },
 // include relevant parameters
    grid: {
        columns: [
 {width: 600, header: "Items",title:"_DATA_"},
 {wideCellClass: "unit_cell", value: function(node){ return node.PRICE?(node.PRICE/node.qty):""; }, width: 90, header: "Unit Price"},
 {wideCellClass: "total_cell", value: function(node){ return node.PRICE?node.PRICE+"  ":""; }, width: 90, header: "Total"}
 
 ]
    },
 dnd : {
 copy:false
 }
 },
 state : { key : job_id },
 types : {
 "#" : { // Root
 "valid_children" : ["heading","stock"]
 },
 "default" : {},  // No type assigned
 "heading" : {
 valid_children : ["heading","stock"]
 },
 "stock" : {
 icon : "/images/stock.png",
 max_depth : 1,
 valid_children : ["stock"]
 }
 }
})
// Prevent link click
.delegate("a", "click", function (event, data) { event.preventDefault(); })
.bind('move_node.jstree', function(event, data) { move_item_node(data) })
.bind("dblclick.jstree", function (event) { edit_item(); })
.bind("changed.jstree", function() { enable_items_menus(); })
.on("select_cell.jstree-grid", function(event, dta) { alert("HI"); })
.disableSelection(); // Stops user selecting text

For some reason the "select_cell.jstree-grid" does not fire (second to last line in code) and show a HI alert.

What I want it to do is select the node when one of the cells are clicked using $.jstree.reference("#tree").select_node(dta.node);

[jplevene]

Also I have used in themes "stripes:true".  The stripes don't follow through in the jstreegrid

[jplevene]

I found a fix for the stripes problem

<style>
td.jstreegrid-striped {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAwCAYAAADQMxCBAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAvSURBVBhXY/jw+et/pu/fvzMw/f/3j4GJAQjoQjAyMTEwcXJyMjABAR51VCUYGAAYIAo81WH+RwAAAABJRU5ErkJggg==") left top repeat;
}
</style>

Then in the column options, add:  columnClass:"jstreegrid-striped"

[Ivan Bozhanov]

You may want to add this question to the jstree-github repo issues page. jstree-grid is a wonderful plugin but it is not supported by me. The creator - Avi Deitcher sometimes answers questions here, but to be on the safe side - you may want to get his attention there if he does not swing by in the next few days.

Best regards,
Ivan