<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Shield UI Demos</title>
<link id="themecss" rel="stylesheet" type="text/css" href="//www.shieldui.com/shared/components/latest/css/light/all.min.css" />
<script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
</head>
<body class="theme-light">
<script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/jszip.min.js"></script>
<script type="text/javascript" src="/Content/Json/gridData.js"></script>
<div id="grid"></div>
<script type="text/javascript">
jQuery(function ($) {
$("#grid").shieldGrid({
dataSource: {
data: gridData
},
paging: {
pageSize: 20,
pageLinksCount: 10
},
columns: [
{ field: "id", width: "70px", title: "ID" },
{ field: "name", title: "Person Name" },
{ field: "company", title: "Company Name" },
{ field: "email", title: "Email Address", width: "270px" }
],
toolbar: [
{
buttons: [
{
commandName: "excel",
caption: '<span class="sui-sprite sui-grid-icon-export-excel"></span> <span class="sui-grid-button-text">Export to Excel</span>'
}
]
}
],
exportOptions: {
proxy: "/filesaver/save",
excel: {
fileName: "shieldui-export",
author: "John Smith",
dataSource: {
data: gridData
},
readDataSource: true
}
}
});
});
</script>
</body>
</html>