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';
}
}
}
}
}
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
nameandindexproperties inside ofcolModelitems in the form'attribute[0].firstValue'which is not permitted. Thenameproperty and, in case of the local data alsoindexproperty, can’t contain any special characters. What you need to read your JSON data is to use additionaljsonmapproperty:Additionally you should define one more column which you will use for grouping of the data:
To use grouping you should add following options in the jqGrid definition:
The setting
groupColumnShow: [false]hide thesubCategorycolumn 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:
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 thejsonReaderadditionally 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>']togroupText: ['{0}'].