jstree , jstreegrid with sfdc

[Arun Sharma]

I am using Jstree ( v3.2.0)  with jstreegrid ( * $Revision:  3.1.0-beta2 $ ) , This is working fine but when I upgrade to latest jstreegrid version 3.2.1 , the grid columns are not showing .  I checked if the files are getting downloaded and I could see it in the resource file . I am not sure why the grid columns dont show up with the new version . The following works but when I use the second line ( uncomment with first one commented ) it does not work 

    <apex:includeScript value="{!URLFOR($Resource.JSTREEGRID , '/' )}"/>    

   

  <!--  <apex:includeScript value="{!URLFOR($Resource.jstreegrid_new , '/' )}"/>  --> 

To be safe , I am just loading the jstreegrid.js as a stand alone file in both cases so that there is SFDC code issue here . 

The reason I am looking for the new version is that the current treegrid columns because disoriented & misaligned if the length of the value exceed the size of the column and it goes into two rows . I have successfully loaded large tree but having issue with the column widths . 

Here is the loadtree function

function loadtree(myjson)

   {     

        $(document).ready(function () {

            $('#jstree').jstree({

                "plugins": [ "contextmenu",  "massload", "search", "sort","state", "types", "wholerow", "grid"],

                        check_callback : true,

             

               

                    "search": {

                    "case_insensitive": false,

                        "show_only_matches": false

                },

                

                

                    "types": {

                       

                        

                    "root" : {

                      "icon" : "/static/3.2.0/assets/images/tree_icon.png",

                      "valid_children" : ["default"]

                    },

                    "default" : {

                      "valid_children" : ["default","file"]

                    },

                    "file" : {

                      "icon" : "glyphicon glyphicon-file",

                      "valid_children" : []

                    }

                        

                        

                        

                         },

                

                

                "contextmenu": {

                "items": function (node) {

                    return {

                        "view": {

                            label: "View Record",

                            action: function (obj) {

                                window.open("/" + node.id);

                            }

                            ,

                          "quote" : {

                              label: "Quote", 

                              action: function(obj) { 

                                  $j("#jstree").jstree(true).edit(node)

                              }

                          }

                            

                        }

                       

                    }

                }

            },

                

                

                

                    'grid': {

                    'columns': [{

                        'width': 300,

                            'header': 'Summary' ,

                            'tree' : true ,

                              'resizable' : true ,

                              title: "_DATA_"

                    }

                 

                    ,

                     {

                        'width': 125,

                            'header': 'Primary MLS',

                            'value': function (node) {

                            return (node.primarymls);

                        }

                    }

                    

                       , {

                        'width': 100,

                            'header': 'Type',

                            'value': function (node) {

                            return (node.reltype);

                        }

                    }

                    

                    ,

                     {

                        'width': 100,

                            'header': 'Phone' ,

                            

                            'value': function (node) {

                            return (node.phone);

                        }

                    }

                    

                    ,

                    

                    {

                        'width': 75,

                            'header': '$TCV',

                            'value': function (node) {

                            return (node.tcv);

                        }

                    }, {

                        'width': 90,

                            'header': '$Agent Spend',

                             'title': 'tas' ,

                            'value': function (node) {

                            return (node.tas);

                        }

                    }, {

                        'width': 50,

                            'header': 'HLC',

                            'value': function (node) {

                            return (node.thv);

                        }

                    }, {

                        'width': 50,

                            'header': '#Offices',

                            'value': function (node) {

                            return (node.noofoffices);

                        }

                    }, {

                        'width': 50,

                            'header': '#Agents ',

                            'value': function (node) {

                            return (node.noofagents);

                        }

                    }, {

                        'width': 50,

                            'header': 'CLC ',

                            

                                 'title': 'totalclc' ,

                            'value': function (node) {

                            return (node.totalclc);

                        }

                    },

                     {

                        'width': 0,

                            'header': '-',

                            'value': function (node) {

                            return (node.primaryclc);

                        }

                    }

                    

                    ]

                },

'massload' : {

        

        data : myjson

    },

  

                    'core': {

        "multiple" : false ,

        

        themes: {"stripes": true ,"theme" : "apple",

      "dots" : true,"icons":true ,

        

         "variant" : "large"

        },

                  "check_callback" : true,

                  "animation" : 0,

       

                       

                         data : myjson

        

                }

            });

        });

$(".search-input").keyup(function() {

        var searchString = $(this).val();

      //  console.log(searchString);

        $('#jstree').jstree('search', searchString);

    });

  

        

}

1. I am loading the json string first using tkrest api (as per other forum) and then filling up when the load is complete . I am also partially  loading the tree after 2000 + records and then reload the tree (using a link) when it gets completed . The reload works fine but If the no of records are more than 50000 then I have issue with memory . Can I use massload using a function with the same json I have build . I tried but was not sure of the syntax /.Also , will it help the memory issue . The Tree on left , with grid on right (5-6 columns) gets heavy .

2. Searching - I change the case sensitive to true , showmacthing :false as otherwise it is very slow . How can I speedup the search . I did see timeout code which I am trying .

Is there some kind of pagination possible , I can split my json array in a batch of 1000 and load them (next , prev) , is there some example of this 

Arun 

[Ivan Bozhanov]

I am not sure if Avi (the author of jstree-grid) still reads this user group. You'd better ask him directly if he does not respond here:
https://github.com/deitch/jstree-grid/

Best regards,
Ivan

[Arun Sharma]

Ivan - Could you please answer this question related to Jstree . I will post directly there also.

1. I am loading the json string first using tkrest api (as per other forum) and then filling up when the load is complete . I am also partially  loading the tree after 2000 + records and then reload the tree (using a link) when it gets completed . The reload works fine but If the no of records are more than 50000 then I have issue with memory . Can I use massload using a function with the same json I have build . I tried but was not sure of the syntax /.Also , will it help the memory issue . The Tree on left , with grid on right (5-6 columns) gets heavy .

2. Searching - I change the case sensitive to true , showmacthing :false as otherwise it is very slow . How can I speedup the search . I did see timeout code which I am trying .

Is there some kind of pagination possible , I can split my json array in a batch of 1000 and load them (next , prev) , is there some example of this 

[Ivan Bozhanov]

There is no way to paginate in jstree - only lazy loading is possible. So if you have a large flat list - there is no way to load it in chunks. As for speed - it all depends on other handlers, etc - I am usually testing with 30000 nodes and the tree behaves normally, if you have a flat list of 50 000 the browser itself will start choking - there is not much I can do (aside from paging, which is currently not an option). As for searching - consider searching onclick, do not search onkeypress, as that will quickly queue up searches. Also make sure you are using the latest 3.2.1 (or even the code from the repo).

Best regards,
Ivan