javascript - 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 it expands

So what should I use to achieve something similar, since in jqGrid subgrid every row has an expansion, which I don't want here

My code (took from your example)

$('#compareContent').empty();
    $('<div id="compareParentDiv" width="100%">'+
      '<table id="list3" cellspacing="0" cellpadding="0"></table>'+
            '<div id="gridpager3"></div></div>')
    .appendTo('#compareContent');

    var grid2 = $("#list3");
    grid2.jqGrid({
            datastr: myJson,
            datatype: "jsonstring",
            colNames: ['KeyName', 'Config1', 'Config2'],
            colModel: [
                { name: 'elementName', index: 'elementName', key: true, width: 70 },
                { name: 'attribute[0].firstValue', index: 'attribute[0].firstValue', width: 90},
                { name: 'attribute.secondValue', index: 'attribute.secondValue', width: 100 }                   
            ],
            pager: '#gridpager3',
            rowNum: 10,
            viewrecords: true,
            jsonReader: {
                repeatitems: false,
                root: "response"
            },
            //rownumbers: true,
            //multiselect: true,
            height: "320",
            autowidth:true,
            subGrid: true,
            subGridRowExpanded: function(subgrid_id, row_id) {
                var subgrid_table_id, pager_id, iData = -1;
                subgrid_table_id = subgrid_id+"_t";
                pager_id = "p_"+subgrid_table_id;
                $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' style='overflow-y:auto' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");

                $.each(myJSONObject.list,function(i,item){
                    if(item.id === row_id) {
                        iData = i;
                        return false;
                    }
                });
                if (iData == -1) {
                    return; // no data for the subgrid
                }
                jQuery("#"+subgrid_table_id).jqGrid({
                    datastr : myJSONObject.list[iData],
                    datatype: 'jsonstring',
                    colNames: ['Name','Value1','Value2'],
                    colModel: [
                        {name:"name",index:"name",width:90},
                        {name:"firstValue",index:"firstValue",width:100},
                        {name:"secondValue",index:"secondValue",width:100}
                    ],
                    rowNum:20,
                    pager: pager_id,
                    sortname: 'name',
                    sortorder: "asc",
                    height: 'auto',
                    autowidth:true,
                    jsonReader: {
                        repeatitems: false,
                        //page: function() { return 1; },
                        root: "attribute"
                    }
                });

                jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false});
                /*var html = '<span>Some <b>HTML</b> text which corresponds the row with id=<i>'+row_id+'</i></span><br/>'+
                           '<a href="http://stackoverflow.com/users/315935/oleg">'+
                           '<img src="http://stackoverflow.com/users/flair/315935.png" width="208" height="58" '+
                           'alt="profile for Oleg at Stack Overflow, Q&A for professional and enthusiast programmers"'+
                           ' title="profile for Oleg at Stack Overflow, Q&A for professional and enthusiast programmers">'+
                           '</a>';
                $("#" + subgrid_id).append(html);*/
            },
            loadComplete: function() {
                var pos=0;
                var envPos=0;
                var envHalt=0;
                $.each(myJson.response,function(i,val){
                    if(val.subCategory==="envVariable"&&envHalt===0)
                    {
                        console.info(val.subCategory+", "+envPos);
                        envHalt++;
                        envPos=pos;
                    }
                    pos++;
                });
                console.info(envPos);

                var grid = $("#list3");
                var subGridCells = $("td.sgcollapsed",grid[0]);
                $.each(subGridCells,function(i,value){
                    if (i==envPos) {
                    }
                    else
                    {
                        $(value).unbind('click').html('');                      
                    }

                });
            }
        });
    grid2.jqGrid('navGrid', '#gridpager3', { add: false, edit: false, del: false, search: false, refresh: true });

My JSON

var myJson={
        "response": [
                             {
                                "id":"m1",  
                                "subCategory":"system",
                                 "elementName": "osname",
                                 "attribute": [
                                     {
                                        "id":"m1_s1",
                                         "name": "osname",
                                         "firstValue": "Linux
",
                                         "secondValue": "HP-US1000
"
                                     }
                                 ],
                                 "isEqual": false,
                                 "isPrasentinXml1": false,
                                 "isPrasentinXml2": false
                             },
                             {
                                "id":"m2",
                                    "subCategory":"system",
                                 "elementName": "hostname",
                                 "attribute": [
                                     {
                                        "id":"m2_s1",
                                         "name": "hostname",
                                         "firstValue": "estilo
",
                                         "secondValue": "benz
"
                                     }
                                 ],
                                 "isEqual": false,
                                 "isPrasentinXml1": false,
                                 "isPrasentinXml2": false
                             },
                             {
                                "id":"m3",
                                "subCategory":"envVariable",
                                 "elementName": "SSASERVERLOGSDIR",
                                 "attribute": [
                                     {
                                        "id":"m3_s1",
                                         "firstValue": "/home/hqusers1/IIR_1152825121_estilo_9.0.1SP2_32/iirlog",
                                         "secondValue": "/home/hqusers1/IIR_1152825121_estilo_9.0.1SP2_32/iirlog"
                                     }
                                 ],
                                 "isEqual": true,
                                 "isPrasentinXml1": false,
                                 "isPrasentinXml2": false
                             },
                             {
                                "id":"m4",
                                "subCategory":"envVariable",
                                 "elementName": "SSABIN",
                                 "attribute": [
                                     {
                                        "id":"m4_s1",
                                         "firstValue": "/home/hqusers1/IIR_1152825121_estilo_9.0.1SP2_32/bin",
                                         "secondValue": "/home/hqusers1/IIR_1152825121_estilo_9.0.1SP2_32/bin"
                                     }
                                 ],
                                 "isEqual": true,
                                 "isPrasentinXml1": false,
                                 "isPrasentinXml2": false
                             },
                             {
                                "id":"m5",
                                "subCategory":"envVariable",
                                 "elementName": "tusc.tusc-RUN",
                                 "attribute": [
                                     {
                                        "id":"m5_s1",
                                         "name": "information",
                                         "firstValue": "unzip"
                                     },
                                     {
                                        "id":"m5_s2",
                                         "name": "name",
                                         "firstValue": "tusc.tusc-RUN"
                                     },
                                     {
                                        "id":"m5_s3",
                                         "name": "version",
                                         "firstValue": "#"
                                     }
                                 ],
                                 "isEqual": false,
                                 "isPrasentinXml1": true,
                                 "isPrasentinXml2": false
                             }
                         ]
                     },grid2;

If subCategory == envVariable it should display a + symbol to expand

This is what I came up with till now, also my Config1 and Config2 columns are not coming

In the above image SSASERVERLOGSDIR, SSABIN and tusc.tusc-RUN should come under envVariable based on checking subCategory==envVariable

envVariable will not have any Config1 and Config2 values

Updated particular row's color does not change

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();
                }
            }
            var getColumnIndexByName = function(grid, columnName) {
                var cm = grid.jqGrid('getGridParam','colModel'),i=0,l=cm.length;
                for (; i<l; i++) {
                    if (cm[i].name===columnName) {
                        return i; // return the index
                    }
                }
                return -1;
            };

            var iCol = getColumnIndexByName($(this),'isEqual'),
            cRows = this.rows.length, iRow, row, className;
            for (iRow=0; iRow<cRows; iRow++) {
                row = this.rows[iRow];
                className = row.className;
                if ($.inArray('jqgrow', className.split(' ')) > 0) { // $(row).hasClass('jqgrow')

                    if(row.cells[iCol].ti

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}'].