• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html class="zg-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     .zg-html,
    10.     .zg-body {
    11.       height: 100%;
    12.       width: 100%;
    13.       margin: 0;
    14.       padding: 0;
    15.     }
    16.  
    17.     .zg-body a {
    18.       color: #04a3f5;
    19.     }
    20.  
    21.     zg-caption h1 {
    22.       color: #ffffff;
    23.       font-size: 2rem;
    24.     }
    25.  
    26.     zg-caption p {
    27.       font-size: 1rem;
    28.     }
    29.  
    30.     zg-head {
    31.       font-size: 1.3rem;
    32.     }
    33.  
    34.     .zg-menu-h2 {
    35.       margin: 23.904px 0px;
    36.     }
    37.  
    38.     .zg-menu-hr {
    39.       margin: 9.600px 175.256px;
    40.       border: 0.909px;
    41.     }
    42.  
    43.     zing-grid[loading] {
    44.       height: 711px;
    45.     }
    46.   </style>
    47. </head>
    48.  
    49. <body class="zg-body">
    50.   <zing-grid context-menu="mymenu">
    51.     <zg-caption>
    52.       <h1>Chargers Roster (Future) 2018</h1>
    53.       <p>Source: <a href="http://www.chargers.com/team/roster">http://www.chargers.com/team/roster</a></p>
    54.     </zg-caption>
    55.  
    56.     <zg-menu id="mymenu" replace>
    57.       <h2 class="zg-menu-h2">Wahoo! Custom Menu</h2>
    58.       <img src="https://storage.googleapis.com/zinggrid-pwa.appspot.com/la-chargers-logo.jpg">
    59.       <hr class="zg-menu-hr">
    60.       <a href="https://www.chargers.com/">Chargers Home Page</a>
    61.       <a href="https://www.chargers.com/team/players-roster/">Chargers Roster</a>
    62.       <hr class="zg-menu-hr">
    63.       <a href="https://www.zingchart.com">Return to ZingChart</a>
    64.       <hr class="zg-menu-hr">
    65.       <footer>Should have never left San Diego...</footer>
    66.     </zg-menu>
    67.  
    68.     <zg-colgroup>
    69.       <zg-column index="num" header="#"></zg-column>
    70.       <zg-column index="first, last" header="Player" renderer="renderPlayerName"></zg-column>
    71.       <zg-column index="col" header="College" renderer="renderCollegeName"></zg-column>
    72.       <zg-column index="feet, inch" header="Height" renderer="renderHeight"></zg-column>
    73.     </zg-colgroup>
    74.  
    75.     <zg-data data='[{
    76. 	      "num": "3",
    77. 	      "feet": "6", 
    78. 	      "inch": "0",
    79. 	      "first": "roberto", 
    80. 	      "last": "aguayo", 
    81. 	      "col": "florida state"
    82.       }, {
    83. 	      "num": "83", 
    84. 	      "feet": "6", 
    85. 	      "inch": "4",
    86. 	      "first": "braedon",
    87. 	      "last": "bowman", 
    88. 	      "col": "south alabama"
    89.       }, {
    90. 	      "num": "67", 
    91. 	      "feet": "6", 
    92. 	      "inch": "6",
    93. 	      "first": "brett",
    94. 	      "last": "boyko", 
    95. 	      "col": "nevada-las vegas"
    96.       }, {
    97. 	      "num": "45", 
    98. 	      "feet": "6", 
    99. 	      "inch": "0",
    100. 	      "first": "A.J",
    101. 	      "last": "hendy", 
    102. 	      "col": "Maryland"
    103.       }, {
    104. 	      "num": "N/A", 
    105. 	      "feet": "6", 
    106. 	      "inch": "2",
    107. 	      "first": "anthony",
    108. 	      "last": "kakwa", 
    109. 	      "col": "lake eric"
    110.       }, {
    111. 	      "num": "49", 
    112. 	      "feet": "6", 
    113. 	      "inch": "1",
    114. 	      "first": "james",
    115. 	      "last": "onwualu", 
    116. 	      "col": "notre dame"
    117.       }, {
    118. 	      "num": "88", 
    119. 	      "feet": "6", 
    120. 	      "inch": "3",
    121. 	      "first": "andre",
    122. 	      "last": "patton", 
    123. 	      "col": "rutgers"
    124.       }, {
    125. 	      "num": "27", 
    126. 	      "feet": "6", 
    127. 	      "inch": "2",
    128. 	      "first": "jeff",
    129. 	      "last": "richards", 
    130. 	      "col": "emporia state"
    131.       }, {
    132. 	      "num": "90", 
    133. 	      "feet": "6", 
    134. 	      "inch": "4",
    135. 	      "first": "whitney",
    136. 	      "last": "richardson", 
    137. 	      "col": "lane"
    138.       }, {
    139. 	      "num": "82", 
    140. 	      "feet": "5", 
    141. 	      "inch": "10",
    142. 	      "first": "artavis",
    143. 	      "last": "scott", 
    144. 	      "col": "clemson"
    145.       }, {
    146. 	      "num": "64", 
    147. 	      "feet": "6", 
    148. 	      "inch": "5",
    149. 	      "first": "cole",
    150. 	      "last": "toner", 
    151. 	      "col": "harvard"
    152.       }]'></zg-data>
    153.   </zing-grid>
    154.   <script>
    155.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    156.  
    157.     function renderPlayerName(first, last) {
    158.       return first.toUpperCase() + ' ' + last.toUpperCase();
    159.     }
    160.  
    161.     function renderCollegeName(col) {
    162.       return col.toUpperCase();
    163.     }
    164.  
    165.     function renderHeight(feet, inch) {
    166.       return feet + '\'' + inch + '\"';
    167.     }
    168.   </script>
    169. </body>
    170.  
    171. </html>
    1. <!DOCTYPE html>
    2. <html class="zg-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body class="zg-body">
    11.   <zing-grid context-menu="mymenu">
    12.     <zg-caption>
    13.       <h1>Chargers Roster (Future) 2018</h1>
    14.       <p>Source: <a href="http://www.chargers.com/team/roster">http://www.chargers.com/team/roster</a></p>
    15.     </zg-caption>
    16.  
    17.     <zg-menu id="mymenu" replace>
    18.       <h2 class="zg-menu-h2">Wahoo! Custom Menu</h2>
    19.       <img src="https://storage.googleapis.com/zinggrid-pwa.appspot.com/la-chargers-logo.jpg">
    20.       <hr class="zg-menu-hr">
    21.       <a href="https://www.chargers.com/">Chargers Home Page</a>
    22.       <a href="https://www.chargers.com/team/players-roster/">Chargers Roster</a>
    23.       <hr class="zg-menu-hr">
    24.       <a href="https://www.zingchart.com">Return to ZingChart</a>
    25.       <hr class="zg-menu-hr">
    26.       <footer>Should have never left San Diego...</footer>
    27.     </zg-menu>
    28.  
    29.     <zg-colgroup>
    30.       <zg-column index="num" header="#"></zg-column>
    31.       <zg-column index="first, last" header="Player" renderer="renderPlayerName"></zg-column>
    32.       <zg-column index="col" header="College" renderer="renderCollegeName"></zg-column>
    33.       <zg-column index="feet, inch" header="Height" renderer="renderHeight"></zg-column>
    34.     </zg-colgroup>
    35.  
    36.     <zg-data data='[{
    37. 	      "num": "3",
    38. 	      "feet": "6", 
    39. 	      "inch": "0",
    40. 	      "first": "roberto", 
    41. 	      "last": "aguayo", 
    42. 	      "col": "florida state"
    43.       }, {
    44. 	      "num": "83", 
    45. 	      "feet": "6", 
    46. 	      "inch": "4",
    47. 	      "first": "braedon",
    48. 	      "last": "bowman", 
    49. 	      "col": "south alabama"
    50.       }, {
    51. 	      "num": "67", 
    52. 	      "feet": "6", 
    53. 	      "inch": "6",
    54. 	      "first": "brett",
    55. 	      "last": "boyko", 
    56. 	      "col": "nevada-las vegas"
    57.       }, {
    58. 	      "num": "45", 
    59. 	      "feet": "6", 
    60. 	      "inch": "0",
    61. 	      "first": "A.J",
    62. 	      "last": "hendy", 
    63. 	      "col": "Maryland"
    64.       }, {
    65. 	      "num": "N/A", 
    66. 	      "feet": "6", 
    67. 	      "inch": "2",
    68. 	      "first": "anthony",
    69. 	      "last": "kakwa", 
    70. 	      "col": "lake eric"
    71.       }, {
    72. 	      "num": "49", 
    73. 	      "feet": "6", 
    74. 	      "inch": "1",
    75. 	      "first": "james",
    76. 	      "last": "onwualu", 
    77. 	      "col": "notre dame"
    78.       }, {
    79. 	      "num": "88", 
    80. 	      "feet": "6", 
    81. 	      "inch": "3",
    82. 	      "first": "andre",
    83. 	      "last": "patton", 
    84. 	      "col": "rutgers"
    85.       }, {
    86. 	      "num": "27", 
    87. 	      "feet": "6", 
    88. 	      "inch": "2",
    89. 	      "first": "jeff",
    90. 	      "last": "richards", 
    91. 	      "col": "emporia state"
    92.       }, {
    93. 	      "num": "90", 
    94. 	      "feet": "6", 
    95. 	      "inch": "4",
    96. 	      "first": "whitney",
    97. 	      "last": "richardson", 
    98. 	      "col": "lane"
    99.       }, {
    100. 	      "num": "82", 
    101. 	      "feet": "5", 
    102. 	      "inch": "10",
    103. 	      "first": "artavis",
    104. 	      "last": "scott", 
    105. 	      "col": "clemson"
    106.       }, {
    107. 	      "num": "64", 
    108. 	      "feet": "6", 
    109. 	      "inch": "5",
    110. 	      "first": "cole",
    111. 	      "last": "toner", 
    112. 	      "col": "harvard"
    113.       }]'></zg-data>
    114.   </zing-grid>
    115. </body>
    116.  
    117. </html>
    1. .zg-html,
    2. .zg-body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. .zg-body a {
    10.   color: #04a3f5;
    11. }
    12.  
    13. zg-caption h1 {
    14.   color: #ffffff;
    15.   font-size: 2rem;
    16. }
    17.  
    18. zg-caption p {
    19.   font-size: 1rem;
    20. }
    21.  
    22. zg-head {
    23.   font-size: 1.3rem;
    24. }
    25.  
    26. .zg-menu-h2 {
    27.   margin: 23.904px 0px;
    28. }
    29.  
    30. .zg-menu-hr {
    31.   margin: 9.600px 175.256px;
    32.   border: 0.909px;
    33. }
    1. function renderPlayerName(first, last) {
    2.   return first.toUpperCase() + ' ' + last.toUpperCase();
    3. }
    4.  
    5. function renderCollegeName(col) {
    6.   return col.toUpperCase();
    7. }
    8.  
    9. function renderHeight(feet, inch) {
    10.   return feet + '\'' + inch + '\"';
    11. }