Skip to content

Commit 6744be9

Browse files
suresh-mohansuresh-mohan
committed
Uploading the demo to the repository.
1 parent 33a83a2 commit 6744be9

File tree

4 files changed

+179
-2
lines changed

4 files changed

+179
-2
lines changed

‎Date Formatting/Date_Formatting.HTML‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
4+
<head>
5+
<title>Essential JS 2</title>
6+
<!-- Essential JS 2 material theme -->
7+
<link href="styles/material.css" rel="stylesheet" type="text/css" />
8+
9+
<!-- Essential JS 2 pivot table's global script -->
10+
<script src="scripts/ej2.min.js" type="text/javascript"></script>
11+
</head>
12+
13+
<body>
14+
<div id="container">
15+
<div id="overlay">
16+
<div id="text">
17+
Please wait...
18+
</div>
19+
</div>
20+
<!-- Add the HTML <div> element for pivot table -->
21+
<div id="PivotTable"></div>
22+
</div>
23+
<script>
24+
setTimeout(() => {
25+
var customername = ['TOM', 'Hawk', 'Jon', 'Chandler', 'Monica', 'Rachel', 'Phoebe', 'Gunther',
26+
'Ross', 'Geller', 'Joey', 'Bing', 'Tribbiani', 'Janice', 'Bong', 'Perk', 'Green', 'Ken', 'Adams'];
27+
var city = ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Philadelphia', 'Phoenix', 'San Antonio', 'Austin',
28+
'San Francisco', 'Columbus', 'Washington', 'Portland', 'Oklahoma', 'Las Vegas', 'Virginia', 'St. Louis', 'Birmingham'];
29+
var dt = 0;
30+
var isSpinnerActive = false;
31+
var dataSource;
32+
var count = 200000;
33+
var result = [];
34+
for (var i = 1; i < (count + 1); i++) {
35+
var sold = Math.round(Math.random() * 5) + 50;
36+
var stock =
37+
Math.round(Math.round(Math.random() * 10) + 250) - sold;
38+
result.push({
39+
ProductID: Math.floor(Math.random() * (1010 - 1000 + 1) + 1010),
40+
City: city[Math.round(Math.random() * city.length)] || city[0],
41+
Date: new Date(new Date(1950, 0, 1).getTime() + Math.random() * (new Date().getTime() - new Date(1950, 0, 1).getTime())),
42+
CustomerName: customername[Math.round(Math.random() * customername.length)] || customername[0],
43+
Sold: sold,
44+
InStock: stock,
45+
});
46+
}
47+
date1 = new Date().getTime();
48+
dataSource = result;
49+
50+
var pivotTableObj = new ej.pivotview.PivotView({
51+
dataSourceSettings: {
52+
dataSource: dataSource,
53+
expandAll: false,
54+
enableSorting: false,
55+
formatSettings: [{ name: 'Date', type: 'date', format: 'dd/MM/yyyy-hh:mm a' }],
56+
rows: [
57+
{ name: 'Date', caption: 'Date' }
58+
],
59+
columns: [
60+
{ name: 'ProductID', caption: 'Product ID' }
61+
],
62+
values: [
63+
{ name: 'Sold', caption: 'Unit Sold' },
64+
{ name: 'InStock', caption: 'In Stock' }
65+
],
66+
filters: [],
67+
groupSettings: [{ name: 'ProductID', type: 'Number', rangeInterval: 4 }]
68+
},
69+
enginePopulated: function () {
70+
document.getElementById("overlay").style.display = "none";
71+
},
72+
width: 1050,
73+
height: 400,
74+
showGroupingBar: true,
75+
enableVirtualization: true,
76+
maxNodeLimitInMemberEditor: 100
77+
});
78+
pivotTableObj.appendTo('#PivotTable');
79+
});
80+
</script>
81+
</body>
82+
<style>
83+
#overlay {
84+
position: fixed;
85+
display: block;
86+
width: 100%;
87+
height: 100%;
88+
top: 0;
89+
left: 0;
90+
right: 0;
91+
bottom: 0;
92+
background-color: white;
93+
z-index: 1002;
94+
}
95+
96+
#text {
97+
font-size: 20px;
98+
color: black;
99+
}
100+
</style>
101+
102+
</html>

‎Date Formatting/scripts/ej2.min.js‎

Lines changed: 69 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Date Formatting/styles/material.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎README.md‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,7 @@
1-
# date-formatting-pivot-table
2-
This repository contain the sample that demonstrates how the date formatting feature working in Syncfusion Pivot Table control.
1+
# Date Formatting in Syncfusion Pivot Table
2+
This repository contain the sample that demonstrates how the date formatting feature working in [Syncfusion Pivot table](https://www.syncfusion.com/javascript-ui-controls/js-pivot-table).
3+
4+
## How to run the project
5+
6+
* Checkout this project to a location in your disk.
7+
* Open the HTML file to work with the demo.

0 commit comments

Comments
 (0)