jQuery UI Widgets Forums TreeGrid jqxTree in SPA

This topic contains 5 replies, has 3 voices, and was last updated by  shawn 1 year ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • jqxTree in SPA #120479

    shawn
    Participant

    I’m writing a single page app using jqxTree.
    When I create the jqxTree the first time, it works fine.
    If I destroy the page and try to re-create it, it doesn’t work.

    I’m using this to destroy the widget

    if( $("#jqxWidget").length ){
    	$("#jqxTree").jqxTree("destroy");
    }

    HTML:

    <div id="jqxWidget">
        <div id="jqxExpander">
            <div>
                Folders
            </div>
            <div style="overflow: hidden;">
                <div style="border: none;" id="jqxTree">
                </div>
            </div>
        </div>
    </div>	

    JS

    $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: '400px'});
    // Create jqxTree
    var source = [
    {
    	icon: "../images/folder.png", label: "Mail", value: "fol_1", expanded: true, items: [
    	  { icon: "../images/file.png", label: "Calendar", value: "fil_1" },
    	  { icon: "../images/file.png", label: "Contacts", selected: true }
    	]
    },
    {
    	icon: "../images/folder.png", label: "Inbox", expanded: true, items: [
    	 { icon: "../images/file.png", label: "Admin" },
    	 { icon: "../images/file.png", label: "Corporate" },
    	 { icon: "../images/file.png", label: "Finance" },
    	 { icon: "../images/file.png", label: "Other" },
    	]
    },
    { icon: "../images/folder.png", label: "Deleted Items" },
    { icon: "../images/folder.png", label: "Notes" },
    { iconsize: 14, icon: "../images/folder.png", label: "Settings" },
    { icon: "../images/folder.png", label: "Favorites" }
    ];
    $('#jqxTree').jqxTree({ source: source, width: '100%', height: '100%'});
    $('#jqxTree').jqxTree('selectItem', null); 	
    
    $('#jqxTree').on('itemClick',function (event)
    {
    	var args = event.args;
    	var item = $('#jqxTree').jqxTree('getItem', args.element);
    	var label = item.label; 
    
    	var u=uniqueNumber();						
    	$('#jqxTree').jqxTree('updateItem', args.element, {label: label+"."+u});
    	
    	$('#jqxTree').jqxTree('refresh');
    	
    	// console.log( item );
    	// console.log( item.value );
    });

    sample of what is happening

    jqxTree in SPA #120481

    shawn
    Participant

    when I say “doesn’t work” I mean the body of the tree is missing, only the div that says “Folders” shows.

    jqxTree in SPA #120482

    Yavor Dashev
    Participant

    Hi shawn,

    I wasn’t able to completely reproduce the issue that you have.
    However when you destroy and element and want to create a new one if I have understood correctly you have to use jqwidgets.createInstance method in order everything to work properly.

    I have prepare a little code example how to use this method:

             <script type="text/javascript">
                $(document).ready(function () {
                    var source = [
                     {
                         icon: "../../../images/mailIcon.png", label: "Mail", expanded: true, items: [
                           { icon: "../../../images/calendarIcon.png", label: "Calendar" },
                           { icon: "../../../images/contactsIcon.png", label: "Contacts", selected: true }
                         ]
                     },
                     {
                         icon: "../../../images/folder.png", label: "Inbox", expanded: true, items: [
                          { icon: "../../../images/folder.png", label: "Admin" },
                          { icon: "../../../images/folder.png", label: "Corporate" },
                          { icon: "../../../images/folder.png", label: "Finance" },
                          { icon: "../../../images/folder.png", label: "Other" },
                         ]
                     },
                     { icon: "../../../images/recycle.png", label: "Deleted Items" },
                     { icon: "../../../images/notesIcon.png", label: "Notes" },
                     { iconsize: 14, icon: "../../../images/settings.png", label: "Settings" },
                     { icon: "../../../images/favorites.png", label: "Favorites" },
                    ];
                    $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: '400px'});
                    // create jqxTree
                    $('#jqxTree').jqxTree({ width: 250, height: 350, source: source});
                    // focus the jqxTree.
                    $("#jqxTree").jqxTree('focus');
    
                     $("destroy").on('click', function () {
                        $("#jqxTree").jqxTree("destroy");
                     })
                     $('#create').on('click', function () {
                      
                       jqwidgets.createInstance("#jqxTree2", 'jqxTree', { width: 250, height: 350, source: source});
                     })
    
                });
            </script>
    <div id="jqxWidget">
        <div id="jqxExpander">
            <div>
                Folders
            </div>
            <div style="overflow: hidden;">
                <div style="border: none;" id="jqxTree">
                </div>
            </div>
        </div>
    </div>	
    
    <button id ="destroy"> Destroy Tree</button>
    <button id ="create">  Create Tree</button>
    
    <div>
        Folders
    </div>
    <div style="overflow: hidden;">
        <div style="border: none;" id="jqxTree2">
        </div>
    </div>

    If this doesn’t work for you it will be best to create a complete code example that reproduces it in order to be able to assist you!

    Please, do not hesitate to contact us if you have any additional questions.

    Best Regards,
    Yavor Dashev
    jQWidgets team
    https://www.jqwidgets.com

    jqxTree in SPA #120483

    shawn
    Participant

    Does that mean I have to change the ID of jqxTree every time?

    I have a jsfiddle sample here:
    http://jsfiddle.net/hpk9tuzf/1/

    jqxTree in SPA #120492

    admin
    Keymaster

    Hi shawn,

    When you destroy the Tree, it is removed from the DOM completely which means that if you want to use a Tree like the one you destroyed before, you will need to construct it by adding such a DIV tag with the same ID to the DOM and initialize it.

    Example:

       $('#jqxTree').jqxTree({
           height: '300px',
           width: '300px',
           theme: 'energyblue'
       });
       $("#jqxbutton").jqxButton({
           theme: 'energyblue',
           width: 200,
           height: 30
       });
    
       $('#jqxbutton').click(function () {
           $("#jqxTree").jqxTree('destroy')
       });
        $('#remake').click(function () {
           makeJQX();
       });
       
       function makeJQX(){
          if ($("#jqxTree").length === 0) {
             var tree = document.createElement('div');
             tree.id = "jqxTree";
             document.body.insertBefore(tree, document.querySelector("#jqxbutton"));
          }
          
          $('#jqxTree').jqxTree({
           height: '300px',
           width: '300px',
           theme: 'energyblue'
       });
       $("#jqxbutton").jqxButton({
           theme: 'energyblue',
           width: 200,
           height: 30
       });
       
       }

    Best regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com/

    jqxTree in SPA #120511

    shawn
    Participant

    Thank you.
    I have a working sample here, if anyone else would like to see it:

    jsfiddle

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

You must be logged in to reply to this topic.