function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
minkeshminkesh 

building jstree in visualforce page.

Hello,

            I have some issues while building jstree with salesforce. i have attached following files in the the static resource.

 

 

<apex:stylesheet value="{!URLFOR($Resource.TreeJsAndStyle, 'jquery/themes/default/style.css')}"/>
     <apex:stylesheet value="{!URLFOR($Resource.TreeJsAndStyle, 'jquery/themes/apple/style.css')}"/>  
     <apex:stylesheet value="{!URLFOR($Resource.TreeJsAndStyle, 'jquery/themes/classic/style.css')}"/>  
     <apex:stylesheet value="{!URLFOR($Resource.TreeJsAndStyle, 'jquery/themes/default-rtl/style.css')}"/>       
     
    
     <apex:includeScript value="{!URLFOR($Resource.TreeJsAndStyle, 'jquery/jquery.cookie.js')}"/>
     <apex:includeScript value="{!URLFOR($Resource.TreeJsAndStyle, 'jquery/jquery.hotkeys.js')}"/>
     <apex:includeScript value="{!URLFOR($Resource.TreeJsAndStyle, 'jquery/jquery.js')}"/>
     <apex:includeScript value="{!URLFOR($Resource.TreeJsAndStyle, 'jquery/jquery.jstree.js')}"/>
     <apex:includeScript value="{!$Resource.treejs}"/>

 

 

i have written following code for that but it is not working and giving me javascript error that jstree is not  a function.here is the javascript code given below.

 

  <!--  jquery for activity tree -->
        var selectedActivityName = '';
    	var $jq  = jQuery.noConflict();
    	
			function createRootActivity() {
				nd = $jq("#demo").jstree('get_selected');
				$jq("#demo").jstree("create",-1,false,"No rename",false,false);
			}
			
			//NOT USED AS OF NOW
			function createActivity(e) {
				$jq("#demo").jstree("create"); 
			}
			
			//NOT USED AS OF NOW
			function renameActivity(e) {
				$jq("#demo").jstree("rename"); 
			}
			
			function setSelectedActivity(selActivityName) {
				selectedActivityName = selActivityName;
			}
			
			var newActivitParentName = '';
			function setNewActivityParentName(parentActName) {
				newActivitParentName = parentActName;
			}
			
			var newActivityName = '';
			function setActivityNewName(newName) {
				//alert('newName:'+newName);
				newActivityName = newName;
			}
		
			$jq(function () {
				$jq("#create_1").click(createRootActivity);
				//$jq("#create_2").click(createActivity);
				//$jq("#rename").click(renameActivity);
				
			});
			
			var activityMoved = '';
			var newActivityPosition = '';
			var newActivityParent = '';
			var keepOriginalActivity = '';
			function changePositionOfActivity(activityName,newPosition,newParentAcitivityName, keepOrigNode) {
				//alert("activityName:"+activityName);
				//alert("newPosition:"+newPosition);
				//alert("newParentAcitivityName:"+newParentAcitivityName);
				//alert("keepOrigNode:"+keepOrigNode);
				
				activityMoved = activityName;
				newActivityPosition = newPosition;
				newActivityParent = newParentAcitivityName;
				keepOriginalActivity = keepOrigNode;
			}
		
			$jq(function () {
			    $jq("#demo")
			    .bind("open_node.jstree create_node.jstree close_node.jstree select_node.jstree move_node.jstree rename_node.jstree cut_node.jstree", function (e, data) {
					if(e.type == 'create_node') {
						movObject = data.args[0];
						setNewActivityParentName($jq("#demo").jstree("get_text",movObject));
					}
				    if(e.type == 'move_node') {
						movObject = data.args[0];
						var keepOrigNode = false;
						if(data.args[3]) {keepOrigNode=true;}
						changePositionOfActivity(movObject.o.text(),movObject.cp,$jq("#demo").jstree("get_text",movObject.np),keepOrigNode);
					}
					if(e.type == 'select_node') {
						setSelectedActivity($jq("#demo").jstree("get_text",data.inst.get_selected()));
					}
					if(e.type == 'rename_node') {
						alert("node renamed");
						movObject = data.args[0];
						setActivityNewName($("#demo").jstree("get_text",movObject));
					}
			    })
			        
			    .jstree({
			        "core" : { "initially_open" : [ "root" ] },
			        
			        "html_data" : {
			            "data" : "<ul><li id='rhtml_1'><a href='#'>Root node 1</a><ul><li id='rhtml_2'><a href='#'>Child node 1</a></li><li id='rhtml_3'><a href='#'>Child node 2</a></li><li id='rhtml_4'><a href='#'>Child node 3</a></li><li id='rhtml_5'><a href='#'>Child node 4</a></li></ul></li><li id='rhtml_6'><a href='#'>Root node 2</a></li><li id='rhtml_7'><a href='#'>Root node 3</a></li></ul>"
		
			    	},
			    	"dnd" : {
				    	"drop_finish" : function () {
			                alert("DROP");
			            },
			            "drag_finish" : function (data) {
			                alert("DRAG OK");
			                alert(data.r);
			            },
			    	},
			    	"ui" : {
			            "select_limit" : 1
			        },
			        "contextmenu" : {
				        	"select_node"		: true,
							"show_at_node"		: false,
							"rename" : {
								"label"				: "Rename",
								// The function to execute upon a click
								"action"			: function (obj) { alert('1');this.rename(obj); },
								// All below are optional 
								"_disabled"			: false,		// clicking the item won't do a thing
								"_class"			: "class",	// class is applied to the item LI node
								"separator_before"	: false,	// Insert a separator before the item
								"separator_after"	: true,		// Insert a separator after the item
								// false or string - if does not contain `/` - used as classname
								"icon"				: true,
								"submenu"			: { 
									/* Collection of objects (the same structure) */
								}
							}
						},
			        "plugins" : [ "themes", "html_data", "dnd", "ui", "crrm","contextmenu" ]
			    });
			});

 

 

