jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
215 lines (189 loc) • 10.4 kB
HTML
<html lang="en">
<head>
<title id='Description'>JavaScript PivotGrid Component Drill Through Pivot Cells</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.light.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.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/jqxdatatable.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxwindow.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/jqxmenu.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxpivot.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxpivotgrid.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare sample data
var data = new Array();
var firstNames =
[
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];
var lastNames =
[
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];
var productNames =
[
"Black Tea", "Green Tea", "Caffe Espresso"
];
var priceValues =
[
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];
for (var i = 0; i < 500; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
var source =
{
localdata: data,
datatype: "array",
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot adapter from the dataAdapter
var pivotAdapter = new $.jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: false,
totals: {rows: {subtotals: true, grandtotals: true}, columns: {subtotals: false, grandtotals: true}},
rows: [{ dataField: 'firstname' }, { dataField: 'lastname'}],
columns: [{ dataField: 'productname' }],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', width: NamedNodeMap, formatSettings: { prefix: '$', decimalPlaces: 2 } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{ dataField: 'price', 'function': 'average', text: 'average', formatSettings: { prefix: '$', decimalPlaces: 2} }
]
});
// create a pivot grid
$('#divPivotGrid').jqxPivotGrid(
{
source: pivotAdapter,
treeStyleRows: true,
autoResize: false,
multipleSelectionEnabled: true
});
// get instance of the grid
var pivotGridInstance = $('#divPivotGrid').jqxPivotGrid('getInstance');
// handle double click on grid cells
$('#divPivotGrid').on('pivotcelldblclick', function (e) {
var args = e.args;
drillThrough(args.pivotRow, args.pivotColumn);
});
// handle window open events
$('#drillThroughWindow').on('open', function (e) {
pivotGridInstance.selectionEnabled = false;
});
// handle window open events
$('#drillThroughWindow').on('close', function (e) {
pivotGridInstance.selectionEnabled = true;
});
function drillThrough(pivotRow, pivotColumn)
{
var rows = pivotGridInstance.getPivotCells().drillThroughCell(pivotRow, pivotColumn);
var drillThroughRows = [];
for (var i = 0; i < rows.length; i++)
drillThroughRows[i] = data[rows[i]]
var drillThroughSrc =
{
localData: drillThroughRows,
dataType: "array",
dataFields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
var drillThroughDataAdapter = new $.jqx.dataAdapter(drillThroughSrc);
$("#tableSrcRecords").jqxDataTable(
{
pageable: true,
width: '100%',
height: '100%',
pagerButtonsCount: 10,
source: drillThroughDataAdapter,
columnsResize: true,
columns: [
{ text: 'First name', dataField: 'firstname', width: 200 },
{ text: 'Last name', dataField: 'lastname', width: 200 },
{ text: 'Product', editable: false, dataField: 'productname', width: 180 },
{ text: 'Quantity', dataField: 'quantity', width: 80, cellsAlign: 'right', align: 'right' },
{ text: 'Unit Price', dataField: 'price', width: 90, cellsAlign: 'right', align: 'right', cellsFormat: 'c2' },
{ text: 'Total', dataField: 'total', cellsAlign: 'right', align: 'right', cellsFormat: 'c2' }
]
});
$("#tableSrcRecords").jqxDataTable('refresh');
$('#drillThroughWindow').jqxWindow('open');
}
var offset = $('#divPivotGrid').position();
// create popup window
$('#drillThroughWindow').jqxWindow({
autoOpen: false,
position: { x: offset.left + 150, y: offset.top + 70 },
showCollapseButton: true, maxHeight: 400, maxWidth: 700, minHeight: 200, minWidth: 200, height: 300, width: 500,
initContent: function () {
$('#tableSrcRecords').jqxDataTable({width: '100%', height: '100%'});
}
});
drillThrough(pivotGridInstance.getPivotRows().items[0], pivotGridInstance.getPivotColumns().items[0].valueItems[0]);
});
</script>
</head>
<body class='default'>
<div id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
</div>
<div id="drillThroughWindow" style="display:none;">
<div id="windowHeader">
Drillthrough records
</div>
<div style="overflow: hidden;" id="windowContent">
<div id="tableSrcRecords" style="width: 100%; height: 100%;"></div>
</div>
</div>
<div class="example-description">
<br />
<h2>Description</h2>
<div style="width: 800px;">
This is an example of the pivot grid drill through functionality. It allows you to find the records in the data source which were
used to calculate the value of a particular cell in the pivot grid. To drill through a specific grid cell double click on it and
you will see a window displaying the source records. In addition to the pivot grid widget, this example uses the window and
data table widgets. The example also demonstrates how to handle open and close events of the window widgets and how to
enable or disable the selection functionality of the pivot grid component. This demo is implemented using jQuery. You can find
similar examples implemented in React JS and Angular inside the React and Angular components section of the website.
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>