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.

http://www.infragistics.com/community/forums/t/70543.aspx

My reply towards the bottom of the thread explains how to do that.

Thank you for using the Infragistics forums!

Hi again.
I try to use the solution that you sent me, http://www.infragistics.com/community/forums/t/70543.aspx , but the problem continued, i implemented this:

$("#tree").igTree({

    singleBranchExpand: true,

    dataSource: data,

    dataSourceType: "json",

    checkboxMode: "triState",

    pathSeparator : ".",

    rendered: function (evt, ui) { TreeEstado(evt, ui) },

    bindings: {

        textKey: "Text",

        valueKey: "Value",

        childDataProperty: "Submodulos",

    },
});

The TreeEstado function is:

function TreeEstado(evt, ui) {
    var nodes = ui.owner.uncheckedNodes();
    for (var i = 0; i < nodes.length; i++) {
        node = nodes[i];
        if (node.data.Estado == true) {
            $("#tree").igTree("toggleCheckstate", node.element) // toggle the checkState of each node
        }
    };
}

In this function Estado is the flag that indicated whether or not an node is checked or is unchecked. Estado is a field in my datasource.

The final result in the tree is not correspond to the datasource, i explain, some nodes in the tree are with checked mark but in the datasource Estado is false and viceversa.

Thank you for you help