• 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.     .yellow {
    14.       background: #fff59d;
    15.     }
    16.  
    17.     .red {
    18.       background: #ef9a9a;
    19.     }
    20.  
    21.     zing-grid[loading] {
    22.       height: 552px;
    23.     }
    24.   </style>
    25. </head>
    26.  
    27. <body>
    28.   <!-- Most features can be toggled on the toplevel zing-grid tag -->
    29.   <zing-grid caption="Cell Class Function" col-class="singleColumnClass" layout="row" layout-controls="disabled" viewport-stop>
    30.     <!-- dataset -->
    31.     <zg-data data='[
    32.       	{ "breed": "Cane Corso", "name": "Ziva"},
    33.       	{ "breed": "Pug", "name": "Doug"},
    34.       	{ "breed": "Corgi", "name": "Jenny"},
    35.       	{ "breed": "Pomeranian", "name": "Koda"},
    36.       	{ "breed": "Great Dane", "name": "Zeus"},
    37.       	{ "breed": "Frenchie", "name": "Bruce"},
    38.       	{ "breed": "Cane Corso", "name": "Sofia"},
    39.       	{ "breed": "Pomeranian", "name": "Snowball"}
    40.       ]'></zg-data>
    41.   </zing-grid>
    42.  
    43.   <script>
    44.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    45.  
    46.     function singleColumnClass(index, cellDOMRef, cellRef) {
    47.       if (index === 'name') return 'yellow';
    48.       return 'red';
    49.     }
    50.   </script>
    51. </body>
    52.  
    53. </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" col-class="singleColumnClass" 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.   </zing-grid>
    25.  
    26. </body>
    27.  
    28. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    4.  
    5. .yellow {
    6.   background: #fff59d;
    7. }
    8.  
    9. .red {
    10.   background: #ef9a9a;
    11. }
    1. function singleColumnClass(index, cellDOMRef, cellRef) {
    2.   if (index === 'name') return 'yellow';
    3.   return 'red';
    4. }