1

I would like to construct the tree view using the JSON with Two object(Account & Contact).

root node is the account id and sub node would be the contact(nested level).

Treeview:

   <apex:page controller="samplecontroller">

        <apex:includeScript value="{!URLFOR($Resource.DynaTree, 'jquery/jquery.js' )}" />
        <apex:includeScript value="{!URLFOR($Resource.DynaTree, 'jquery/jquery-ui.custom.js' )}" />
        <apex:includeScript value="{!URLFOR($Resource.DynaTree, 'jquery/jquery.cookie.js' )}" />
        <apex:includeScript value="{!URLFOR($Resource.DynaTree, 'src/jquery.dynatree.js' )}" />

        <apex:stylesheet value="{!URLFOR($Resource.DynaTree, 'src/skin/ui.dynatree.css')}" />

        <script type="text/javascript">
            $(function(){
                $("#tree").dynatree({


    //JSON STRING WILL COME ASSING BELOW FORM THE CONTROLLER 
                    children: {!JsonString},

                    onSelect: function(select, node) 

{
                    // Get a list of all selected nodes, and convert to a key array:
                    var selKeys = $.map(node.tree.getSelectedNodes(), function(node){
                        return node.data.key;
                    });
                    jQuery(document.getElementById("{!$Component.selectedKeys}")).val(selKeys.join(", "));

                    // Get a list of all selected TOP nodes
                    var selRootNodes = node.tree.getSelectedNodes(true);
                    // ... and convert to a key array:
                    var selRootKeys = $.map(selRootNodes, function(node){
                        return node.data.key;
                    });
                },
            });
        });


        </script>
        <!-- Add a <div> element where the tree should appear: -->
        <div id="tree">

        </div>
    </apex:page>

1 Answer 1

4

You can build something like that with jsTree. Take a look at the jsTree demo.

You set up the context menu with the context menu plugin. The following context menu settings will create view, delete, and edit options. The details of the implementation of load, view, edit, and delete are left to you. I recommend looking at JavaScript Remoting. You can also specify different node types for the different objects and handle them differently. The jsTree plugin is highly customizable and has a pretty well documented api.

$j("#jstree").jstree({
    "plugins": ["contextmenu"],
    "core" : {
        animation : 0,
        check_callback : true,
        data : function (node, cb) {
            load(this, node, cb);
        }
    },
    "contextmenu" : {
        "items" : function (node) {
            return { 
                "view" : {
                    label: "View Record",
                    action: function() {
                        view(node);
                    }
                },
                "edit" : {
                    label: "Edit", 
                    action: function() { 
                        edit(node);
                    }
                },
                "delete" : {
                    label: "Delete",
                    action: function() {
                        delete(node)
                    }
                }
            }
        }
    }
});

I wrote a blog post that uses jsTree and Remote Objects, but Remote Objects are in developer preview so you should not use them for something in production now.

3
  • Yes. I have tried that but If i giving the name="Contact" fields="Id,Name"> <apex:remoteObjectField name="AccountId" sShorthand="Parent" /> Not coming the correct relation.
    – Alex
    May 30, 2014 at 12:39
  • I have gone through your blog already, but the think is I dont want to show all the parent account. Just show only one parent account and show the n level contact nodes. could you please help. I am tried many way to contact to you :).
    – Alex
    May 30, 2014 at 13:24
  • If you are using remote objects, take a look at this documentation that details the where clause. You can use the where clause in conjunction with a query string parameter to only select a single account. Jun 2, 2014 at 11:07

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .