How to configure jqGrid (4.x) to be a TreeView

Question

I have taken the demo code and tried to modify it to suit my needs, but unfortunately I am unable to get the desired results.

The tree grid is loading and \'binding

Answer 1

You have some problems in the server part which will be forwarded to the JSON.

The first simple problem is in the Company class. You made typing error and used CompnayName instead of CompanyName. As the results the data of the first revision of your code can't read the CompanyName. After changing to string[] and repeatitems: true the company name will be read.

The next problem is that you forgot to include treeGridModel: 'adjacency' option of jqGrid and the input data will be interpreted in the wrong way.

The next problem in JSON data is that you should additionally set loaded column of the grid to true. The hidden loaded column is the next column after the expanded. If you want always to load all data you can fix the problem in the beforeProcessing

beforeProcessing: function (data) {
    var rows = data.rows, i, l = rows.length;
    for (i = 0; i < l; i++) {
        rows[i][6] = true; // set loaded column
    }
}

In the same way you can set expanded column to true for example (rows[i][5] = true) it you want reduce the size of the transferred data.

The last problem which I can see in your JSON data is the order of nodes. You should understand that Tree Grid works very simple. It places all the rows in exactly the same order in the grid how you post the data. The children can be just hidden, but all children have to be directly after its parent node. So you should change the order of the data placed in the server response.