jqGrid subGrid how to hide "+" expand icon if we don't have data sub grid - jqgrid

Question

When i don't have any data in subgrid i am getting empty grid in subgrid. Also need to hide the expand icon. Below is the code i used.
$(document).ready(function() {
'use strict';
var myData = [
{
id: "10",
c1: "My Value 1",
c2: "My Value 1.1",
subgridData: [
{ id: "10", c1: "aa", c2: "ab" },
{ id: "20", c1: "ba", c2: "bb" },
{ id: "30", c1: "ca", c2: "cb" }
]
},
{
id: "20",
c1: "My Value 2",
c2: "My Value 2.1",
subgridData: [
{ id: "10", c1: "da", c2: "db" },
{ id: "20", c1: "ea", c2: "eb" },
{ id: "30", c1: "fa", c2: "fb" }
]
},
{
id: "30",
c1: "My Value 3",
c2: "My Value 3.1"
}
],
$grid = $("#list"),
mainGridPrefix = "s_";
$grid.jqGrid({
datatype: "local",
data: myData,
colNames: ["Column 1", "Column 2"],
colModel: [
{ name: "c1", width: 180 },
{ name: "c2", width: 180 }
],
rowNum: 10,
rowList: [5, 10, 20],
pager: "#pager",
gridview: true,
ignoreCase: true,
sortname: "c1",
viewrecords: true,
autoencode: true,
height: "100%",
idPrefix: mainGridPrefix,
subGrid: true,
subGridRowExpanded: function (subgridDivId, rowId) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId);
$subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
$subgrid.jqGrid({
datatype: "local",
data: $(this).jqGrid("getLocalRow", pureRowId).subgridData,
colModel: [
{ name: "c1", width: 178 },
{ name: "c2", width: 178 }
],
height: "100%",
rowNum: 10000,
autoencode: true,
autowidth: true,
gridview: true,
idPrefix: rowId + "_"
});
$subgrid.closest("div.ui-jqgrid-view")
.children("div.ui-jqgrid-hdiv")
.hide();
}
});
$grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});
});
My output like below screenshot. How to remove the expand icon and subgrid if we don't have any data for subgrid.
Is there any way to achieve this behavior. My output like below.

Answer 1

The solution of the problem depends on the version and the fork of jqGrid, which you use. I develop free jqGrid fork and have implemented hasSubgrid callback, which I described in the answer (see the demo).
The items of your input data contains subgridData property as the array of subgrid data. Thus one should create the subgrid only if subgridData property is defined and subgridData.length > 0. Thus you need just to upgrade to the current version of jqGrid (4.13.4 or 4.13.5pre) and to add the option
subGridOptions: {
hasSubgrid: function (options) {
// the options contains the following properties
// rowid - the rowid
// iRow - the 0-based index of the row
// iCol - the 0-based index of the column
// data - the item of the data, with the data of the row
var subgridData = options.data.subgridData;
return subgridData != null && subgridData.length > 0;
}
}
to the main grid. The callback subGridOptions.hasSubgrid will be called during building the grid data, thus it works very effective like rowattr, cellattr and custom formatters.