Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
205
◦How to make the checkbox checked while loading igTree
posted
    • How to make the checkbox checked while loading igTree?
    • How to add a flag in the igTree data source, so that with the help of that flag, we can check the checkboxes on loading the tree?
    • How to get the current tree structure (which all nodes are opened, which node is selected in the heirarchy, etc.)? This is to rebind the tree.
    • How to get all nodes of igTree?

  • 16310
    Offline posted

    Hello,

    Thank you for posting in Infragistics forum. Please find answers to your questions below.

    1) How to make the checkbox checked while loading igTree? 

    You can handle the Rendered event of the igTree and use a for loop go through every node and toggle its checkState. This is how you do it:


                $("#tree").igTree({
                    dataSource: files,
                    rendered: function (evt, ui) {
                        var nodes = $("#tree").igTree("uncheckedNodes"); //gets all unchecked nodes, all are unchecked by default

                        for (var i = 0; i < nodes.length; i++)
                        {
                            node = nodes[i];
                            $("#tree").igTree("toggleCheckstate", node.element) // toggle the checkState of each node
                        };
                    }
                });


    2) How to add a flag in the igTree data source, so that with the help of that flag, we can check the checkboxes on loading the tree?

    There is no API for this, but you can add property(flag) to every record in your data source like that:

      var files = [
            {
                Text: "Computer", Value: "Folder", Checked: true, Folder: [
                  {
                      Text: "Music", Value: "Folder", Checked: true, Folder: [
                        {
                            Text: "Y.Malmsteen", Value: "Folder", Checked: false, Folder: [{
      .......


    Then a possible solution is to go through every object in the datasource and get the value of this Checked property. Then it will be neccessary to map every object from the datasource to the corresponding node and toggle the checkState of that node.

    Is this what you want to do or I got your idea wrong ? Please clarify.


    3) How to get the current tree structure (which all nodes are opened, which node is selected in the heirarchy, etc.)? This is to rebind the tree.

    You can get the currently selected node with the selectedNode method:

    var node = $(".selector").igTree("selectedNode");


    4) How to get all nodes of igTree?

    Handle the rendering event and use ui.dataView:

    $(".selector").igTree({
        rendering: function(evt, ui) {
     ui.dataView;
        }
    });

    ui.dataView will return an object that corresponds to the tree structure that will be rendered. But you can get all nodes objects in an array by calling:

    var nodes = $("#tree").igTree("uncheckedNodes"); // this returns all unchecked nodes, and all nodes are unchecked by default

    I hope these answers help. Please do not hesitate to contact us if you have any other questions regarding the matter.