jQuery UI Widgets Forums Navigation Tree how to add hirarchy to tree

This topic contains 8 replies, has 3 voices, and was last updated by  SumitRoy 8 years, 12 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • how to add hirarchy to tree #16736

    ymluria
    Member

    I know how to add only one level to tree

    $('#jqxTree').jqxTree('addTo', items, parentelement);

    is it possible to add complete hirarcy?

    how to add hirarchy to tree #16953

    Dimitar
    Participant

    Hello ymluria,

    Yes, it is possible. Here is an example:

                var item = { label: "1", expanded: true, items: [
    { label: "1.1" },
    { label: "1.2" }
    ]
    };
    $('#jqxTree').jqxTree('addTo', item);

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    how to add hirarchy to tree #71492

    SumitRoy
    Participant

    well I am facing similar problem but I am trying to add the hierarchy tree data as JSON as follows
    $('#jqxTree').jqxTree('addTo', { source: records},selectedItem);
    but a node is added with name Item.
    This records is a valid data and copied from JSON Data example. Show there is no problem regarding the data source I guess.
    Please help me sir.

    Regards
    Sumit Roy

    how to add hirarchy to tree #71505

    Dimitar
    Participant

    Hello Sumit Roy,

    The addTo method requires a specific data structure to be passed as a parameter, akin to the source object (as shown in the demo Events and the above code snippet). If your data is not valid, the method will not work as expected.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    how to add hirarchy to tree #71547

    SumitRoy
    Participant

    thanks for the reply sir,

    but the data structure I passed was ok but it was not able to add any tree. the records is exactly same as your example records based on JSON. But I dont know why it is not reflecting on the tree

    how to add hirarchy to tree #71577

    Dimitar
    Participant

    Hi SumitRoy,

    Please share a JSFiddle example demonstrating the reported issue, so that we may determine what causes it.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    how to add hirarchy to tree #71665

    SumitRoy
    Participant

    Hi Dimitar,
    here is an example of the problem I faced.

    
    <!DOCTYPE html>
    <html lang="en">
       <head>
          <title id='Description'>JSON TREE</title>
          <link rel="stylesheet" href="jqx.base.css" type="text/css" />
          <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
          <!-- <script type="text/javascript" src="demos.js"></script> -->
          <script type="text/javascript" src="jqxcore.js"></script>
          <script type="text/javascript" src="jqxdata.js"></script>
          <script type="text/javascript" src="jqxbuttons.js"></script> 
          <script type="text/javascript" src="jqxscrollbar.js"></script>
          <script type="text/javascript" src="jqxpanel.js"></script>
          <script type="text/javascript" src="jqxtree.js"></script>
          <script type="text/javascript" src="jqxmenu.js"></script>
          <!-- Latest compiled and minified CSS -->
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
          <!-- Optional theme -->
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
          <!-- Latest compiled and minified JavaScript -->
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
       </head>
       <body>
          <div id='content'>
             <script type="text/javascript">
                var records ;
                      $(document).ready(function () {
                $('#jqxTree').jqxTree();
                      $('#jqxTree').css('visibility', 'visible');
                var contextMenu = $("#jqxMenu").jqxMenu({ width: '120px',  height: '56px', autoOpenPopup: false, mode: 'popup' });
                      var clickedItem = null;
                var attachContextMenu = function () {
                      // open the context menu when the user presses the mouse right button.
                      $("#jqxTree li").on('mousedown', function (event) {
                              var target = $(event.target).parents('li:first')[0];
                              var rightClick = isRightClick(event);
                              if (rightClick && target != null) {
                                  $("#jqxTree").jqxTree('selectItem', target);
                                  var scrollTop = $(window).scrollTop();
                                  var scrollLeft = $(window).scrollLeft();
                                  contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
                                  return false;
                              }
                          });
                      }
                attachContextMenu();
                $("#jqxMenu").on('itemclick', function (event) {
                          var item = $.trim($(event.args).text());
                          switch (item) {
                              case "Add Item":
                                  var selectedItem = $('#jqxTree').jqxTree('selectedItem');
                                  if (selectedItem != null) {
                    console.log(records);
                	var itemToAdd={ source: records};
                                      $('#jqxTree').jqxTree('addTo', itemToAdd ,selectedItem);
                	$('#jqxTree').jqxTree('refresh');
                	$('#jqxTree').jqxTree('render');
                                  }
                                  break;                    
                          }
                      });
                // disable the default browser's context menu.
                      $(document).on('contextmenu', function (e) {
                          if ($(e.target).parents('.jqx-tree').length > 0) {
                              return false;
                          }
                          return true;
                      });
                      function isRightClick(event) {
                var rightclick;
                if (!event) var event = window.event;
                if (event.which) rightclick = (event.which == 3);
                else if (event.button) rightclick = (event.button == 2);
                return rightclick;
                }
                
                var data =[
                {'id': '2','parentid':'1','text' : 'Mango'},
                {'id':'3','parentid':'1','text':'Apple'},					
                ];
                          // prepare the data
                          var source =
                          {
                              datatype: "json",
                              datafields: [
                                  { name: 'id' },
                                  { name: 'parentid' },
                                  { name: 'text' }
                              ],
                              id: 'id',
                              localdata: data
                          };
                          // create data adapter.
                          var dataAdapter = new $.jqx.dataAdapter(source);
                          // perform Data Binding.
                          dataAdapter.dataBind();
                          // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
                          // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
                          // specifies the mapping between the 'text' and 'label' fields.  
                          records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
                         
                          
                      });
                  
             </script>
             <div id='jqxTree' style="width:600px;height:300px;overflow:auto;">
                <ul>
                   <li id='1' item-selected='true'>Home</li>
                </ul>
             </div>
             <div id='jqxMenu'>
                <ul>
                   <li>Add Item</li>
                   <li>Remove Item</li>
                </ul>
             </div>
          </div>
       </body>
    </html>
    

    What I want is when you right click on Home and select Add Item it will add dynamically two children within in (Home Node), what I got is a single node with name ‘Item’

    Please help me sir.
    Thanks & Regards
    SumitRoy

    • This reply was modified 8 years, 12 months ago by  SumitRoy.
    how to add hirarchy to tree #71700

    Dimitar
    Participant

    Hi SumitRoy,

    Here is how to successfully add the two items:

    $("#jqxMenu").on('itemclick', function (event) {
        var item = $.trim($(event.args).text());
        switch (item) {
            case "Add Item":
                var selectedItem = $('#jqxTree').jqxTree('selectedItem');
                if (selectedItem != null) {
                    $('#jqxTree').jqxTree('addTo', [{ label: records[0].label }, { label: records[1].label}], selectedItem);
                }
                break;
        }
    });

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    how to add hirarchy to tree #71720

    SumitRoy
    Participant

    well the above code blocks works 100% but I change it for dynamic situation
    $('#jqxTree').jqxTree('addTo', records ,selectedItem);
    instead of
    $('#jqxTree').jqxTree('addTo', [{ label: records[0].label }, { label: records[1].label}], selectedItem);

    thanks a lot for solving such a big thing for me.
    really thanks thanks and so many thanks
    Regards
    Sumit Roy.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.