I have a HTML data for a column and I want to print it without interpreting the HTML. He is my code
$(function() {
$("#grid").jsGrid({
width: "100%",
height: "400px",
filtering: true,
editing: true,
sorting: true,
paging: true,
data: friends,
fields: [{
name: "Name",
type: "text",
width: 100
},
{
name: "Age",
type: "number",
width: 50
},
{
name: "test",
type: "string",
autoencode: true,
width: 50
},
countries,
{
name: "Cool",
type: "checkbox",
width: 40,
title: "Is Cool",
sorting: false
},
{
type: "control"
}
]
})
})
var friends = [{
Name: "Alan Turing",
Age: 41,
Country: 3,
Cool: true,
test: "<h1>test</h1>",
}, ];
var countries = {
name: "Country",
type: "select",
items: [{
Name: "",
Id: 0
},
{
Name: "United States",
Id: 1
},
],
valueField: "Id",
textField: "Name"
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="grid"></div>
Here the test column displays the html. I want to print test without interpreting. Help would be appreciated.
I've added the cellRenderer and returned an html escaped string. You can change the itemTemplate method too if you please, I've left it as is. You can also use $(document.createElement("div")).text(item).html() instead of the String.replace logic.
I couldn't find anything in the documentation.
$(function() {
$("#grid").jsGrid({
width: "100%",
height: "400px",
filtering: true,
editing: true,
sorting: true,
paging: true,
data: friends,
fields: [{
name: "Name",
type: "text",
width: 100
},
{
name: "Age",
type: "number",
width: 50
},
{
name: "test",
type: "string",
width: 50,
itemTemplate: function(value, item) {
return "<td>" + value + "</td>";
},
cellRenderer: function(item, value) {
//return "<td>" + $(document.createElement("div")).text(item).html() + "</td>";
return "<td>" + String(item).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"') + "</td>";
}
},
countries,
{
name: "Cool",
type: "checkbox",
width: 40,
title: "Is Cool",
sorting: false
},
{
type: "control"
}
]
})
})
var friends = [{
Name: "Alan Turing",
Age: 41,
Country: 3,
Cool: true,
test: "<h1>test</h1>",
}, ];
var countries = {
name: "Country",
type: "select",
items: [{
Name: "",
Id: 0
},
{
Name: "United States",
Id: 1
},
],
valueField: "Id",
textField: "Name"
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="grid"></div>
Related
I'm using JSGrid and bring the data from a service to fill the table. Filter in the grid is not working. I've added filtering: true option but still it's not working. I've pasted a sample data and generated the same issue in the following code.
$(function() {
$("#grid").jsGrid({
width: "100%",
height: "400px",
filtering: true,
editing: true,
sorting: true,
paging: true,
data: friends,
fields: [
{ name: "Name", type: "text", width: 100 },
{ name: "Age", type: "number", width: 50 },
countries,
{ name: "Cool", type: "checkbox", width: 40, title: "Is Cool", sorting: false },
{ type: "control" }
]
})
})
var friends = [
{
Name: "Ada Lovelace",
Age: 36,
Country: 3,
Cool: true,
},
{
Name: "Grace Hopper",
Age: 85,
Country: 1,
Cool: true,
},
{
Name: "Alan Turing",
Age: 41,
Country: 3,
Cool: true,
},
{
Name: "Miguel Alcubierre",
Age: 53,
Country: 5,
Cool: true,
}
];
var countries = {
name: "Country",
type: "select",
items: [
{ Name: "", Id: 0 },
{ Name: "United States", Id: 1 },
{ Name: "France", Id: 2 },
{ Name: "United Kingdom", Id: 3 },
{ Name: "Spain", Id: 4 },
{ Name: "Mexico", Id: 5 }
],
valueField: "Id",
textField: "Name"
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="grid"></div>
If you are using client side filtering, then it implemented in loadData method of controller.
Server-side apparently implemented with server script that receives filtering parameters, and uses them to fetch data, and pass to client.
That's why you can use client-side and server-side filtering at the same time.
Here is how your controller.loadData method could look like in this case:
loadData: function(filter) {
var d = $.Deferred();
// server-side filtering
$.ajax({
type: "GET",
url: "/items",
data: filter,
dataType: "json"
}).done(function(result) {
// client-side filtering
result = $.grep(result, function(item) {
return item.SomeField === filter.SomeField;
});
d.resolve(result);
})
return d.promise();
}
hope this will help you to resolve you problem.
Using Tabulator, I have a cell which contains a unique URL that the entire row should link.
I've tried the following code:
{rowHandle:true, formatter:"handle", headerSort:false, frozen:true,
minwidth:30, minWidth:30},
{title:"Database", field:"database", minwidth:110, editor:"input"},
{title:"Environment", field:"environment", minwidth:140, editor:"input"},
{title:"Product", field:"product", minwidth:140, editor:"input"},
{title:"URL", field:"url", formatter:"link", minwidth:130,
editor:"input"},'''
$("#tabulator-example").tabulator({
rowClick:function(e,row){
},
});
The Tabulator table simply disappears each time I try to add the rowClick line of code from the example.
This is the way I've been creating tables (below).
Then in your rowClick function, you can access the row data:
rowClick: function (e, row) {
// alert("Row " + row.getData().id + " Clicked!!!!");
},
let dataTable = new Tabulator("#data-list", {
height: "84vh",
width: 150,
virtualDomBuffer: 30,
// layout: "fitDataFill",
layout: "fitColumns",
resizableColumns: false,
selectable: 1,
responsiveLayout: "hide",
placeholder: "No Data",
columns: [
{
title: "Meeting",
field: "startDate",
formatter: eventListRowFormatter,
variableHeight: true,
headerSort: false
},
{ formatter: deleteIcon, width: 5, align: "center", cellClick: deleteFromEventList }
],
rowClick: function (e, row) {
// do something
},
rowDeselected: function (row) {
// do something
},
ajaxLoader: false
});
Use Selectable selectable: true,
const tabledata = [{
id: 1,
name: "Oli Bob",
EDN: ''
},
{
id: 2,
name: "Mary May",
EDN: ''
},
{
id: 3,
name: "Christine Lobowski",
EDN: ''
},
{
id: 4,
name: "Brendon Philips",
EDN: ''
},
{
id: 5,
name: "Margret Marmajuke",
EDN: ''
},
{
id: 6,
name: "Frank Harbours",
EDN: ''
},
];
const table = new Tabulator("#example-table", {
data: tabledata,
selectable: true,
columns: [{
title: "ID",
field: "id"
},
{
title: "Name",
field: "name"
},
{
title: "EDN",
field: "EDN",
}
]
});
<!DOCTYPE html>
<html>
<head>
<!-- Tabulator CDN -->
<link href="https://unpkg.com/tabulator-tables#4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.2.7/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
</body>
</html>
I am trying to get the previous row's data when I click on a row, and haven't been very successful at it.
As an example...If I click on the row that contains "PersonB", then I should get the previous row's value from the FirstName column, which would be PersonA.
In the change event of the grid, you can see I was trying to use prev(), but all that was being returned was an object and not sure how to get the value that I need from that prev().
$(document).ready(() => {
var data = [{
ID: 1,
FirstName: "PersonA",
LastName: "123"
},
{
ID: 2,
FirstName: "PersonB",
LastName: "456"
},
{
ID: 3,
FirstName: "PersonC",
LastName: "789"
}
];
$("#GridList").kendoGrid({
dataSource: {
data: data
},
schema: {
model: {
fields: {
ID: {
type: "number"
},
FirstName: {
type: "string"
},
LastName: {
type: "string"
}
}
}
},
filterable: false,
columns: [{
field: "ID",
title: "ID",
hidden: true
},
{
field: "FirstName",
title: "FirstName"
},
{
field: "LastName",
title: "LastName"
}
],
scrollable: true,
sortable: true,
pageable: false,
selectable: "row",
reorderable: false,
groupable: false,
resizable: true,
columnMenu: false,
dataBound: function() {
//var grid = $("#GridList").data("kendoGrid");
//for (var i = 0; i < grid.columns.length; i++) {
// grid.autoFitColumn(i);
//}
},
change: function(e) {
$('#Result').text();
//var row = $(this).closest('tr');
//var prev = row.prev();
//console.log(prev);
},
height: 200
});
});
#Result {
font-size: 36px;
}
<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<div id="GridList"></div>
<label id='Result'></label>
You can do it like this:
change: function(e) {
$('#Result').text();
var data = this.dataItem(this.select().prev());
console.log(data);
}
Which would give you the following object when you click on PersonB:
{
"ID": 1,
"FirstName": "PersonA",
"LastName": "123"
}
$(document).ready(() => {
var data = [{
ID: 1,
FirstName: "PersonA",
LastName: "123"
},
{
ID: 2,
FirstName: "PersonB",
LastName: "456"
},
{
ID: 3,
FirstName: "PersonC",
LastName: "789"
}
];
$("#GridList").kendoGrid({
dataSource: {
data: data
},
schema: {
model: {
fields: {
ID: {
type: "number"
},
FirstName: {
type: "string"
},
LastName: {
type: "string"
}
}
}
},
filterable: false,
columns: [{
field: "ID",
title: "ID",
hidden: true
},
{
field: "FirstName",
title: "FirstName"
},
{
field: "LastName",
title: "LastName"
}
],
scrollable: true,
sortable: true,
pageable: false,
selectable: "row",
reorderable: false,
groupable: false,
resizable: true,
columnMenu: false,
dataBound: function() {
//var grid = $("#GridList").data("kendoGrid");
//for (var i = 0; i < grid.columns.length; i++) {
// grid.autoFitColumn(i);
//}
},
change: function(e) {
$('#Result').text();
var selected = this.dataItem(this.select().prev());
console.log(selected);
},
height: 200
});
});
#Result {
font-size: 36px;
}
<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<div id="GridList"></div>
<label id='Result'></label>
You'll have to check for the use case when the row selected is the first one but here's somecode that works (see demo below)
change: function(e) {
var selectedRows = this.select();
previousPerson = $(selectedRows).prev().find('td:nth-child(2)').text();
$('#Result').text(previousPerson);
},
$(document).ready(() => {
var data = [{
ID: 1,
FirstName: "PersonA",
LastName: "123"
},
{
ID: 2,
FirstName: "PersonB",
LastName: "456"
},
{
ID: 3,
FirstName: "PersonC",
LastName: "789"
}
];
$("#GridList").kendoGrid({
dataSource: {
data: data
},
schema: {
model: {
fields: {
ID: {
type: "number"
},
FirstName: {
type: "string"
},
LastName: {
type: "string"
}
}
}
},
filterable: false,
columns: [{
field: "ID",
title: "ID",
hidden: true
},
{
field: "FirstName",
title: "FirstName"
},
{
field: "LastName",
title: "LastName"
}
],
scrollable: true,
sortable: true,
pageable: false,
selectable: "row",
reorderable: false,
groupable: false,
resizable: true,
columnMenu: false,
dataBound: function() {
//var grid = $("#GridList").data("kendoGrid");
//for (var i = 0; i < grid.columns.length; i++) {
// grid.autoFitColumn(i);
//}
},
change: function(e) {
var selectedRows = this.select();
selectedPerson = $(selectedRows).find('td:nth-child(2)').text();
previousPerson = $(selectedRows).prev().find('td:nth-child(2)').text();
//console.log(previousPerson);
$('#Result').text(previousPerson);
},
height: 200
});
});
#Result {
font-size: 36px;
}
<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<div id="GridList"></div>
<label id='Result'></label>
A possible solution would find the index of the current selection and then fetch the index - 1 from the data array:
$(document).ready(() => {
var data = [{
ID: 1,
FirstName: "PersonA",
LastName: "123"
},
{
ID: 2,
FirstName: "PersonB",
LastName: "456"
},
{
ID: 3,
FirstName: "PersonC",
LastName: "789"
}
];
$("#GridList").kendoGrid({
dataSource: {
data: data
},
schema: {
model: {
fields: {
ID: {
type: "number"
},
FirstName: {
type: "string"
},
LastName: {
type: "string"
}
}
}
},
filterable: false,
columns: [{
field: "ID",
title: "ID",
hidden: true
},
{
field: "FirstName",
title: "FirstName"
},
{
field: "LastName",
title: "LastName"
}
],
scrollable: true,
sortable: true,
pageable: false,
selectable: "row",
reorderable: false,
groupable: false,
resizable: true,
columnMenu: false,
dataBound: function() {
//var grid = $("#GridList").data("kendoGrid");
//for (var i = 0; i < grid.columns.length; i++) {
// grid.autoFitColumn(i);
//}
},
change: function(e) {
var data = this.dataSource.data();
var selectedRows = this.select();
if(selectedRows.length > 0) {
var dataItem = this.dataItem(selectedRows[0]);
console.log('Selected ' + dataItem.FirstName);
var index = -1;
for(var i = 0; i < data.length; i++) {
if(data[i].FirstName === dataItem.FirstName) {
index = i;
}
}
if(index >0) {
dataItem = data[index -1];
console.log('Previous ' + dataItem.FirstName);
}
}
},
height: 200
});
});
#Result {
font-size: 36px;
}
<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<div id="GridList"></div>
<label id='Result'></label>
I am using KendoUI - Grid component
How can I convert this into Kendo Grid:
For Eg:
I have created kendo grid (table) by using local data. As soon as I click on "Generate chart" button, above table's filter data should create the Kendo pie chart like below...
As I am new to Kendo, can somebody please suggest me the answer?
Code:
var localData = [
{
Id: 1,
userName: "John",
game: "A",
difficultyLevel: "Easy",
startTime: "25-05-2017",
endTime: "26-05-2017",
score: "210"
},
{
Id: 2,
userName: "Sam",
game: "B",
difficultyLevel: "Hard",
startTime: "04-11-2016",
endTime: "01-12-2016",
score: "4800"
},
];
var dataSource = new kendo.data.DataSource({
data: localData,
schema: {
model: {
fields: {
Id: {
type: "number"
},
userName: {
type: "string"
},
userName: {
type: "string"
},
difficultyLevel: {
type: "string"
},
startTime: {
type: "string"
},
endTime: {
type: "string"
},
score: {
type: "number"
},
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
scrollable: true,
height: 300,
sortable: true,
filterable: false,
groupable: true,
pageable: true,
columns: [{
field: "Id",
title: "Id",
filterable: true
}, {
field: "userName",
title: "userName"
}, {
field: "game",
title: "game"
}, {
field: "difficultyLevel",
title: "difficultyLevel"
}, {
field: "startTime",
title: "startTime"
}, {
field: "endTime",
title: "endTime"
}, {
field: "score",
title: "score"
}]
});
JsFiddle
You need to prepare your data to the chart's format. Something like:
$chartContainer.kendoChart({
dataSource: {
data: localData,
schema: {
parse: function(data) {
return data.map(x => {
return {
value: Number(x.score),
category: x.userName
}
});
}
}
},
series: [{
type: "pie",
field: "value",
categoryField: "category"
}],
tooltip: {
visible: true,
template: "#= category #: #= value #"
}
});
Updated Fiddle
I am trying to generate a JQgrid with Subgrid based on examples I came across online but instead of local data, I am using json service .
By Using nested JSON data, where the nested json data is used for the subgrid section.
When I try to create the grid, I keep getting this error "SyntaxError: Unexpected token i in JSON at position 26 200 OK"
What am I doing wrong or missing?
My code is below and my Fiddle is here
MY CODE
$(document).ready(function() {
var jsonData = {
id: 48803,
thingy: "DSK1",
number: "02200220",
status: "OPEN",
subgridData: [{
num: 1,
item: "Item 1",
qty: 3
}, {
num: 2,
item: "Item 2",
qty: 5
}]
},
{
id: 48769,
thingy: "APPR",
number: "77733337",
status: "ENTERED",
subgridData: [{
num: 3,
item: "Item 3",
qty: 5
}, {
num: 2,
item: "Item 2",
qty: 10
}]
},
mmddyyyy = "";
/*********************************************************************/
$("#grid").jqGrid({
url: "/echo/json/",
mtype: "POST",
datatype: "json",
postData: {
json: JSON.stringify(jsonData)
},
height: 'auto',
colNames: ['Inv No', 'Thingy', 'Number', 'Status'],
colModel: [{
name: 'id',
width: 60,
sorttype: "int",
key: true
}, {
name: 'thingy',
width: 90
}, {
name: 'number',
width: 80,
formatter: "integer"
}, {
name: 'status',
width: 80
}],
gridview: true,
autoencode: true,
pager: '#pagerId',
caption: "Stack Overflow Subgrid Example",
subGrid: true,
subGridOptions: {
plusicon: "ui-icon-triangle-1-e",
minusicon: "ui-icon-triangle-1-s",
openicon: "ui-icon-arrowreturn-1-e"
},
shrinkToFit: false,
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id = subgrid_id + "_t",
pager_id = "p_" + subgrid_table_id,
localRowData = $(this).jqGrid("getLocalRow", row_id);
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "'></table><div id='" + pager_id + "'></div>");
$("#" + subgrid_table_id).jqGrid({
datatype: "local",
data: localRowData.subgridData,
colNames: ['No', 'Item', 'Qty'],
colModel: [{
name: "num",
width: 80,
key: true
}, {
name: "item",
width: 130
}, {
name: "qty",
width: 70,
align: "right"
}],
rowNum: 20,
idPrefix: "s_" + row_id + "_",
pager: "#" + pager_id,
autowidth: true,
gridview: true,
autoencode: true,
sortname: "num",
sortorder: "asc",
height: "auto"
}).jqGrid('navGrid', "#" + pager_id, {
edit: false,
add: false,
del: false
});
}
});
});
MY Fiddle
First of all you have to fix the syntax error. The definition of the variable jsonData in the form
var jsonData = {
id: 48803,
...
},
{
id: 48769,
...
};
is false. You try to define jsonData as array of items. Thus the code fragment have to be fixed to
var jsonData = [{
id: 48803,
...
},
{
id: 48769,
...
}];
Then you define <table id="grid"></table>, but create the grid using $("#output").jqGrid({...}); in your demo. You have to use in both cases the same value if id.
Now, back to you main problem. You want to use subgridData property of the items of the data ($(this).jqGrid("getLocalRow", row_id).subgridData) filled via datatype: "json". The datatype: "json" means server based sorting, paging and filtering of the data. jqGrid don't fill local data (the data parameter). To fill data you have to inform jqGrid that the input data from the server contains full data (all the pages) and thus jqGrid should fill data option and to use local sorting, paging and filtering. Thus you should add
loadonce: true,
and
additionalProperties: ["subgridData"],
additionally to inform jqGrid to fill the items of local data with subgridData property together with the properties id, thingy, number and status (the columns of the main grid).
Finally you can remove unneeded pager divs and to use simplified form of the pager: pager: true. You should consider to use Font Awesome additionally: iconSet: "fontAwesome".
The modified demo is https://jsfiddle.net/OlegKi/615qovew/64/, which uses the following code
$(document).ready(function() {
var jsonData = [{
id: 48803,
thingy: "DSK1",
number: "02200220",
status: "OPEN",
subgridData: [{
num: 1,
item: "Item 1",
qty: 3
}, {
num: 2,
item: "Item 2",
qty: 5
}]
},
{
id: 48769,
thingy: "APPR",
number: "77733337",
status: "ENTERED",
subgridData: [{
num: 3,
item: "Item 3",
qty: 5
}, {
num: 2,
item: "Item 2",
qty: 10
}]
}],
mmddyyyy = "",
$grid = $("#output");
/*********************************************************************/
$grid.jqGrid({
url: "/echo/json/",
mtype: "POST",
datatype: "json",
postData: {
json: JSON.stringify(jsonData)
},
colNames: ['Inv No', 'Thingy', 'Number', 'Status'],
colModel: [{
name: 'id',
width: 60,
sorttype: "int",
key: true
}, {
name: 'thingy',
width: 90
}, {
name: 'number',
width: 80,
formatter: "integer"
}, {
name: 'status',
width: 80
}],
loadonce: true,
additionalProperties: ["subgridData"],
autoencode: true,
pager: true,
caption: "Stack Overflow Subgrid Example",
subGrid: true,
/*subGridOptions: {
plusicon: "ui-icon-triangle-1-e",
minusicon: "ui-icon-triangle-1-s",
openicon: "ui-icon-arrowreturn-1-e"
},*/
iconSet: "fontAwesome",
shrinkToFit: false,
subGridRowExpanded: function(subgridDivId, rowid) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
subgridData = $(this).jqGrid("getLocalRow", rowid).subgridData;
$("#" + subgridDivId).append($subgrid);
$subgrid.jqGrid({
data: subgridData,
colNames: ['No', 'Item', 'Qty'],
colModel: [{
name: "num",
width: 80,
key: true
}, {
name: "item",
width: 130
}, {
name: "qty",
width: 70,
align: "right"
}],
rowNum: 20,
idPrefix: "s_" + rowid + "_",
pager: true,
iconSet: "fontAwesome",
autowidth: true,
autoencode: true,
sortname: "num"
}).jqGrid('navGrid', {
edit: false,
add: false,
del: false
});
}
}).jqGrid('filterToolbar', {
stringResult: true,
searchOnEnter: false,
defaultSearch: "cn"
});
$(window).on("resize", function() {
var newWidth = $grid.closest(".ui-jqgrid").parent().width();
$grid.jqGrid("setGridWidth", newWidth, true);
}).triggerHandler("resize");
});