API tools faq
paste
Guest User

Untitled

a guest
Feb 20th, 2018
87
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.13 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 style="height:550px; width:1100px">
  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. "Units": "celsius",
  42. "Description": "This is a test for filtering data in celsius",
  43. "Asset": "Tag_Temperature_With_Data_15 GE_SAN_RAMON_1111111",
  44. "Domain": "GE_SanRamon1100",
  45. "Location" : "North America",
  46. "Timezone" :"PST"
  47. },
  48. {
  49. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_15",
  50. "Correlated Tags": "15",
  51. "Units": "Some fancy temperature units",
  52. "Description": "This is a test for filtering data",
  53. "Asset": "Tag_Temperature_With_Data_15 GE_SAN_RAMON_1111111",
  54. "Domain": "GE_SanRamon1100",
  55. "Location" : "North America",
  56. "Timezone" :"PST"
  57. },
  58. {
  59. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_14",
  60. "Correlated Tags": "14",
  61. "Units": "Fahrenheit",
  62. "Description": "This is a test for filtering data in fahrenheit not in celsius",
  63. "Asset": "Tag_Temperature_With_Data_14 GE_SAN_RAMON_1111111",
  64. "Domain": "GE_Brazil_1100",
  65. "Location" : "South America",
  66. "Timezone" :"PST"
  67. },
  68. {
  69. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_19",
  70. "Correlated Tags": "19",
  71. "Units": "celsius",
  72. "Description": "This is AViD Tag Temperature Type description in celsius",
  73. "Asset": "Tag_Temperature_With_Data_19 GE_SAN_RAMON_1111111",
  74. "Domain": "GE_Chile_1111",
  75. "Location" : "South America",
  76. "Timezone" :"PST"
  77. },
  78. {
  79. "Tag Name coz we like really long names": "Tag_pressure_With_Data_48",
  80. "Correlated Tags": "48",
  81. "Units": "at",
  82. "Description": "This is AViD Tag pressure2 Type description in celsius",
  83. "Asset": "Tag_pressure_With_Data_48 GE_SAN_RAMON_1111111",
  84. "Domain": "GE_Brazil_1111",
  85. "Location" : "South America",
  86. "Timezone" :"PST"
  87. },
  88. {
  89. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_05",
  90. "Correlated Tags": "05",
  91. "Units": "Celsius",
  92. "Description": ".../unit15/This is AViD Tag Temperature Type description",
  93. "Asset": "Tag_Temperature_With_Data_05 GEffSAN_RAMON_1111111",
  94. "Domain": "GE_Dubai_1145",
  95. "Location" : "Asia",
  96. "Timezone" :"PST"
  97. }
  98. ]'
  99. columns='[
  100. {
  101. "name":"Tag Name coz we like really long names",
  102. "path":"Tag Name coz we like really long names",
  103. "hidden":false,
  104. "editable":false,
  105. "frozen":false,
  106. "id":"Tag Name coz we like really long names[string]"
  107. },
  108. {
  109. "name":"Correlated_Tag_Data",
  110. "path":"Correlated Tags",
  111. "hidden":false,
  112. "editable":true,
  113. "frozen":false,
  114. "id":"Correlated Tags[number]",
  115. "renderer":"px-data-grid-number-renderer"
  116. },
  117. {
  118. "name":"Units",
  119. "path":"Units",
  120. "type":"string",
  121. "editable":true,
  122. "required":true,
  123. "frozen":false,
  124. "id":"Units[string]",
  125. "renderer":"px-data-grid-string-renderer"
  126. },
  127. {
  128. "name":"Description",
  129. "path":"Description",
  130. "type":"string",
  131. "editable":true,
  132. "required":true,
  133. "frozen":false,
  134. "id":"Description[string]",
  135. "renderer":"px-data-grid-string-renderer"
  136. },
  137. {
  138. "name":"Asset",
  139. "path":"Asset",
  140. "type":"string",
  141. "editable":true,
  142. "required":true,
  143. "frozen":false,
  144. "renderer":"px-data-grid-string-renderer",
  145. "id":"Asset[string]"
  146. },
  147. {
  148. "name":"Domain",
  149. "path":"Domain",
  150. "type":"string",
  151. "editable":true,
  152. "required":true,
  153. "frozen":false,
  154. "renderer":"px-data-grid-string-renderer",
  155. "id":"Domain[string]"
  156.  
  157. },
  158. {
  159. "name":"Location",
  160. "path":"Location",
  161. "type":"string",
  162. "editable":false,
  163. "required":true,
  164. "frozen":false,
  165. "id":"Location[string]"
  166. },
  167. {
  168. "name":"Timezone",
  169. "path":"Timezone",
  170. "type":"string",
  171. "editable":true,
  172. "required":true,
  173. "frozen":false,
  174. "renderer":"px-data-grid-string-renderer",
  175. "id":"Timezone[string]"
  176. }
  177. ]'
  178. selection-mode="multi"
  179. default-column-width="180px"
  180. default-column-flex="0"
  181. offer-filter-saving
  182. filterable
  183.  
  184.  
  185. editable
  186. language="en"
  187. action-menu
  188. item-actions='[{"name":"Add Row","id":"add"},{"name":"Delete Row","id":"delete"}]'
  189. allow-sort-by-selection
  190. column-reordering-allowed
  191. flex-to-size
  192.  
  193. auto-filter
  194. table-actions='[{"name":"Export CSV","id":"CSV"}]'
  195. >
  196. </px-data-grid>
  197. </div>
  198.  
  199. <div style="height:850px; width:900px">
  200. <h2>Filterable Paginated </h2>
  201.  
  202. <px-data-grid-paginated
  203. table-data='[
  204. {
  205. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_15",
  206. "Correlated Tags": "15",
  207. "Units": "celsius",
  208. "Description": "This is a test for filtering data in celsius",
  209. "Asset": "Tag_Temperature_With_Data_15 GE_SAN_RAMON_1111111",
  210. "Domain": "GE_SanRamon1100",
  211. "Location" : "North America",
  212. "Timezone" :"PST"
  213. },
  214. {
  215. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_15",
  216. "Correlated Tags": "15",
  217. "Units": "Some fancy temperature units",
  218. "Description": "This is a test for filtering data",
  219. "Asset": "Tag_Temperature_With_Data_15 GE_SAN_RAMON_1111111",
  220. "Domain": "GE_SanRamon1100",
  221. "Location" : "North America",
  222. "Timezone" :"PST"
  223. },
  224. {
  225. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_14",
  226. "Correlated Tags": "14",
  227. "Units": "Fahrenheit",
  228. "Description": "This is a test for filtering data in fahrenheit not in celsius",
  229. "Asset": "Tag_Temperature_With_Data_14 GE_SAN_RAMON_1111111",
  230. "Domain": "GE_Brazil_1100",
  231. "Location" : "South America",
  232. "Timezone" :"PST"
  233. },
  234. {
  235. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_19",
  236. "Correlated Tags": "19",
  237. "Units": "celsius",
  238. "Description": "This is AViD Tag Temperature Type description in celsius",
  239. "Asset": "Tag_Temperature_With_Data_19 GE_SAN_RAMON_1111111",
  240. "Domain": "GE_Chile_1111",
  241. "Location" : "South America",
  242. "Timezone" :"PST"
  243. },
  244. {
  245. "Tag Name coz we like really long names": "Tag_pressure_With_Data_48",
  246. "Correlated Tags": "48",
  247. "Units": "at",
  248. "Description": "This is AViD Tag pressure2 Type description in celsius",
  249. "Asset": "Tag_pressure_With_Data_48 GE_SAN_RAMON_1111111",
  250. "Domain": "GE_Brazil_1111",
  251. "Location" : "South America",
  252. "Timezone" :"PST"
  253. },
  254. {
  255. "Tag Name coz we like really long names": "Tag_Temperature_With_Data_05",
  256. "Correlated Tags": "05",
  257. "Units": "Celsius",
  258. "Description": ".../unit15/This is AViD Tag Temperature Type description",
  259. "Asset": "Tag_Temperature_With_Data_05 GEffSAN_RAMON_1111111",
  260. "Domain": "GE_Dubai_1145",
  261. "Location" : "Asia",
  262. "Timezone" :"PST"
  263. }
  264. ]'
  265. columns='[
  266. {
  267. "name":"Tag Name coz we like really long names",
  268. "path":"Tag Name coz we like really long names",
  269. "hidden":false,
  270. "editable":false,
  271. "frozen":false,
  272. "id":"Tag Name coz we like really long names[string]"
  273. },
  274. {
  275. "name":"Correlated_Tag_Data",
  276. "path":"Correlated Tags",
  277. "hidden":false,
  278. "editable":true,
  279. "frozen":false,
  280. "id":"Correlated Tags[number]",
  281. "renderer":"px-data-grid-number-renderer"
  282. },
  283. {
  284. "name":"Units",
  285. "path":"Units",
  286. "type":"string",
  287. "editable":true,
  288. "required":true,
  289. "frozen":false,
  290. "id":"Units[string]",
  291. "renderer":"px-data-grid-string-renderer"
  292. },
  293. {
  294. "name":"Description",
  295. "path":"Description",
  296. "type":"string",
  297. "editable":true,
  298. "required":true,
  299. "frozen":false,
  300. "id":"Description[string]",
  301. "renderer":"px-data-grid-string-renderer"
  302. },
  303. {
  304. "name":"Asset",
  305. "path":"Asset",
  306. "type":"string",
  307. "editable":false,
  308. "required":true,
  309. "frozen":false,
  310. "id":"Asset[string]"
  311. },
  312. {
  313. "name":"Domain",
  314. "path":"Domain",
  315. "type":"string",
  316. "editable":false,
  317. "required":true,
  318. "frozen":false,
  319. "id":"Domain[string]"
  320. },
  321. {
  322. "name":"Location",
  323. "path":"Location",
  324. "type":"string",
  325. "editable":false,
  326. "required":true,
  327. "frozen":false,
  328. "id":"Location[string]"
  329. },
  330. {
  331. "name":"Timezone",
  332. "path":"Timezone",
  333. "type":"string",
  334. "editable":true,
  335. "required":true,
  336. "frozen":false,
  337. "id":"Timezone[string]"
  338. }
  339. ]'
  340. selection-mode="multi"
  341.  
  342. default-column-flex="0"
  343. filterable
  344. editable
  345. language="en"
  346. action-menu
  347. auto-height
  348. auto-filter
  349. column-reordering-allowed
  350. table-actions='[{"name":"Export CSV","id":"CSV"}]'
  351. on-table-action="tableActionListener"
  352. page-size="5"
  353. >
  354. </px-data-grid-paginated>
  355. </div>
  356. </template>
  357. </dom-bind>
  358. <script>
  359.  
  360. addEventListener('WebComponentsReady', function() {
  361. var template = document.getElementById('table');
  362. template.tableActionListener= function(evt) {
  363. window.alert('Table Action ' + evt.detail.id);
  364. console.log ("Table Action happening");
  365. if (evt.detail.id === 'CSV') {
  366. this.exportToCsv();
  367. }
  368. },
  369.  
  370. template.exportToCsv= function() {
  371. const grid = this.shadowRoot.getElementById('table');
  372. const data = grid.getData();
  373. const columns = grid._getVisibleColumns();
  374. let csvContent = 'data:text/csv;charset=utf-8,';
  375.  
  376. csvContent += columns.map((column) => grid._resolveColumnHeader(column)).join(',') + '\r\n';
  377. data.forEach((item) => {
  378. csvContent += Object.keys(item).map((key) => item[key]).join(',') + '\r\n';
  379. });
  380.  
  381. const encodedUri = encodeURI(csvContent);
  382. const link = document.createElement('a');
  383. link.setAttribute('href', encodedUri);
  384. link.setAttribute('download', 'table_data.csv');
  385. document.body.appendChild(link);
  386.  
  387. link.click();
  388.  
  389. }
  390. });
  391. </script>
  392.  
  393. </body>
  394. </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!