• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8.   <style>
    9.     body {
    10.       background: #e6e6e6;
    11.     }
    12.  
    13.     .breed {
    14.       background: #fff59d;
    15.     }
    16.  
    17.     .cane-corso {
    18.       background: #ef9a9a;
    19.     }
    20.  
    21.     .pomeranian {
    22.       background: #90caf9;
    23.     }
    24.  
    25.     .name {
    26.       font-family: Roboto;
    27.     }
    28.  
    29.     .ziva {
    30.       font-size: 2rem;
    31.     }
    32.  
    33.     .koda {
    34.       font-size: 1.3rem;
    35.     }
    36.  
    37.     zing-grid[loading] {
    38.       height: 552px;
    39.     }
    40.   </style>
    41. </head>
    42.  
    43. <body>
    44.   <!-- Most features can be toggled on the toplevel zing-grid tag -->
    45.   <zing-grid caption="Cell Class Function" layout="row" layout-controls="disabled" viewport-stop>
    46.     <!-- dataset -->
    47.     <zg-data data='[
    48.       	{ "breed": "Cane Corso", "name": "Ziva"},
    49.       	{ "breed": "Pug", "name": "Doug"},
    50.       	{ "breed": "Corgi", "name": "Jenny"},
    51.       	{ "breed": "Pomeranian", "name": "Koda"},
    52.       	{ "breed": "Great Dane", "name": "Zeus"},
    53.       	{ "breed": "Frenchie", "name": "Bruce"},
    54.       	{ "breed": "Cane Corso", "name": "Sofia"},
    55.       	{ "breed": "Pomeranian", "name": "Snowball"}
    56.       ]'></zg-data>
    57.  
    58.     <!-- define custom columns -->
    59.     <zg-colgroup>
    60.       <zg-column index="breed" cell-class="singleIndex"></zg-column>
    61.       <zg-column index="name, breed" cell-class="multipleIndices"></zg-column>
    62.     </zg-colgroup>
    63.   </zing-grid>
    64.  
    65.   <script>
    66.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    67.  
    68.     function singleIndex(breed, cellDOMRef, cellRef) {
    69.       return `breed ${breed.replace(/\s+/g, '-').toLowerCase()}`;
    70.     }
    71.  
    72.     function multipleIndices(name, breed, cellDOMRef, cellRef) {
    73.       return `name ${name.toLowerCase()}`;
    74.     }
    75.   </script>
    76. </body>
    77.  
    78. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <!-- Most features can be toggled on the toplevel zing-grid tag -->
    12.   <zing-grid caption="Cell Class Function" layout="row" layout-controls="disabled" viewport-stop>
    13.     <!-- dataset -->
    14.     <zg-data data='[
    15.       	{ "breed": "Cane Corso", "name": "Ziva"},
    16.       	{ "breed": "Pug", "name": "Doug"},
    17.       	{ "breed": "Corgi", "name": "Jenny"},
    18.       	{ "breed": "Pomeranian", "name": "Koda"},
    19.       	{ "breed": "Great Dane", "name": "Zeus"},
    20.       	{ "breed": "Frenchie", "name": "Bruce"},
    21.       	{ "breed": "Cane Corso", "name": "Sofia"},
    22.       	{ "breed": "Pomeranian", "name": "Snowball"}
    23.       ]'></zg-data>
    24.  
    25.     <!-- define custom columns -->
    26.     <zg-colgroup>
    27.       <zg-column index="breed" cell-class="singleIndex"></zg-column>
    28.       <zg-column index="name, breed" cell-class="multipleIndices"></zg-column>
    29.     </zg-colgroup>
    30.   </zing-grid>
    31.  
    32. </body>
    33.  
    34. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    4.  
    5. .breed {
    6.   background: #fff59d;
    7. }
    8.  
    9. .cane-corso {
    10.   background: #ef9a9a;
    11. }
    12.  
    13. .pomeranian {
    14.   background: #90caf9;
    15. }
    16.  
    17. .name {
    18.   font-family: Roboto;
    19. }
    20.  
    21. .ziva {
    22.   font-size: 2rem;
    23. }
    24.  
    25. .koda {
    26.   font-size: 1.3rem;
    27. }
    1. function singleIndex(breed, cellDOMRef, cellRef) {
    2.   return `breed ${breed.replace(/\s+/g, '-').toLowerCase()}`;
    3. }
    4.  
    5. function multipleIndices(name, breed, cellDOMRef, cellRef) {
    6.   return `name ${name.toLowerCase()}`;
    7. }