API tools faq
paste
Guest User

Untitled

a guest
Feb 19th, 2018
63
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.01 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":false,
  142. "required":true,
  143. "frozen":false,
  144. "id":"Asset[string]"
  145. },
  146. {
  147. "name":"Domain",
  148. "path":"Domain",
  149. "type":"string",
  150. "editable":false,
  151. "required":true,
  152. "frozen":false,
  153. "id":"Domain[string]"
  154. },
  155. {
  156. "name":"Location",
  157. "path":"Location",
  158. "type":"string",
  159. "editable":false,
  160. "required":true,
  161. "frozen":false,
  162. "id":"Location[string]"
  163. },
  164. {
  165. "name":"Timezone",
  166. "path":"Timezone",
  167. "type":"string",
  168. "editable":true,
  169. "required":true,
  170. "frozen":false,
  171. "id":"Timezone[string]"
  172. }
  173. ]'
  174. selection-mode="multi"
  175. default-column-width="180px"
  176. default-column-flex="0"
  177. offer-filter-saving
  178. filterable
  179. editable
  180. compact-advanced-filter-dialog
  181. language="en"
  182. action-menu
  183. item-actions='[{"name":"Add Row","id":"add"},{"name":"Delete Row","id":"delete"}]'
  184. allow-sort-by-selection
  185. column-reordering-allowed
  186. flex-to-size
  187.  
  188. auto-filter
  189. table-actions='[{"name":"Export CSV","id":"CSV"}]'
  190. >
  191. </px-data-grid>
  192. </div>
  193.  
  194. <div style="height:850px; width:800px">
  195. <h2>Filterable Paginated </h2>
  196.  
  197. <px-data-grid-paginated
  198. table-data='[
  199. {
  200. "Tag Name coz we like really long names ": "Tag_Temperature_With_Data_15",
  201. "Correlated Tags": "15",
  202. "Units": "celsius",
  203. "Description": "This is AViD Tag Temperature Type description in celsius",
  204. "Asset": "Tag_Temperature_With_Data_15 GE_SAN_RAMON_1111111",
  205. "Domain": "GE_SanRamon1111",
  206. "Location" : "North America",
  207. "Timezone" :"PST"
  208. },
  209. {
  210. "Tag Name coz we like really long names ": "Tag_Temperature_With_Data_15",
  211. "Correlated Tags": "15",
  212. "Units": "Some fancy temperature units",
  213. "Description": "This is a test for grouping data",
  214. "Asset": "Tag_Temperature_With_Data_15 GE_SAN_RAMON_1111111",
  215. "Domain": "GE_SanRamon1111",
  216. "Location" : "North America",
  217. "Timezone" :"PST"
  218. },
  219. {
  220. "Tag Name coz we like really long names ": "Tag_Temperature_With_Data_14",
  221. "Correlated Tags": "14",
  222. "Units": "Fahrenheit",
  223. "Description": "This is AViD Tag Temperature Type description in celsius",
  224. "Asset": "Tag_Temperature_With_Data_14 GE_SAN_RAMON_1111111",
  225. "Domain": "GE_Brazil_1111",
  226. "Location" : "South America",
  227. "Timezone" :"PST"
  228. },
  229. {
  230. "Tag Name coz we like really long names ": "Tag_Temperature_With_Data_19",
  231. "Correlated Tags": "19",
  232. "Units": "celsius",
  233. "Description": "This is AViD Tag Temperature Type description in celsius",
  234. "Asset": "Tag_Temperature_With_Data_19 GE_SAN_RAMON_1111111",
  235. "Domain": "GE_Chile_1111",
  236. "Location" : "South America",
  237. "Timezone" :"PST"
  238. },
  239. {
  240. "Tag Name coz we like really long names ": "Tag_pressure_With_Data_48",
  241. "Correlated Tags": "48",
  242. "Units": "at",
  243. "Description": "This is AViD Tag pressure2 Type description in celsius",
  244. "Asset": "Tag_pressure_With_Data_48 GE_SAN_RAMON_1111111",
  245. "Domain": "GE_Brazil_1111",
  246. "Location" : "South America",
  247. "Timezone" :"PST"
  248. },
  249. {
  250. "Tag Name coz we like really long names ": "Tag_Temperature_With_Data_05",
  251. "Correlated Tags": "05",
  252. "Units": "Celsius",
  253. "Description": ".../unit15/This is AViD Tag Temperature Type description",
  254. "Asset": "Tag_Temperature_With_Data_05 GEffSAN_RAMON_1111111",
  255. "Domain": "GE_Dubai_1145",
  256. "Location" : "Asia",
  257. "Timezone" :"PST"
  258. }
  259. ]'
  260. columns='[
  261. {
  262. "name":"Tag Name coz we like really long names",
  263. "path":"Tag Name coz we like really long names",
  264. "hidden":true,
  265. "editable":false,
  266. "frozen":true,
  267. "id":"Tag Name coz we like really long names[string]"
  268. },
  269. {
  270. "name":"Correlated_Tag_Data",
  271. "path":"Correlated Tags",
  272. "hidden":false,
  273. "editable":true,
  274. "frozen":false,
  275. "id":"Correlated Tags[number]",
  276. "renderer":"px-data-grid-number-renderer"
  277. },
  278. {
  279. "name":"Units",
  280. "path":"Units",
  281. "type":"string",
  282. "editable":true,
  283. "required":true,
  284. "frozen":false,
  285. "id":"Units[string]",
  286. "renderer":"px-data-grid-string-renderer"
  287. },
  288. {
  289. "name":"Description",
  290. "path":"Description",
  291. "type":"string",
  292. "editable":false,
  293. "required":true,
  294. "frozen":false,
  295. "id":"Description[string]"
  296. },
  297. {
  298. "name":"Asset",
  299. "path":"Asset",
  300. "type":"string",
  301. "editable":false,
  302. "required":true,
  303. "frozen":false,
  304. "id":"Asset[string]"
  305. },
  306. {
  307. "name":"Domain",
  308. "path":"Domain",
  309. "type":"string",
  310. "editable":false,
  311. "required":true,
  312. "frozen":false,
  313. "id":"Domain[string]"
  314. },
  315. {
  316. "name":"Location",
  317. "path":"Location",
  318. "type":"string",
  319. "editable":false,
  320. "required":true,
  321. "frozen":false,
  322. "id":"Location[string]"
  323. },
  324. {
  325. "name":"Timezone",
  326. "path":"Timezone",
  327. "type":"string",
  328. "editable":true,
  329. "required":true,
  330. "frozen":false,
  331. "id":"Timezone[string]"
  332. }
  333. ]'
  334. selection-mode="multi"
  335. default-column-width="150px"
  336. default-column-flex="0"
  337. filterable
  338. editable
  339. language="en"
  340. action-menu
  341. auto-height
  342. auto-filter
  343. column-reordering-allowed
  344. table-actions='[{"name":"Export CSV","id":"CSV"}]'
  345. on-table-action="tableActionListener"
  346. page-size="5"
  347. >
  348. </px-data-grid-paginated>
  349. </div>
  350. </template>
  351. </dom-bind>
  352. <script>
  353.  
  354. addEventListener('WebComponentsReady', function() {
  355. var template = document.getElementById('table');
  356. template.tableActionListener= function(evt) {
  357. window.alert('Table Action ' + evt.detail.id);
  358. console.log ("Table Action happening");
  359. if (evt.detail.id === 'CSV') {
  360. this.exportToCsv();
  361. }
  362. },
  363.  
  364. template.exportToCsv= function() {
  365. const grid = this.shadowRoot.getElementById('table');
  366. const data = grid.getData();
  367. const columns = grid._getVisibleColumns();
  368. let csvContent = 'data:text/csv;charset=utf-8,';
  369.  
  370. csvContent += columns.map((column) => grid._resolveColumnHeader(column)).join(',') + '\r\n';
  371. data.forEach((item) => {
  372. csvContent += Object.keys(item).map((key) => item[key]).join(',') + '\r\n';
  373. });
  374.  
  375. const encodedUri = encodeURI(csvContent);
  376. const link = document.createElement('a');
  377. link.setAttribute('href', encodedUri);
  378. link.setAttribute('download', 'table_data.csv');
  379. document.body.appendChild(link);
  380.  
  381. link.click();
  382.  
  383. }
  384. });
  385. </script>
  386.  
  387. </body>
  388. </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!