something similar to treegrid in jqGrid

Question

I want to have a tree expanded only when it is required.

eg: OS Type is a leaf node it does not expand, but Memory has sub categories so i

Answer 1

It seems to me, that what you really try to implement is grouping of the data by subCategory. I strictly recommend you to look at the official demo page of jqGrid to see different possibilities which it can.

Your code have one more general problem. You use name and index properties inside of colModel items in the form 'attribute[0].firstValue' which is not permitted. The name property and, in case of the local data also index property, can't contain any special characters. What you need to read your JSON data is to use additional jsonmap property:

{ name: 'firstValue', index: 'firstValue', width: 350, jsonmap:'attribute.0.firstValue' },
{ name: 'secondValue', index: 'secondValue', width: 350,jsonmap:'attribute.0.secondValue' }

Additionally you should define one more column which you will use for grouping of the data:

{ name: 'subCategory', index: 'subCategory' }

To use grouping you should add following options in the jqGrid definition:

grouping: true,
groupingView: {
    groupField: ['subCategory'],
    groupOrder: ['desc'],
    groupDataSorted : true,
    groupColumnShow: [false],
    groupText: ['<b>{0} - {1} Item(s)</b>']
}

The setting groupColumnShow: [false] hide the subCategory column used in grouping.

If you want to hide the grouping header over all groups excepting the "envVariable" group and collapse "envVariable" group you can do this in the following way:

loadComplete: function() {
    var i, names=this.p.groupingView.sortnames[0], l = names.length;
    for (i=0;i<l;i++) {
        if (names[i]==='envVariable') {
            $(this).jqGrid('groupingToggle',this.id+"ghead_"+i);
        } else {
            // hide the grouping row
            $('#'+this.id+"ghead_"+i).hide();
        }
    }
}

After all you will have the following:

After the click on the "+" icon in the grouping header of the "envVariable" group the details will be shown:

The corresponding demo you will find here. I included page: function() { return 1; } in the jsonReader additionally to show correct page number.

If you want to see only "envVariable" text in the grouping header you should replace groupText: ['<b>{0} - {1} Item(s)</b>'] to groupText: ['{0}'].