and page code is given below.

 

 

<apex:outputPanel id="outPanel" >
                                            	<div id="demo" class="demo"></div>   
                                            </apex:outputPanel>

 

if anyone has any idea pleas tell me.

 

 

Pat McQueenPat McQueen

Not sure if you got this working but there is a great example of how to do this posted here: http://timinman.blogspot.com/2011/05/lazy-loading-tree-with-jquery-forcecom.html 

MonaliDMonaliD

Hi Minkesh,

 

I am facing same problem i.e. jstree is not a function .

Can you help me in solving problem?

minkeshminkesh

Hello,

          Send me your code of page and what is the error you are facing ? 

          check that the javascript resource is properly inserted in the static resource ?

          

MonaliDMonaliD

Hi,

Resolved the previous issue,was related with static resource access.

 

Another issue now i m facing is when i try to create dynamic jstree using <apex:datalist> it just shows empty tree structure.(No node names)

Here is code :

    <apex:includeScript value="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" />
    <apex:includeScript value="{!URLFOR($Resource.jQueryJStreeStyle,'jQuery/jquery.jstree.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryJStreeStyle,'jQuery/jquery.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jQueryJStreeStyle, 'jQuery/themes/default/style.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jQueryJStreeStyle,'jQuery/themes/apple/style.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jQueryJStreeStyle, 'jQuery/themes/classic/style.css')}"/> 
    <apex:stylesheet value="{!URLFOR($Resource.jQueryJStreeStyle, 'jQuery/themes/default-rtl/style.css')}"/>   
   
    <script>     
  
        var $jq  = jQuery.noConflict();
    
        $jq(document).ready(function(){
            $jq('#demo111').jstree({
                "themes" : {
                    "theme" : "classic",
                    "dots" : true,
                    "icons" : true
                },
                "plugins" : [ "themes", "html_data","ui","crrm" ]
            })
        });        
    </script>
   
    <div id="demo111" class="demo" style="height:100px;">
        <apex:datalist value="{!nodes}" var="node" id="outeList">
            <apex:outputText value="{!node.name}"/>
                <apex:datalist value="{!node.Leaves__r}" var="leaf" id="innerList">
                    <apex:outputText value="{!leaf.name}"/>
                </apex:datalist>
        </apex:datalist>
    </div> 

In controller i just have query to select data.

Above code without  themes and plugins works if i use cdn version of jstree [ <apex:includeScript value="http://cachedcommons.org/cache/jquery-jstree/1.0.0/javascripts/jquery-jstree.js"/>]

 

Instead of <apex:datalist> if i create static list using <ul><li> above code works fine .

 

thanks,

Monali

sdetweilsdetweil

In my jquery SFDC VF pages, to link to the VF elements, I had to use

 

 

 var root=$('[id$=":plist"]');
apex = <apex:form id="plist" >
 $('[id$=":sqloutput"]').click(function(){
apex = <apex:inputcheckbox value="{!doSql}" id="sqloutput" />

to handle the generated element ID names..

 

minkeshminkesh

Hello MonaliD,

                           I have posted the code that i have developped. here is the link i am giving you :- http://boards.developerforce.com/t5/Apex-Code-Development/Multiple-Inner-Join-in-SOQL/m-p/276921#M48355 

                          

                           Please see this link and let me know if you have any further questions about this.

MonaliDMonaliD

Thanks !!!

 

In my code also when i replaced <apex:outputText> with <apex:outputLink> it worked ,when html_data plugin is used it requires basic structure

<li>

   <a href="#"/>

    <ul/>

</li>

 

 

 

 

minkeshminkesh

Hello,

           do you get solution of your problem ?