API tools faq
paste
Guest User

Untitled

a guest
Feb 24th, 2018
114
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.49 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",
  45. "Install Date" : "1986-02-10",
  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",
  58. "Install Date" : "1987-03-25",
  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",
  71. "Install Date" : "1985-06-16",
  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",
  84. "Install Date" : "1987-09-11",
  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",
  97. "Install Date" : "1987-05-13",
  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",
  110. "Install Date" : "1995-12-25",
  111. "Asset": "Tag_Temperature_With_Data_05 GEffSAN_RAMON_1111111",
  112. "Domain": "GE_Dubai_1145",
  113. "Location" : "Asia",
  114. "Timezone" :"PST"
  115. }
  116. ]'
  117. columns='[
  118. {
  119. "name":"Tag Name coz we like really long names",
  120. "path":"Tag Name coz we like really long names",
  121. "hidden":false,
  122. "editable":false,
  123. "frozen":false,
  124. "id":"Tag Name coz we like really long names[string]"
  125. },
  126. {
  127. "name":"Correlated_Tag_Data",
  128. "type": "number",
  129. "path":"Correlated Tags",
  130. "hidden":false,
  131. "editable":true,
  132. "frozen":false,
  133. "id":"Correlated Tags[number]",
  134. "renderer":"px-data-grid-number-renderer",
  135. "minBound" : 10,
  136. "maxBound" : 150
  137. },
  138. {
  139. "name":"Temp",
  140. "type": "number",
  141. "path":"Temp",
  142. "hidden":false,
  143. "editable":true,
  144. "frozen":false,
  145. "id":"Temp[number]",
  146. "renderer":"px-data-grid-number-renderer"
  147. },
  148. {
  149. "name":"Maintenance Date",
  150. "type": "date",
  151. "path":"Maintenance Date",
  152. "hidden":false,
  153. "editable":true,
  154. "frozen":false,
  155. "id":"Maintenance Date[date]",
  156. "renderer":"px-data-grid-date-renderer"
  157. },
  158. {
  159. "name":"Install Date",
  160. "type": "date",
  161. "path":"Install Date",
  162. "hidden":false,
  163. "editable":true,
  164. "frozen":false,
  165. "id":"Install Date[date]",
  166. "renderer":"px-data-grid-date-renderer",
  167. "dateRanges":[
  168. {"name":"Last 7 days"},
  169. {"name":"Last 14 days"},
  170. {"name":"This month"},
  171. {"name":"Last month"},
  172. {"name":"Last year"}
  173. ]
  174. },
  175. {
  176. "name":"Units",
  177. "path":"Units",
  178. "type":"string",
  179. "editable":true,
  180. "required":true,
  181. "frozen":false,
  182. "id":"Units[string]",
  183. "renderer":"px-data-grid-string-renderer"
  184. },
  185. {
  186. "name":"Description",
  187. "path":"Description",
  188. "type":"string",
  189. "editable":true,
  190. "required":true,
  191. "frozen":false,
  192. "id":"Description[string]",
  193. "renderer":"px-data-grid-string-renderer"
  194. },
  195. {
  196. "name":"Asset",
  197. "path":"Asset",
  198. "type":"string",
  199. "editable":true,
  200. "required":true,
  201. "frozen":false,
  202. "renderer":"px-data-grid-string-renderer",
  203. "id":"Asset[string]"
  204. },
  205. {
  206. "name":"Domain",
  207. "path":"Domain",
  208. "type":"string",
  209. "editable":true,
  210. "required":true,
  211. "frozen":false,
  212. "renderer":"px-data-grid-string-renderer",
  213. "id":"Domain[string]"
  214.  
  215. },
  216. {
  217. "name":"Location",
  218. "path":"Location",
  219. "type":"string",
  220. "editable":false,
  221. "required":true,
  222. "frozen":false,
  223. "id":"Location[string]"
  224. },
  225. {
  226. "name":"Timezone",
  227. "path":"Timezone",
  228. "type":"string",
  229. "editable":true,
  230. "required":true,
  231. "frozen":false,
  232. "renderer":"px-data-grid-string-renderer",
  233. "id":"Timezone[string]"
  234. }
  235. ]'
  236. selection-mode="multi"
  237. default-column-width="180px"
  238. default-column-flex="0"
  239. offer-filter-saving
  240. filterable
  241.  
  242. editable
  243. language="en"
  244.  
  245. item-actions='[{"name":"Add Row","id":"add"},{"name":"Delete Row","id":"delete"}]'
  246. allow-sort-by-selection
  247. column-reordering-allowed
  248.  
  249. auto-filter
  250. table-actions='[{"name":"Export CSV","id":"CSV"}]'
  251. >
  252. </px-data-grid>
  253. </div>
  254.  
  255. <div style="height:850px; width:850px">
  256. <h2>Filterable Paginated </h2>
  257. <px-data-grid-paginated
  258. table-data='[
  259. {
  260. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_15",
  261. "Correlated Tags": "15",
  262. "Temp" :"37.5",
  263. "Units": "celsius",
  264. "Description": "This is a test for filtering data in celsius",
  265. "Maintenance Date": "04-12-1985",
  266. "Asset": "Tag_Temperature_With_Data_15 GE_SAN_RAMON_1111111",
  267. "Domain": "GE_SanRamon1100",
  268. "Location" : "North America",
  269. "Timezone" :"PST"
  270. },
  271. {
  272. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_15",
  273. "Correlated Tags": "15",
  274. "Temp" :"10.23",
  275. "Units": "Some fancy temperature units",
  276. "Description": "This is a test for filtering data",
  277. "Maintenance Date": "04-12-1985",
  278. "Asset": "Tag_Temperature_With_Data_15 GE_SAN_RAMON_1111111",
  279. "Domain": "GE_SanRamon1100",
  280. "Location" : "North America",
  281. "Timezone" :"PST"
  282. },
  283. {
  284. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_14",
  285. "Correlated Tags": "14",
  286. "Units": "Fahrenheit",
  287. "Temp" :"7654.111",
  288. "Description": "This is a test for filtering data in fahrenheit not in celsius",
  289. "Maintenance Date": "04-12-1985",
  290. "Asset": "Tag_Temperature_With_Data_14 GE_SAN_RAMON_1111111",
  291. "Domain": "GE_Brazil_1100",
  292. "Location" : "South America",
  293. "Timezone" :"PST"
  294. },
  295. {
  296. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_19",
  297. "Correlated Tags": "19",
  298. "Units": "celsius",
  299. "Temp" :"6",
  300. "Description": "This is AViD Tag Temperature Type description in celsius",
  301. "Maintenance Date": "10-12-1994",
  302. "Asset": "Tag_Temperature_With_Data_19 GE_SAN_RAMON_1111111",
  303. "Domain": "GE_Chile_1111",
  304. "Location" : "South America",
  305. "Timezone" :"PST"
  306. },
  307. {
  308. "Tag Name coz we like really long names": "Tag_pressure_With_Data_48",
  309. "Correlated Tags": "48",
  310. "Units": "at",
  311. "Temp" :"1210.2234",
  312. "Description": "This is AViD Tag pressure2 Type description in celsius",
  313. "Maintenance Date": "1995-11-13",
  314. "Asset": "Tag_pressure_With_Data_48 GE_SAN_RAMON_1111111",
  315. "Domain": "GE_Brazil_1111",
  316. "Location" : "South America",
  317. "Timezone" :"PST"
  318. },
  319. {
  320. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_05",
  321. "Correlated Tags": "05",
  322. "Units": "Celsius",
  323. "Temp" :"98.33233",
  324. "Description": ".../unit15/This is AViD Tag Temperature Type description",
  325. "Maintenance Date": "1996-12-12",
  326. "Asset": "Tag_Temperature_With_Data_05 GEffSAN_RAMON_1111111",
  327. "Domain": "GE_Dubai_1145",
  328. "Location" : "Asia",
  329. "Timezone" :"PST"
  330. }
  331. ]'
  332. columns='[
  333. {
  334. "name":"Tag Name coz we like really long names",
  335. "path":"Tag Name coz we like really long names",
  336. "hidden":false,
  337. "editable":false,
  338. "frozen":false,
  339. "id":"Tag Name coz we like really long names[string]"
  340. },
  341. {
  342. "name":"Correlated_Tag_Data",
  343. "type": "number",
  344. "path":"Correlated Tags",
  345. "hidden":false,
  346. "editable":true,
  347. "frozen":false,
  348. "id":"Correlated Tags[number]",
  349. "renderer":"px-data-grid-number-renderer",
  350. "minBound" : 10,
  351. "maxBound" : 150
  352. },
  353. {
  354. "name":"Temp",
  355. "type": "number",
  356. "path":"Temp",
  357. "hidden":false,
  358. "editable":true,
  359. "frozen":false,
  360. "id":"Temp[number]",
  361. "renderer":"px-data-grid-number-renderer"
  362. },
  363. {
  364. "name":"Maintenance Date",
  365. "type": "date",
  366. "path":"Maintenance Date",
  367. "hidden":false,
  368. "editable":true,
  369. "frozen":false,
  370. "id":"Maintenance Date[date]",
  371. "renderer":"px-data-grid-date-renderer"
  372. },
  373. {
  374. "name":"Units",
  375. "path":"Units",
  376. "type":"string",
  377. "editable":true,
  378. "required":true,
  379. "frozen":false,
  380. "id":"Units[string]",
  381. "renderer":"px-data-grid-string-renderer"
  382. },
  383. {
  384. "name":"Description",
  385. "path":"Description",
  386. "type":"string",
  387. "editable":true,
  388. "required":true,
  389. "frozen":false,
  390. "id":"Description[string]",
  391. "renderer":"px-data-grid-string-renderer"
  392. },
  393. {
  394. "name":"Asset",
  395. "path":"Asset",
  396. "type":"string",
  397. "editable":true,
  398. "required":true,
  399. "frozen":false,
  400. "renderer":"px-data-grid-string-renderer",
  401. "id":"Asset[string]"
  402. },
  403. {
  404. "name":"Domain",
  405. "path":"Domain",
  406. "type":"string",
  407. "editable":true,
  408. "required":true,
  409. "frozen":false,
  410. "renderer":"px-data-grid-string-renderer",
  411. "id":"Domain[string]"
  412.  
  413. },
  414. {
  415. "name":"Location",
  416. "path":"Location",
  417. "type":"string",
  418. "editable":false,
  419. "required":true,
  420. "frozen":false,
  421. "id":"Location[string]"
  422. },
  423. {
  424. "name":"Timezone",
  425. "path":"Timezone",
  426. "type":"string",
  427. "editable":true,
  428. "required":true,
  429. "frozen":false,
  430. "renderer":"px-data-grid-string-renderer",
  431. "id":"Timezone[string]"
  432. }
  433. ]'
  434. selection-mode="multi"
  435. default-column-width="180px"
  436. flex-to-size
  437. default-column-flex="0"
  438. filterable
  439. editable
  440. language="en"
  441. action-menu
  442. auto-height
  443. auto-filter
  444.  
  445. column-reordering-allowed
  446. table-actions='[{"name":"Export CSV","id":"CSV"}]'
  447. item-actions='[{"name":"Add Row","id":"add"},{"name":"Delete Row","id":"delete"}]'
  448. on-table-action="tableActionListener"
  449. page-size="5"
  450.  
  451. >
  452. </px-data-grid-paginated>
  453. </div>
  454. </template>
  455. </dom-bind>
  456. <script>
  457.  
  458. addEventListener('WebComponentsReady', function() {
  459. var template = document.getElementById('table');
  460. template.tableActionListener= function(evt) {
  461. window.alert('Table Action ' + evt.detail.id);
  462. console.log ("Table Action happening");
  463. if (evt.detail.id === 'CSV') {
  464. this.exportToCsv();
  465. }
  466. },
  467.  
  468. template.exportToCsv= function() {
  469. const grid = this.shadowRoot.getElementById('table');
  470. const data = grid.getData();
  471. const columns = grid._getVisibleColumns();
  472. let csvContent = 'data:text/csv;charset=utf-8,';
  473.  
  474. csvContent += columns.map((column) => grid._resolveColumnHeader(column)).join(',') + '\r\n';
  475. data.forEach((item) => {
  476. csvContent += Object.keys(item).map((key) => item[key]).join(',') + '\r\n';
  477. });
  478.  
  479. const encodedUri = encodeURI(csvContent);
  480. const link = document.createElement('a');
  481. link.setAttribute('href', encodedUri);
  482. link.setAttribute('download', 'table_data.csv');
  483. document.body.appendChild(link);
  484.  
  485. link.click();
  486.  
  487. }
  488. });
  489. </script>
  490.  
  491. </body>
  492. </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!