• 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-body {
    10. background: #fff;
    11. }
    12.  
    13. zing-grid[loading] {
    14. height: 500px;
    15. }
    16.  
    17. /** Expandable Row Trigger **/
    18. .zg-body .arrow {
    19. display: inline-block;
    20. transform: rotate(90deg);
    21. transform-origin: 0% 0%;
    22. cursor: pointer;
    23. font-size: 1.5rem;
    24. position: relative;
    25. left: 2.5rem;
    26. top: 0.25rem;
    27. }
    28.  
    29. .zg-body .active .arrow {
    30. transform: rotate(180deg);
    31. left: 2.5rem;
    32. top: 1.5rem;
    33. }
    34.  
    35. /** Expandable Row Header **/
    36. .zg-body .header {
    37. display: flex;
    38. align-items: center;
    39. }
    40.  
    41. .zg-body .team--info {
    42. margin-left: 2.5rem;
    43. }
    44.  
    45. /** Expandable Row CSS **/
    46. .zg-body .default {
    47. border-bottom: 1px solid #ebebeb;
    48. }
    49.  
    50. .zg-body zg-row:hover {
    51. cursor: pointer;
    52. background-color: #f5f7fa;
    53. transition: background-color 0.25s ease-in;
    54. }
    55.  
    56. .zg-body .expandable {
    57. background: #f5f5f5;
    58. padding: 1rem 0;
    59. display: none;
    60. }
    61.  
    62. .zg-body .active .expandable {
    63. display: block;
    64. }
    65.  
    66. /** Set padding **/
    67. /** NOTE: Css looks off here, but it is to fix how it looks on site **/
    68. .zg-body .default,
    69. .expandable {
    70. line-height: 1.5rem;
    71. padding: 0.9rem 1rem;
    72. }
    73.  
    74. .zg-body .default--arrow {
    75. padding: 0.9rem 0;
    76. }
    77.  
    78. .zg-body zg-cell {
    79. padding: 0;
    80. }
    81.  
    82. /** hide layout **/
    83. .zg-body zg-layout {
    84. display: none;
    85. }
    86.  
    87. zing-grid[loading] {
    88. height: 720px;
    89. }
    90. </style>
    91. </head>
    92.  
    93. <body class="zg-body">
    94. <zing-grid caption="Expandable Rows" pager page-size="10" viewport-stop loading>
    95. <zg-source>
    96. <p>Source: <a href="https://github.com/jokecamp/FootballData" target="_blank">https://github.com/jokecamp/FootballData</a>
    97. </p>
    98. </zg-source>
    99. <zg-data>
    100. <zg-param name="src" value="https://storage.googleapis.com/zinggrid-pwa.appspot.com/2016-fa-cup.json"></zg-param>
    101. <zg-param name="recordPath" value="sheets.Teams"></zg-param>
    102. </zg-data>
    103. <zg-colgroup>
    104. <zg-column type="custom" header="2016 FA Cup Details">
    105. <div class="header">
    106. <div class="default default--arrow">
    107. <span class="arrow"></span>
    108. </div>
    109. <div class="team--info">[[record.Team]] Group ([[record.Group]])</div>
    110. </div>
    111. <div class="expandable">
    112. <p><strong>Rank:</strong> [[record.FIFA ranking]]</p>
    113. <p><strong>Coach:</strong> [[record.Coach]]</p>
    114. <p><strong>Bio:</strong> [[record.Bio]]</p>
    115. <p><strong>Strengths:</strong> [[record.strengths]]</p>
    116. <p><strong>Weaknesses:</strong> [[record.weaknesses]]</p>
    117. </div>
    118. </zg-column>
    119. </zg-colgroup>
    120. </zing-grid>
    121. <script>
    122. ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    123. // because this Javascript is injected into the document head
    124. window.addEventListener('load', () => {
    125. // Javascript code to execute after DOM content
    126. const zgRef = document.querySelector('zing-grid');
    127. zgRef.addEventListener('row:click', bindExpandEvent);
    128.  
    129. function bindExpandEvent(e) {
    130. let oDOMRow = e.detail.ZGTarget;
    131. oDOMRow.classList.toggle('active');
    132. }
    133. });
    134. </script>
    135. </body>
    136.  
    137. </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 caption="Expandable Rows" pager page-size="10" viewport-stop loading>
    12. <zg-source>
    13. <p>Source: <a href="https://github.com/jokecamp/FootballData" target="_blank">https://github.com/jokecamp/FootballData</a>
    14. </p>
    15. </zg-source>
    16. <zg-data>
    17. <zg-param name="src" value="https://storage.googleapis.com/zinggrid-pwa.appspot.com/2016-fa-cup.json"></zg-param>
    18. <zg-param name="recordPath" value="sheets.Teams"></zg-param>
    19. </zg-data>
    20. <zg-colgroup>
    21. <zg-column type="custom" header="2016 FA Cup Details">
    22. <div class="header">
    23. <div class="default default--arrow">
    24. <span class="arrow"></span>
    25. </div>
    26. <div class="team--info">[[record.Team]] Group ([[record.Group]])</div>
    27. </div>
    28. <div class="expandable">
    29. <p><strong>Rank:</strong> [[record.FIFA ranking]]</p>
    30. <p><strong>Coach:</strong> [[record.Coach]]</p>
    31. <p><strong>Bio:</strong> [[record.Bio]]</p>
    32. <p><strong>Strengths:</strong> [[record.strengths]]</p>
    33. <p><strong>Weaknesses:</strong> [[record.weaknesses]]</p>
    34. </div>
    35. </zg-column>
    36. </zg-colgroup>
    37. </zing-grid>
    38. </body>
    39.  
    40. </html>
    1. .zg-body {
    2. background: #fff;
    3. }
    4.  
    5. zing-grid[loading] {
    6. height: 500px;
    7. }
    8.  
    9. /** Expandable Row Trigger **/
    10. .zg-body .arrow {
    11. display: inline-block;
    12. transform: rotate(90deg);
    13. transform-origin: 0% 0%;
    14. cursor: pointer;
    15. font-size: 1.5rem;
    16. position: relative;
    17. left: 2.5rem;
    18. top: 0.25rem;
    19. }
    20.  
    21. .zg-body .active .arrow {
    22. transform: rotate(180deg);
    23. left: 2.5rem;
    24. top: 1.5rem;
    25. }
    26.  
    27. /** Expandable Row Header **/
    28. .zg-body .header {
    29. display: flex;
    30. align-items: center;
    31. }
    32.  
    33. .zg-body .team--info {
    34. margin-left: 2.5rem;
    35. }
    36.  
    37. /** Expandable Row CSS **/
    38. .zg-body .default {
    39. border-bottom: 1px solid #ebebeb;
    40. }
    41.  
    42. .zg-body zg-row:hover {
    43. cursor: pointer;
    44. background-color: #f5f7fa;
    45. transition: background-color 0.25s ease-in;
    46. }
    47.  
    48. .zg-body .expandable {
    49. background: #f5f5f5;
    50. padding: 1rem 0;
    51. display: none;
    52. }
    53.  
    54. .zg-body .active .expandable {
    55. display: block;
    56. }
    57.  
    58. /** Set padding **/
    59. /** NOTE: Css looks off here, but it is to fix how it looks on site **/
    60. .zg-body .default,
    61. .expandable {
    62. line-height: 1.5rem;
    63. padding: 0.9rem 1rem;
    64. }
    65.  
    66. .zg-body .default--arrow {
    67. padding: 0.9rem 0;
    68. }
    69.  
    70. .zg-body zg-cell {
    71. padding: 0;
    72. }
    73.  
    74. /** hide layout **/
    75. .zg-body zg-layout {
    76. display: none;
    77. }
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. window.addEventListener('load', () => {
    4. // Javascript code to execute after DOM content
    5. const zgRef = document.querySelector('zing-grid');
    6. zgRef.addEventListener('row:click', bindExpandEvent);
    7.  
    8. function bindExpandEvent(e) {
    9. let oDOMRow = e.detail.ZGTarget;
    10. oDOMRow.classList.toggle('active');
    11. }
    12. });