• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Simple Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     .increased {
    10.       background: #a5d6a7;
    11.     }
    12.  
    13.     .decreased {
    14.       background: #ef9a9a;
    15.     }
    16.  
    17.     .highlight {
    18.       background: #fff9c4;
    19.     }
    20.  
    21.  
    22.     zing-grid[loading] {
    23.       height: 373px;
    24.     }
    25.   </style>
    26. </head>
    27.  
    28. <body class="zg-body">
    29.   <zing-grid caption="Column Formatting" row-class="_renderStocks" col-class="_highlightClose">
    30.     <zg-data data='[
    31.         {
    32.             "open": "114.1900",
    33.             "high": "114.4950",
    34.             "low": "113.6800",
    35.             "close": "114.2750",
    36.             "volume": "7120112"
    37.         }, {
    38.             "open": "113.0300",
    39.             "high": "114.9000",
    40.             "low": "112.2175",
    41.             "close": "114.6700",
    42.             "volume": "27334460"
    43.         }, {
    44.             "open": "113.0500",
    45.             "high": "113.3200",
    46.             "low": "111.0350",
    47.             "close": "111.7000",
    48.             "volume": "21728429"
    49.         }, {
    50.             "open": "112.1900",
    51.             "high": "113.6950",
    52.             "low": "111.7200",
    53.             "close": "113.2100",
    54.             "volume": "22170934"
    55.         }, {
    56.             "open": "113.6900",
    57.             "high": "113.7000",
    58.             "low": "111.8600",
    59.             "close": "112.1400",
    60.             "volume": "20736516"
    61.         }
    62.  
    63.       ]'></zg-data>
    64.   </zing-grid>
    65.   <script>
    66.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    67.  
    68.     function _renderStocks(record, $cell) {
    69.       // if open is higher than close value
    70.       if (record.open > record.close) return 'increased';
    71.  
    72.       return 'decreased';
    73.     }
    74.  
    75.     function _highlightClose(index, $cell) {
    76.       if (index === 'close') return 'highlight';
    77.     }
    78.   </script>
    79. </body>
    80.  
    81. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Simple Grid</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body class="zg-body">
    11.   <zing-grid caption="Column Formatting" row-class="_renderStocks" col-class="_highlightClose">
    12.     <zg-data data='[
    13.         {
    14.             "open": "114.1900",
    15.             "high": "114.4950",
    16.             "low": "113.6800",
    17.             "close": "114.2750",
    18.             "volume": "7120112"
    19.         }, {
    20.             "open": "113.0300",
    21.             "high": "114.9000",
    22.             "low": "112.2175",
    23.             "close": "114.6700",
    24.             "volume": "27334460"
    25.         }, {
    26.             "open": "113.0500",
    27.             "high": "113.3200",
    28.             "low": "111.0350",
    29.             "close": "111.7000",
    30.             "volume": "21728429"
    31.         }, {
    32.             "open": "112.1900",
    33.             "high": "113.6950",
    34.             "low": "111.7200",
    35.             "close": "113.2100",
    36.             "volume": "22170934"
    37.         }, {
    38.             "open": "113.6900",
    39.             "high": "113.7000",
    40.             "low": "111.8600",
    41.             "close": "112.1400",
    42.             "volume": "20736516"
    43.         }
    44.  
    45.       ]'></zg-data>
    46.   </zing-grid>
    47. </body>
    48.  
    49. </html>
    1. .increased {
    2.   background: #a5d6a7;
    3. }
    4.  
    5. .decreased {
    6.   background: #ef9a9a;
    7. }
    8.  
    9. .highlight {
    10.   background: #fff9c4;
    11. }
    1. function _renderStocks(record, $cell) {
    2.   // if open is higher than close value
    3.   if (record.open > record.close) return 'increased';
    4.  
    5.   return 'decreased';
    6. }
    7.  
    8. function _highlightClose(index, $cell) {
    9.   if (index === 'close') return 'highlight';
    10. }