in json i hav create a button using bootstrap popup but how to display the particular row details view in popup ....
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>jqGrid </title>
<meta name="description" content="Dynamic tables and grids using jqGrid plugin" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!--
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/font-awesome/4.2.0/css/font-awesome.min.css" />
<!--
<link rel="stylesheet" href="assets/css/jquery-ui.min.css" />
<link rel="stylesheet" href="assets/css/datepicker.min.css" />
<link rel="stylesheet" href="assets/css/ui.jqgrid.min.css" />
<!--
<link rel="stylesheet" href="assets/fonts/fonts.googleapis.com.css" />
<!--
<link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
<script src="assets/js/ace-extra.min.js"></script>
</head>
<body class="no-skin">
<div class="main-container" id="main-container">
<div class="main-content">
<div class="main-content-inner">
<div class="page-content">
<div class="row">
<div class="col-xs-12">
<table id="grid-table"></table>
</div><!--
</div><!--
</div><!--
</div>
</div><!--
</div><!--
<!--
<!--
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Attendance Report</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="assets/js/jquery.2.1.1.min.js"></script>
<script type="text/javascript">
window.jQuery || document.write("<script src='assets/js/jquery.min.js'>"+"<"+"/script>");
</script>
<script type="text/javascript">
if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-datepicker.min.js"></script>
<script src="assets/js/jquery.jqGrid.min.js"></script>
<script src="assets/js/grid.locale-en.js"></script>
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
var grid_selector = "#grid-table";
$(window).on('resize.jqGrid', function () {
$(grid_selector).jqGrid( 'setGridWidth', $(".page-content").width() );
})
jQuery(grid_selector).jqGrid({
url: 'attend.json',
datatype: "json",
height: 250,
colNames:['Employee Name','Attendance','view'],
colModel:[
{name:'empname',index:'empname', width:60},
{name:'attend',index:'attend', width:50},
{name:'view',index:'view',width:30}
],
viewrecords : true,
loadonce:true,
altRows: false,
caption: "Attendance"
});
$(window).triggerHandler('resize.jqGrid');
});
</script>
</body>
</html>
json
[ {"empname":"sa","attend":"present","view":"<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal'>View</button>"},
{"empname":"ra","attend":"present","view":"<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal'>View</button>"},
{"empname":"pa","attend":"present","view":"<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal'>View</button>"},
{"empname":"ma","attend":"present","view":"<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal'>View</button>"},
{"empname":"ra","attend":"present","view":"<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal'>View</button>"},
{"empname":"la","attend":"present","view":"<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal'>View</button>"}
]