API tools faq
paste
Guest User

Untitled

a guest
Feb 25th, 2018
83
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.68 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>DataGrid: Advanced Filter Tests</title>
  8.  
  9. <script src="../webcomponentsjs/webcomponents-lite.js"></script>
  10. <link rel="import" href="../polymer/polymer.html" />
  11. <link rel="import" href="../px-theme/px-theme-styles.html">
  12. <link rel="import" href="px-data-grid.html" />
  13. <link rel="import" href="px-data-grid-paginated.html" />
  14.  
  15. <style is="custom-style">
  16. html, body {
  17. margin: 10px;
  18. font-size: 15px;
  19. }
  20. </style>
  21.  
  22. <custom-style>
  23. <style include="px-theme-styles" is="custom-style"></style>
  24. </custom-style>
  25.  
  26. </head>
  27.  
  28. <body>
  29. <dom-bind >
  30. <template is="dom-bind" id="table" >
  31.  
  32. <div >
  33. <h2>Advanced Filtering+Autofilter+Editable APM Datagrid </h2>
  34.  
  35. <px-data-grid
  36. id="table"
  37. table-data='[
  38. {
  39. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_15",
  40. "Correlated Tags": "15",
  41. "Temp" :"37.5",
  42. "Units": "celsius",
  43. "Description": "This is a test for filtering data in celsius",
  44. "Maintenance Date": "1985-04-12 11:16:49",
  45. "Install Date" : "1986-02-10 07:00:38",
  46. "Asset": "Tag_Temperature_With_Data_15 GE_SAN_RAMON_1111111",
  47. "Domain": "GE_SanRamon1100",
  48. "Location" : "North America",
  49. "Timezone" :"PST"
  50. },
  51. {
  52. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_15",
  53. "Correlated Tags": "15",
  54. "Temp" :"10.23",
  55. "Units": "Some fancy temperature units",
  56. "Description": "This is a test for filtering data",
  57. "Maintenance Date": "1985-04-12 17:05:38",
  58. "Install Date" : "1987-03-25 11:14:29",
  59. "Asset": "Tag_Temperature_With_Data_15 GE_SAN_RAMON_1111111",
  60. "Domain": "GE_SanRamon1100",
  61. "Location" : "North America",
  62. "Timezone" :"PST"
  63. },
  64. {
  65. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_14",
  66. "Correlated Tags": "14",
  67. "Units": "Fahrenheit",
  68. "Temp" :"7654.111",
  69. "Description": "This is a test for filtering data in fahrenheit not in celsius",
  70. "Maintenance Date": "1985-04-12 18:11:25",
  71. "Install Date" : "1985-06-16 08:21:45",
  72. "Asset": "Tag_Temperature_With_Data_14 GE_SAN_RAMON_1111111",
  73. "Domain": "GE_Brazil_1100",
  74. "Location" : "South America",
  75. "Timezone" :"PST"
  76. },
  77. {
  78. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_19",
  79. "Correlated Tags": "19",
  80. "Units": "celsius",
  81. "Temp" :"6",
  82. "Description": "This is AViD Tag Temperature Type description in celsius",
  83. "Maintenance Date": "1994-10-12 03:13:22",
  84. "Install Date" : "1987-09-11 18:32:22",
  85. "Asset": "Tag_Temperature_With_Data_19 GE_SAN_RAMON_1111111",
  86. "Domain": "GE_Chile_1111",
  87. "Location" : "South America",
  88. "Timezone" :"PST"
  89. },
  90. {
  91. "Tag Name coz we like really long names": "Tag_pressure_With_Data_48",
  92. "Correlated Tags": "48",
  93. "Units": "at",
  94. "Temp" :"1210.2234",
  95. "Description": "This is AViD Tag pressure2 Type description in celsius",
  96. "Maintenance Date": "1995-11-13 13:13:55",
  97. "Install Date" : "1987-05-13 12:23:45",
  98. "Asset": "Tag_pressure_With_Data_48 GE_SAN_RAMON_1111111",
  99. "Domain": "GE_Brazil_1111",
  100. "Location" : "South America",
  101. "Timezone" :"PST"
  102. },
  103. {
  104. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_05",
  105. "Correlated Tags": "05",
  106. "Units": "Celsius",
  107. "Temp" :"98.33233",
  108. "Description": ".../unit15/This is AViD Tag Temperature Type description",
  109. "Maintenance Date": "1996-12-12 15:53:14",
  110. "Install Date" : "1995-12-25 05:23:04",
  111. "Asset": "Tag_Temperature_With_Data_05 GEffSAN_RAMON_1111111",
  112. "Domain": "GE_Dubai_1145",
  113. "Location" : "Asia",
  114. "Timezone" :"PST"
  115. },
  116. {
  117. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_06",
  118. "Correlated Tags": "06",
  119. "Units": "Celsius",
  120. "Temp" :"918.33233",
  121. "Description": ".../unit06/This is AViD Tag Temperature Type description",
  122. "Maintenance Date": "1996-12-12 12:07:22",
  123. "Install Date" : "1995-12-25 05:23:03",
  124. "Asset": "Tag_Temperature_With_Data_06 GEffSAN_RAMON_1111111",
  125. "Domain": "GE_Dubai_1146",
  126. "Location" : "Asia",
  127. "Timezone" :"PST"
  128. }
  129. ]'
  130. columns='[
  131. {
  132. "name":"Tag Name coz we like really long names",
  133. "path":"Tag Name coz we like really long names",
  134. "hidden":false,
  135. "editable":false,
  136. "frozen":false,
  137. "id":"Tag Name coz we like really long names[string]"
  138. },
  139. {
  140. "name":"Correlated_Tag_Data",
  141. "type": "number",
  142. "path":"Correlated Tags",
  143. "hidden":false,
  144. "editable":true,
  145. "frozen":false,
  146. "id":"Correlated Tags[number]",
  147. "renderer":"px-data-grid-number-renderer",
  148. "minBound" : 10,
  149. "maxBound" : 150
  150. },
  151. {
  152. "name":"Temp",
  153. "type": "number",
  154. "path":"Temp",
  155. "hidden":false,
  156. "editable":true,
  157. "frozen":false,
  158. "id":"Temp[number]",
  159. "renderer":"px-data-grid-number-renderer"
  160. },
  161. {
  162. "name":"Maintenance Date",
  163. "type": "date",
  164. "path":"Maintenance Date",
  165. "hidden":false,
  166. "editable":true,
  167. "frozen":false,
  168. "id":"Maintenance Date[date]",
  169. "renderer":"px-data-grid-date-renderer",
  170. "filterByTime":true,
  171. "rendererConfig":{
  172. "dataFormat": "ISO",
  173. "displayFormat": "MM-DD-YYYY HH:mm:ss"
  174. }
  175. },
  176. {
  177. "name":"Install Date",
  178. "type": "date",
  179. "path":"Install Date",
  180. "hidden":false,
  181. "editable":true,
  182. "frozen":false,
  183. "id":"Install Date[date]",
  184. "renderer":"px-data-grid-date-renderer",
  185. "rendererConfig":{
  186. "dataFormat": "YYYY-MM-DD HH:mm:ss",
  187. "displayFormat": "MM-DD-YYYY HH:mm:ss",
  188. "hideTime" : false
  189. },
  190. "dateRanges":[
  191. {"name":"Last 7 days"},
  192. {"name":"Last 14 days"},
  193. {"name":"This month"},
  194. {"name":"Last month"},
  195. {"name":"Last year"}
  196. ]
  197. },
  198. {
  199. "name":"Units",
  200. "path":"Units",
  201. "type":"string",
  202. "editable":true,
  203. "required":true,
  204. "frozen":false,
  205. "id":"Units[string]",
  206. "renderer":"px-data-grid-string-renderer"
  207. },
  208. {
  209. "name":"Description",
  210. "path":"Description",
  211. "type":"string",
  212. "editable":true,
  213. "required":true,
  214. "frozen":false,
  215. "id":"Description[string]",
  216. "renderer":"px-data-grid-string-renderer"
  217. },
  218. {
  219. "name":"Asset",
  220. "path":"Asset",
  221. "type":"string",
  222. "editable":true,
  223. "required":true,
  224. "frozen":false,
  225. "renderer":"px-data-grid-string-renderer",
  226. "id":"Asset[string]"
  227. },
  228. {
  229. "name":"Domain",
  230. "path":"Domain",
  231. "type":"string",
  232. "editable":true,
  233. "required":true,
  234. "frozen":false,
  235. "renderer":"px-data-grid-string-renderer",
  236. "id":"Domain[string]"
  237.  
  238. },
  239. {
  240. "name":"Location",
  241. "path":"Location",
  242. "type":"string",
  243. "editable":false,
  244. "required":true,
  245. "frozen":false,
  246. "id":"Location[string]"
  247. },
  248. {
  249. "name":"Timezone",
  250. "path":"Timezone",
  251. "type":"string",
  252. "editable":true,
  253. "required":true,
  254. "frozen":false,
  255. "renderer":"px-data-grid-string-renderer",
  256. "id":"Timezone[string]"
  257. }
  258. ]'
  259.  
  260.  
  261. selection-mode="multi"
  262. default-column-width="180px"
  263. default-column-flex="0"
  264. offer-filter-saving
  265. filterable
  266.  
  267. editable
  268. language="en"
  269.  
  270. item-actions='[{"name":"Add Row","id":"add"},{"name":"Delete Row","id":"delete"}]'
  271. allow-sort-by-selection
  272. column-reordering-allowed
  273.  
  274. auto-filter
  275. table-actions='[{"name":"Export CSV","id":"CSV"}]'
  276. >
  277.  
  278. </px-data-grid>
  279. </div>
  280.  
  281. <div style="height:850px; width:850px">
  282. <h2>Filterable Paginated </h2>
  283. <px-data-grid-paginated
  284. table-data='[
  285. {
  286. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_15",
  287. "Correlated Tags": "15",
  288. "Temp" :"37.5",
  289. "Units": "celsius",
  290. "Description": "This is a test for filtering data in celsius",
  291. "Maintenance Date": "1985-04-12 11:16:49",
  292. "Install Date" : "1986-02-10 07:00:38",
  293. "Asset": "Tag_Temperature_With_Data_15 GE_SAN_RAMON_1111111",
  294. "Domain": "GE_SanRamon1100",
  295. "Location" : "North America",
  296. "Timezone" :"PST"
  297. },
  298. {
  299. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_15",
  300. "Correlated Tags": "15",
  301. "Temp" :"10.23",
  302. "Units": "Some fancy temperature units",
  303. "Description": "This is a test for filtering data",
  304. "Maintenance Date": "1985-04-12 17:05:38",
  305. "Install Date" : "1987-03-25 11:14:29",
  306. "Asset": "Tag_Temperature_With_Data_15 GE_SAN_RAMON_1111111",
  307. "Domain": "GE_SanRamon1100",
  308. "Location" : "North America",
  309. "Timezone" :"PST"
  310. },
  311. {
  312. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_14",
  313. "Correlated Tags": "14",
  314. "Units": "Fahrenheit",
  315. "Temp" :"7654.111",
  316. "Description": "This is a test for filtering data in fahrenheit not in celsius",
  317. "Maintenance Date": "1985-04-12 18:11:25",
  318. "Install Date" : "1985-06-16 08:21:45",
  319. "Asset": "Tag_Temperature_With_Data_14 GE_SAN_RAMON_1111111",
  320. "Domain": "GE_Brazil_1100",
  321. "Location" : "South America",
  322. "Timezone" :"PST"
  323. },
  324. {
  325. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_19",
  326. "Correlated Tags": "19",
  327. "Units": "celsius",
  328. "Temp" :"6",
  329. "Description": "This is AViD Tag Temperature Type description in celsius",
  330. "Maintenance Date": "1994-10-12 03:13:22",
  331. "Install Date" : "1987-09-11 18:32:22",
  332. "Asset": "Tag_Temperature_With_Data_19 GE_SAN_RAMON_1111111",
  333. "Domain": "GE_Chile_1111",
  334. "Location" : "South America",
  335. "Timezone" :"PST"
  336. },
  337. {
  338. "Tag Name coz we like really long names": "Tag_pressure_With_Data_48",
  339. "Correlated Tags": "48",
  340. "Units": "at",
  341. "Temp" :"1210.2234",
  342. "Description": "This is AViD Tag pressure2 Type description in celsius",
  343. "Maintenance Date": "1995-11-13 13:13:55",
  344. "Install Date" : "1987-05-13 12:23:45",
  345. "Asset": "Tag_pressure_With_Data_48 GE_SAN_RAMON_1111111",
  346. "Domain": "GE_Brazil_1111",
  347. "Location" : "South America",
  348. "Timezone" :"PST"
  349. },
  350. {
  351. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_05",
  352. "Correlated Tags": "05",
  353. "Units": "Celsius",
  354. "Temp" :"98.33233",
  355. "Description": ".../unit15/This is AViD Tag Temperature Type description",
  356. "Maintenance Date": "1996-12-12 15:53:14",
  357. "Install Date" : "1995-12-25 05:23:04",
  358. "Asset": "Tag_Temperature_With_Data_05 GEffSAN_RAMON_1111111",
  359. "Domain": "GE_Dubai_1145",
  360. "Location" : "Asia",
  361. "Timezone" :"PST"
  362. },
  363. {
  364. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_06",
  365. "Correlated Tags": "06",
  366. "Units": "Celsius",
  367. "Temp" :"918.33233",
  368. "Description": ".../unit06/This is AViD Tag Temperature Type description",
  369. "Maintenance Date": "1996-12-12 12:07:22",
  370. "Install Date" : "1995-12-25 05:23:03",
  371. "Asset": "Tag_Temperature_With_Data_06 GEffSAN_RAMON_1111111",
  372. "Domain": "GE_Dubai_1146",
  373. "Location" : "Asia",
  374. "Timezone" :"PST"
  375. }
  376. ]'
  377. columns='[
  378. {
  379. "name":"Tag Name coz we like really long names",
  380. "path":"Tag Name coz we like really long names",
  381. "hidden":false,
  382. "editable":false,
  383. "frozen":false,
  384. "id":"Tag Name coz we like really long names[string]"
  385. },
  386. {
  387. "name":"Correlated_Tag_Data",
  388. "type": "number",
  389. "path":"Correlated Tags",
  390. "hidden":false,
  391. "editable":true,
  392. "frozen":false,
  393. "id":"Correlated Tags[number]",
  394. "renderer":"px-data-grid-number-renderer",
  395. "minBound" : 10,
  396. "maxBound" : 150
  397. },
  398. {
  399. "name":"Temp",
  400. "type": "number",
  401. "path":"Temp",
  402. "hidden":false,
  403. "editable":true,
  404. "frozen":false,
  405. "id":"Temp[number]",
  406. "renderer":"px-data-grid-number-renderer"
  407. },
  408. {
  409. "name":"Maintenance Date",
  410. "type": "date",
  411. "path":"Maintenance Date",
  412. "hidden":false,
  413. "editable":true,
  414. "frozen":false,
  415. "id":"Maintenance Date[date]",
  416. "renderer":"px-data-grid-date-renderer",
  417. "filterByTime":true,
  418. "rendererConfig":{
  419. "dataFormat": "YYYY-MM-DD HH:mm:ss",
  420. "displayFormat": "MM-DD-YYYY HH:mm:ss"
  421. }
  422. },
  423. {
  424. "name":"Install Date",
  425. "type": "date",
  426. "path":"Install Date",
  427. "hidden":false,
  428. "editable":true,
  429. "frozen":false,
  430. "id":"Install Date[date]",
  431. "renderer":"px-data-grid-date-renderer",
  432. "rendererConfig":{
  433. "dataFormat": "YYYY-MM-DD HH:mm:ss",
  434. "displayFormat": "MM-DD-YYYY HH:mm:ss",
  435. "hideTime" : false
  436. },
  437. "dateRanges":[
  438. {"name":"Last 7 days"},
  439. {"name":"Last 14 days"},
  440. {"name":"This month"},
  441. {"name":"Last month"},
  442. {"name":"Last year"}
  443. ]
  444. },
  445. {
  446. "name":"Units",
  447. "path":"Units",
  448. "type":"string",
  449. "editable":true,
  450. "required":true,
  451. "frozen":false,
  452. "id":"Units[string]",
  453. "renderer":"px-data-grid-string-renderer"
  454. },
  455. {
  456. "name":"Description",
  457. "path":"Description",
  458. "type":"string",
  459. "editable":true,
  460. "required":true,
  461. "frozen":false,
  462. "id":"Description[string]",
  463. "renderer":"px-data-grid-string-renderer"
  464. },
  465. {
  466. "name":"Asset",
  467. "path":"Asset",
  468. "type":"string",
  469. "editable":true,
  470. "required":true,
  471. "frozen":false,
  472. "renderer":"px-data-grid-string-renderer",
  473. "id":"Asset[string]"
  474. },
  475. {
  476. "name":"Domain",
  477. "path":"Domain",
  478. "type":"string",
  479. "editable":true,
  480. "required":true,
  481. "frozen":false,
  482. "renderer":"px-data-grid-string-renderer",
  483. "id":"Domain[string]"
  484.  
  485. },
  486. {
  487. "name":"Location",
  488. "path":"Location",
  489. "type":"string",
  490. "editable":false,
  491. "required":true,
  492. "frozen":false,
  493. "id":"Location[string]"
  494. },
  495. {
  496. "name":"Timezone",
  497. "path":"Timezone",
  498. "type":"string",
  499. "editable":true,
  500. "required":true,
  501. "frozen":false,
  502. "renderer":"px-data-grid-string-renderer",
  503. "id":"Timezone[string]"
  504. }
  505. ]'
  506. selection-mode="multi"
  507. default-column-width="180px"
  508. flex-to-size
  509. default-column-flex="0"
  510. filterable
  511. editable
  512. language="en"
  513. action-menu
  514. auto-height
  515. auto-filter
  516.  
  517. column-reordering-allowed
  518. table-actions='[{"name":"Export CSV","id":"CSV"}]'
  519. item-actions='[{"name":"Add Row","id":"add"},{"name":"Delete Row","id":"delete"}]'
  520. on-table-action="tableActionListener"
  521. page-size="5"
  522.  
  523. >
  524. </px-data-grid-paginated>
  525. </div>
  526. </template>
  527. </dom-bind>
  528. <script>
  529.  
  530. addEventListener('WebComponentsReady', function() {
  531. var template = document.getElementById('table');
  532. template.tableActionListener= function(evt) {
  533. window.alert('Table Action ' + evt.detail.id);
  534. console.log ("Table Action happening");
  535. if (evt.detail.id === 'CSV') {
  536. this.exportToCsv();
  537. }
  538. },
  539.  
  540. template.exportToCsv= function() {
  541. const grid = this.shadowRoot.getElementById('table');
  542. const data = grid.getData();
  543. const columns = grid._getVisibleColumns();
  544. let csvContent = 'data:text/csv;charset=utf-8,';
  545.  
  546. csvContent += columns.map((column) => grid._resolveColumnHeader(column)).join(',') + '\r\n';
  547. data.forEach((item) => {
  548. csvContent += Object.keys(item).map((key) => item[key]).join(',') + '\r\n';
  549. });
  550.  
  551. const encodedUri = encodeURI(csvContent);
  552. const link = document.createElement('a');
  553. link.setAttribute('href', encodedUri);
  554. link.setAttribute('download', 'table_data.csv');
  555. document.body.appendChild(link);
  556.  
  557. link.click();
  558.  
  559. }
  560. });
  561. </script>
  562.  
  563. </body>
  564. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!