free jqGrid with Caption and without column headers - jqgrid

Question

I want to display the caption, but not the column headers. When the grid is first displayed only the caption should be visible. When the grid is expanded, the column headers are visible. Please see jsFiddle
var $grid = $("#grid");
$grid.closest("div.ui-jqgrid-view")
.children("div.ui-jqgrid-hdiv")
.hide();

Answer 1

Here you go with a solution https://jsfiddle.net/7v70640y/5/
$("#grid").jqGrid({
colModel: [
{ name: "firstName" },
{ name: "lastName" }
],
caption: "The caption",
hiddengrid: true,
data: [
{ id: 10, firstName: "Angela", lastName: "Merkel" },
{ id: 20, firstName: "Vladimir", lastName: "Putin" },
{ id: 30, firstName: "David", lastName: "Cameron" },
{ id: 40, firstName: "Barack", lastName: "Obama" },
{ id: 50, firstName: "François", lastName: "Hollande" }
]
});
$('div[role="columnheader"]').parent().hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet"/>
<table id="grid"></table>
Just hide the div & it's parent div which has role as columnheader
$('div[role="columnheader"]').parent().hide();
Update with multiple jqGrid
Here you go with a solution https://jsfiddle.net/7v70640y/6/
$("#grid1").jqGrid({
colModel: [
{ name: "firstName" },
{ name: "lastName" }
],
caption: "The caption",
hiddengrid: true,
data: [
{ id: 10, firstName: "Angela", lastName: "Merkel" },
{ id: 20, firstName: "Vladimir", lastName: "Putin" },
{ id: 30, firstName: "David", lastName: "Cameron" },
{ id: 40, firstName: "Barack", lastName: "Obama" },
{ id: 50, firstName: "François", lastName: "Hollande" }
]
});
$("#grid2").jqGrid({
colModel: [
{ name: "firstName" },
{ name: "lastName" }
],
caption: "The caption",
hiddengrid: true,
data: [
{ id: 10, firstName: "Angela", lastName: "Merkel" },
{ id: 20, firstName: "Vladimir", lastName: "Putin" },
{ id: 30, firstName: "David", lastName: "Cameron" },
{ id: 40, firstName: "Barack", lastName: "Obama" },
{ id: 50, firstName: "François", lastName: "Hollande" }
]
});
$('#gview_grid1').find('div[role="columnheader"]').parent().hide();
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
<table id="grid1"></table>
<br/><br/>
<table id="grid2"></table>
Hope this will help you.