Jqgrid Demo

Jqgrid sparkline charts

by Aditya Shrivastava

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/jquery.jqgrid.src.js"></script>
 <table id="list"></table>

JavaScript

var mydata = [
        {id:"1", invdate:"2007-10-01",name:"Microsoft" , sl:"[10,8,5,7,4,4,1]", parent: "null",level: "0",isLeaf: false, 
         expanded: true, loaded: true},
        {id:"2", invdate:"2007-10-02",name:"Google", sl:"[1,34,3,2,1]",parent: "1",level: "1",isLeaf: false, 
         expanded: false, loaded: true },
        {id:"3", invdate:"2007-09-01",name:"IBM", sl:"[10,8,5,7,4,4,1]",parent: "2",level: "2",isLeaf:true, 
         expanded: false, loaded: true},
        {id:"4", invdate:"2007-10-04",name:"Baidu", sl:"[1,34,3,2,1]", parent: "null",level: "0",isLeaf: false, expanded: false, loaded: true},
        {id:"5", invdate:"2007-10-31",name:"Apple", sl:"[10,8,5,7,4,4,1]",parent: "4",level: "1",isLeaf: false, expanded: false, loaded: true },
        {id:"6", invdate:"2007-09-06",name:"Amazon.com", sl:"[1,34,3,2,1]",parent: "5",level: "2",isLeaf:true, expanded: false, loaded: true},
        {id:"7", invdate:"2007-10-04",name:"Nvidia", sl:"[10,8,5,7,4,4,1]",parent: "null",level: "0",isLeaf: false, expanded: false, loaded: true},
        {id:"8", invdate:"2007-10-03",name:"Ebay", sl:"[1,34,3,2,1]",parent: "7",level: "1",isLeaf: false, expanded: false, loaded: true},
        {id:"9", invdate:"2007-09-01",name:"Adobe", sl:"[10,8,5,7,4,4,1]",parent: "8",level: "2",isLeaf:true, expanded: false, loaded: true},
        {id:"10",invdate:"2007-09-08",name:"Yahoo",sl:"[1,34,3,2,1]",parent: "null",level: "0",isLeaf: false, expanded: false, loaded: true},
        {id:"11",invdate:"2007-09-08",name:"BMW",sl:"[1,34,3,2,1]",parent: "10",level: "1",isLeaf: false, expanded: false, loaded: true},
        {id:"12",invdate:"2007-09-10",name:"Mercedes",sl:"[10,8,5,7,4,4,1]",parent: "11",level: "2",isLeaf:true, expanded: false, loaded: true}
    ],
    $grid = $("#list");

$grid.jqGrid({
    datatype:'local',
    data: mydata,
    colNames:['Inv No','Date','Share',''],
    colModel:[
        {name:'id',width:75,sorttype: 'int'},
        {name:'invdate',width:100,...