Following to this post about hiding plus/minus/open icon column, I have applied these suggests, so in CSS file :
.subgrid-cell { display: none; }
All is OK :
but the subgrid don't fill the width of right column of main grid.
Please, is there a mistake in my code,
jQuery(document).ready(function ($) {
var OldSelectedRow=null;
var height=$('body').height()-210;
var numRows=Math.floor(height/23)-(Math.floor(height/23)%5);
var heightRows=numRows*23;
var myGrid = $("#tab22");
myGrid.jqGrid({
caption:"Recherche d'un ARTICLE dans les PARCS CLIENTS",
hidegrid:false,
url:'sub22.php',
datatype: "json",
height:heightRows,
shrinkToFit: true,
rowNum:numRows,
rownumbers:true,
rownumWidth: 40,
gridview: true,
colNames:['Id','Code', 'Désignation', 'Famille','S/famille','Marque','Matière','Réf.constructeur','PV base'],
colModel:[
{name:'a.id',index:'a.id', width:60, align:"right",hidden:true},
{name:'a.code',index:'a.code', width:150},
{name:'a.descr',index:'a.descr', width:200},
{name:'f.code',index:'f.code', width:80},
{name:'s.code',index:'s.code', width:80},
{name:'k.code',index:'k.code', width:80},
{name:'m.code',index:'m.code', width:80},
{name:'a.refc',index:'a.refc', width:150},
{name:'t.pnc',index:'t.pnc', width:80, align:"right"}
],
pager: '#tab22p',
sortname: 'a.code',
sortorder: "asc",
viewrecords: true,
emptyrecords: 'Aucune donnée correspondante...',
altRows:true,
altclass:'myAltRowClass',
onSortCol: function (index, idxcol, sortorder) {
// montre la colonne sélectionnée pour le tri de la grille
if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol
&& this.p.colModel[this.p.lastsort].sortable !== false) {
$(this.grid.headers[this.p.lastsort].el).find(">div.ui-jqgrid-sortable>span.s-ico").show();
$(this.grid.headers[this.p.lastsort].el).removeClass('ui-state-active');
}
$(this.grid.headers[idxcol].el).addClass('ui-state-active');
},
gridComplete:function(){
OldSelectedRow=null;
colModel = myGrid.jqGrid('getGridParam', 'colModel');
sortName = myGrid.jqGrid('getGridParam', 'sortname');
$('#gbox_' + $.jgrid.jqID(myGrid[0].id) +
' tr.ui-jqgrid-labels th.ui-th-column').each(function (i) {
var cmi = colModel[i], colName = cmi.name;
if (cmi.sortable !== false) {
$(this).find('>div.ui-jqgrid-sortable>span.s-ico').show();
} else if (!cmi.sortable && colName !== 'rn' && colName !== 'cb' && colName !== 'subgrid') {
$(this).find('>div.ui-jqgrid-sortable').css({cursor: 'default'});
}
if (cmi.name === sortName) {
$(this).addClass('ui-state-active');
//alert(i);
var gridId = myGrid.jqGrid('getDataIDs');
for (var countRow = 0; countRow < gridId .length; countRow ++)
{
var rowId = gridId [countRow ];
var dataFromTheRow = myGrid.jqGrid ('getRowData', rowId);
myGrid.jqGrid('setCell',rowId, i, '','ui-widget-header');
myGrid.jqGrid('setCell',rowId, i, '',{'border-top':0,'border-left':0});
}
}
});
},
onSelectRow:function(id,status){
if(OldSelectedRow!=id){
if(OldSelectedRow!=null){
myGrid.jqGrid ('collapseSubGridRow', OldSelectedRow);
$('#tab22_'+OldSelectedRow+'_t').remove();
$('#'+OldSelectedRow).removeClass('ui-state-highlight');
}
$('#'+id).addClass('ui-state-highlight');
OldSelectedRow=id;
myGrid.jqGrid('expandSubGridRow',id);
}else{
myGrid.jqGrid ('collapseSubGridRow', id);
$('#tab22'+id+'_t').remove();
$('#'+id).removeClass('ui-state-highlight');
OldSelectedRow=null;
}
},
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
rowdata = $("#tab22").jqGrid('getRowData',row_id);
var art=rowdata['a.id'],lastId;
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
$("#"+subgrid_table_id).jqGrid({
url:"sg22.php?id="+row_id+"&art="+art,
datatype: "json",
colNames: ['Id','Groupe','Client', 'Nom','Ville','Matériel','Marque','Machine','Série','Type','Modèle','Désignation','N° série'],
colModel: [
{name:'p.id',index:'p.id', width:60, align:"right",hidden:true},
{name:'g.code',index:'g.code', width:80},
{name:'c.code',index:'c.code', width:60},
{name:'c.descr',index:'c.descr', width:200},
{name:'c.ville',index:'c.ville', width:200},
{name:'q.code',index:'q.code',width:80},
{name:'k.code',index:'k.code', width:80},
{name:'2h.code',index:'2h.code', width:60},
{name:'2s.code',index:'2s.code', width:60},
{name:'2t.code',index:'2t.code', width:60},
{name:'2m.code',index:'2m.code', width:60},
{name:'2m.descr',index:'2m.descr', width:200},
{name:'p.numserie',index:'p.numserie', width:80}
],
pager: pager_id,
rownumbers: true,
rowNum:15,
rowNumWidth:40,
viewrecords: true,
emptyrecords: 'Aucune donnée correspondante...',
caption:"Liste des PARCS CLIENTS contenant l'ARTICLE sélectionné",
hidegrid:false,
rownumWidth: 40,
autowidth:true,
altRows:true,
altclass:'myAltRowClass',
sortname: 'c.code',
sortorder: "asc",
height: 345,
onSortCol: function (index, idxcol, sortorder) {
// montre la colonne sélectionnée pour le tri de la grille
if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol
&& this.p.colModel[this.p.lastsort].sortable !== false) {
$(this.grid.headers[this.p.lastsort].el).find(">div.ui-jqgrid-sortable>span.s-ico").show();
$(this.grid.headers[this.p.lastsort].el).removeClass('ui-state-active');
}
$(this.grid.headers[idxcol].el).addClass('ui-state-active');
},
onSelectRow:function(id,status){
if(lastId!=id){
if(lastId!=null){
$("#"+subgrid_table_id).jqGrid ('collapseSubGridRow', lastId);
$('#'+subgrid_table_id+'t').remove();
$('#'+id).removeClass('ui-state-highlight');
}
$('#'+id).addClass('ui-state-highlight');
}
lastId=id;
$("#"+subgrid_table_id).jqGrid('expandSubGridRow',id);
},
gridComplete:function(){
// montre la colonne triée au chargement des données
colModel = $("#"+subgrid_table_id).jqGrid('getGridParam', 'colModel');
sortName = $("#"+subgrid_table_id).jqGrid('getGridParam', 'sortname');
$('#gbox_' + $.jgrid.jqID($("#"+subgrid_table_id)[0].id) +
' tr.ui-jqgrid-labels th.ui-th-column').each(function (i) {
var cmi = colModel[i], colName = cmi.name;
if (cmi.sortable !== false) {
$(this).find('>div.ui-jqgrid-sortable>span.s-ico').show();
} else if (!cmi.sortable && colName !== 'rn' && colName !== 'cb' && colName !== 'subgrid') {
$(this).find('>div.ui-jqgrid-sortable').css({cursor: 'default'});
}
if (cmi.name === sortName) {
$(this).addClass('ui-state-active');
var gridId = $("#"+subgrid_table_id).jqGrid('getDataIDs');
for (var countRow = 0; countRow < gridId .length; countRow ++)
{
var rowId = gridId [countRow ];
var dataFromTheRow = $("#"+subgrid_table_id).jqGrid ('getRowData', rowId);
$("#"+subgrid_table_id).jqGrid('setCell',rowId, i, '','ui-widget-header');
$("#"+subgrid_table_id).jqGrid('setCell',rowId, i, '',{'border-top':0,'border-left':0});
}
}
});
},
subGrid: true,
subGridRowExpanded: function(subgrid2_id, row2_id) {
rowdata = $(this).jqGrid('getRowData',row2_id);
var parc=rowdata['p.id'],lastId=null;
var subgrid2_table_id, pager2_id;
subgrid2_table_id = subgrid2_id+"_tt";
pager2_id = "p_"+subgrid2_table_id;
$("#"+subgrid2_id).html("<table id='"+subgrid2_table_id+"' class='scroll'></table><div id='"+pager2_id+"' class='scroll'></div>");
$("#"+subgrid2_table_id).jqGrid({
url:"sg22b.php?id="+row2_id+"&parc="+parc,
datatype: "json",
caption:"Détail du PARC",
hidegrid:false,
colNames:['Id','Ensemble','Article', 'Désignation', 'Famille','S/Famille','Matière','PV base','% Remise','PV net'],
colModel:[
{name:'a.id',index:'a.id', width:60, align:"right",hidden:true},
{name:'c.code',index:'c.code', width:100,sortable:false},
{name:'a.code',index:'a.code', width:100,sortable:false},
{name:'a.descr',index:'a.descr', width:400,sortable:false},
{name:'f.code',index:'f.code', width:80,sortable:false},
{name:'s.code',index:'s.code', width:80,sortable:false},
{name:'m.code',index:'m.code', width:80,sortable:false},
{name:'t.pnc',index:'t.pnc', width:80,align:'right',sortable:false},
{name:'rem',index:'rem', width:80,align:'center',sortable:false},
{name:'pv',index:'pv', width:80,align:'right',sortable:false}
],
pager: pager2_id,
rownumbers: true,
viewrecords: true,
emptyrecords: 'Aucune donnée correspondante...',
rownumWidth: 40,
altRows:true,
altclass:'myAltRowClass',
sortname: 'c.code',
sortorder: "asc",
scroll:true,
maxheight: 230,
onSortCol: function (index, idxcol, sortorder) {
// montre la colonne sélectionnée pour le tri de la grille
if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol
&& this.p.colModel[this.p.lastsort].sortable !== false) {
$(this.grid.headers[this.p.lastsort].el).find(">div.ui-jqgrid-sortable>span.s-ico").show();
$(this.grid.headers[this.p.lastsort].el).removeClass('ui-state-active');
}
$(this.grid.headers[idxcol].el).addClass('ui-state-active');
},
gridComplete:function(){
// montre la colonne triée au chargement des données
colModel = $("#"+subgrid2_table_id).jqGrid('getGridParam', 'colModel');
sortName = $("#"+subgrid2_table_id).jqGrid('getGridParam', 'sortname');
$('#gbox_' + $.jgrid.jqID($("#"+subgrid2_table_id)[0].id) +
' tr.ui-jqgrid-labels th.ui-th-column').each(function (i) {
var cmi = colModel[i], colName = cmi.name;
if (cmi.sortable !== false) {
$(this).find('>div.ui-jqgrid-sortable>span.s-ico').show();
} else if (!cmi.sortable && colName !== 'rn' && colName !== 'cb' && colName !== 'subgrid') {
$(this).find('>div.ui-jqgrid-sortable').css({cursor: 'default'});
}
if (cmi.name === sortName) {
$(this).addClass('ui-state-active');
var gridId = $("#"+subgrid2_table_id).jqGrid('getDataIDs');
for (var countRow = 0; countRow < gridId .length; countRow ++)
{
var rowId = gridId [countRow ];
var dataFromTheRow = $("#"+subgrid2_table_id).jqGrid ('getRowData', rowId);
$("#"+subgrid2_table_id).jqGrid('setCell',rowId, i, '','ui-widget-header');
$("#"+subgrid2_table_id).jqGrid('setCell',rowId, i, '',{'border-top':0,'border-left':0});
}
}
});
}
})
$("#"+subgrid2_table_id).jqGrid('navGrid',"#"+pager2_id,{edit:false,add:false,del:false,search:false});
$("#"+subgrid2_table_id).jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
}
});
$("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false,search:false});
$("#"+subgrid_table_id).jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
$("#"+subgrid_table_id).jqGrid('hideCol', 'subgrid');
},
subGridRowColapsed: function(subgrid_id, row_id) {
// this function is called before removing the data
var subgrid_table_id;
subgrid_table_id = subgrid_id+"_t";
$("#"+subgrid_table_id).remove();
myGrid.jqGrid('resetSelection');
}
});
myGrid.jqGrid('navGrid','#tab22p',{search:false,del:false,edit:false,add:false});
myGrid.jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
myGrid.closest("div.ui-jqgrid-view")
.children("div.ui-jqgrid-titlebar")
.css({
textAlign: "center"
})
.children("span.ui-jqgrid-title")
.css({
float: "none",
color:'red',
fontSize:'16px'
});
myGrid.jqGrid('hideCol', 'subgrid');
$(window).bind('resize', function() {
myGrid.jqGrid('setGridWidth',$('body').width()-22);
var height=$('body').height()-210;
numRows=Math.floor(height/23)-(Math.floor(height/23)%5);
heightRows=numRows*23;
myGrid.jqGrid('setGridParam', {height:heightRows,rowNum:numRows});
myGrid.jqGrid('setGridHeight',heightRows);
myGrid.trigger("reloadGrid");
}).trigger('resize');});
or is there some way to solve or turnaround this trouble ?
Many thanks to whose who could bring me some help. have a nice day
JiheL
