jQWidgets Forums

Tagged: addto, angular tree, item, items, jquery tree, jqxtree, json, parameter, Tree

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

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

Author

how to add hirarchy to tree Posts

March 11, 2013 at 7:43 pm how to add hirarchy to tree #16736

Member

I know how to add only one level to tree

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

is it possible to add complete hirarcy?

March 13, 2013 at 11:27 am 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/

May 22, 2015 at 6:16 pm 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

May 25, 2015 at 6:03 am 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/

May 26, 2015 at 5:17 am 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

May 26, 2015 at 12:31 pm 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/

May 27, 2015 at 2:07 pm 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

May 28, 2015 at 6:23 am 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/

May 28, 2015 at 9:40 am 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.

Author

Posts

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

You must be logged in to reply to this topic.