jQuery UI Widgets Forums Navigation Tree How to reassign source to tree

Tagged: , ,

This topic contains 2 replies, has 2 voices, and was last updated by  sdalby 10 years, 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • How to reassign source to tree #7297

    sdalby
    Member

    Following is your example on how to assign a model to a jqxTree. How do I assign a new model after the tree has been created?

    Thanks in advance 🙂

    /Soeren

    var source = [
    { label: "Item 1", expanded: true, items: [
    { label: "Item 1.1" },
    { label: "Item 1.2", selected: true }
    ]
    },
    { label: "Item 2" },
    { label: "Item 3" },
    { label: "Item 4", items: [
    { label: "Item 4.1" },
    { label: "Item 4.2" }
    ]
    },
    { label: "Item 5" },
    { label: "Item 6" },
    { label: "Item 7" }
    ];
    // create jqxTree
    $('#jqxTree').jqxTree({ source: source, width: '330px'});
    How to reassign source to tree #7323

    Dimitar
    Participant

    Hello Soeren,

    Here is an example based on the above. When the button is clicked, the source of the jqxTree is changed.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title id='Description'>The jqxTree displays a hierarchical collection of items. You
    can populate it from 'UL' or by using its 'source' property.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var source = [
    { label: "Item 1", expanded: true, items: [
    { label: "Item 1.1" },
    { label: "Item 1.2", selected: true }
    ]
    },
    { label: "Item 2" },
    { label: "Item 3" },
    { label: "Item 4", items: [
    { label: "Item 4.1" },
    { label: "Item 4.2" }
    ]
    },
    { label: "Item 5" },
    { label: "Item 6" },
    { label: "Item 7" }
    ];
    var newSource = [
    { label: "New Item 1", expanded: true, items: [
    { label: "New Item 1.1" },
    { label: "New Item 1.2", selected: true }
    ]
    },
    { label: "New Item 2" },
    { label: "New Item 3" },
    { label: "New Item 4", items: [
    { label: "New Item 4.1" },
    { label: "New Item 4.2" }
    ]
    }
    ];
    // Create jqxTree.
    $('#jqxTree').jqxTree({ source: source, height: '300px', width: '300px' });
    $("#change").click(function () {
    $("#jqxTree").jqxTree({ source: newSource });
    });
    });
    </script>
    </head>
    <body class='default'>
    <button id="change">
    Change the tree source</button>
    <div id='jqxTree'>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    How to reassign source to tree #7334

    sdalby
    Member

    It worked like a charm 🙂

    Thanks Dimitar

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

You must be logged in to reply to this topic.