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\n",
                                         "secondValue": "HP-US1000\n"
                                     }
                                 ],
                                 "isEqual": false,
                                 "isPrasentinXml1": false,
                                 "isPrasentinXml2": false
                             },
                             {
                                "id":"m2",
                                    "subCategory":"system",
                                 "elementName": "hostname",
                                 "attribute": [
                                     {
                                        "id":"m2_s1",
                                         "name": "hostname",
                                         "firstValue": "estilo\n",
                                         "secondValue": "benz\n"
                                     }
                                 ],
                                 "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].title=="false")   //here i identify isEqual's value
                    {
                        if ($.inArray('myAltRowClass', className.split(' ')) === -1) {
                            row.className = className + ' myAltRowClass';
                        }
                    }
                }
            }

        }

Graphic

Sorry, but tree grid and subgrid work very different. You should prepare the input in the corresponding form to use the tree grid for example. You should at least look through the corresponding parts of the jqGrid documentation before writing the code. Moreover if would be very helpful if you just describe more exactly which kind of information you have, is the data come from the database, how you want display it or probably edit it and so on. – Woehick

@Oleg: I'll get back with a detailed representation of what is needed :) – Graphic

@Oleg: Please check my question, I have given a image to describe my problem in a better way – Graphic

What you mean under "tree expanded"? Are the nodes displayed in the expanded form? Which input for the tree grid you use? There are some hidden tree grid columns which you have to fill. One from the columns is "expanded". If you place "false" in the column the node will be displayed not expanded. – Woehick

Look at the answer with the demo. If you want to hide "+" icons for some rows of grid with subgrids it is possible. – Woehick

@Oleg: I needed something link your demo – Graphic

@Oleg: After going through your code I came this far, I want to enable + symbol for expansion only when certain subCategory like envVariable, UserLimit is identified. How can I achieve that. I have also provided my jSON having only part of envVariable. Please help me in doing this at your free time. Thanks – Graphic

@Oleg: Please help me out when your are free. Thanks – Graphic

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

Woehick

how do I color rows background to a single color based on its isEqual value false? Like in my top image, which ever row has isEqual as false that is coloured in dark pink (which means that particular row has different data) – Graphic

@Abhishek Simon: Look at the answer or the answer. To change background color of the cell see here and here. – Woehick

Danke, Ich nehmen einen Blick :) I am learning german, your english is quite good – Graphic

I followed your example, Identified isEqual value from jSON as false also but still somehow it is not changing the row's background color. See my updated question. – Graphic