jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
85 lines (83 loc) • 3.99 kB
HTML
<html lang="en">
<head>
<meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<meta name="msapplication-tap-highlight" content="no" />
<title id='Description'>JavaScript TreeGrid Paging - Mobile Example
</title>
<link rel="stylesheet" href="../styles/demo.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.windowsphone.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.blackberry.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.mobile.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.android.css" type="text/css" />
<script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxdatatable.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxtreegrid.js"></script>
<script type="text/javascript" src="../../../sampledata/generatedata.js"></script>
<script type="text/javascript" src="../simulator.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepares the simulator.
var theme = prepareSimulator("treeGrid");
// prepare the data
var source =
{
dataType: "array",
dataFields: [
{ name: "name", type: "string" },
{ name: "quantity", type: "number" },
{ name: "id", type: "string" },
{ name: "parentid", type: "number" },
{ name: "price", type: "number" },
{ name: "date", type: "date" },
{ name: "customer", type: "string" }
],
hierarchy:
{
keyDataField: { name: 'id' },
parentDataField: { name: 'parentid' }
},
id: 'id',
localData: generateordersdata()
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
source: dataAdapter,
columnsHeight: 40,
width: '100%',
height: '100%',
theme: theme,
pageable: true,
pagerButtonsCount: 3,
autoRowHeight: false,
pageSize: 15,
ready: function () {
$("#treeGrid").jqxTreeGrid('expandRow', '2');
},
columns: [
{ text: 'Order Name', dataField: "name", align: 'center', width: '60%' },
{ text: 'Customer', dataField: "customer", align: 'center', width: '40%' },
]
});
initSimulator("treeGrid");
});
</script>
</head>
<body class='default'>
<div id="demoContainer" class="device-mobile">
<div id="container" class="device-mobile-container">
<div style="border: none;" id='treeGrid'>
</div>
</div>
</div>
</body>
</html>