• 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.     zing-grid[loading] {
    18.       height: 373px;
    19.     }
    20.   </style>
    21. </head>
    22.  
    23. <body class="zg-body">
    24.   <zing-grid caption="Row Formatting" row-class="_renderStocks">
    25.     <zg-data data='[
    26.         {
    27.             "open": "114.1900",
    28.             "high": "114.4950",
    29.             "low": "113.6800",
    30.             "close": "114.2750",
    31.             "volume": "7120112"
    32.         }, {
    33.             "open": "113.0300",
    34.             "high": "114.9000",
    35.             "low": "112.2175",
    36.             "close": "114.6700",
    37.             "volume": "27334460"
    38.         }, {
    39.             "open": "113.0500",
    40.             "high": "113.3200",
    41.             "low": "111.0350",
    42.             "close": "111.7000",
    43.             "volume": "21728429"
    44.         }, {
    45.             "open": "112.1900",
    46.             "high": "113.6950",
    47.             "low": "111.7200",
    48.             "close": "113.2100",
    49.             "volume": "22170934"
    50.         }, {
    51.             "open": "113.6900",
    52.             "high": "113.7000",
    53.             "low": "111.8600",
    54.             "close": "112.1400",
    55.             "volume": "20736516"
    56.         }
    57.       ]'></zg-data>
    58.   </zing-grid>
    59.   <script>
    60.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    61.  
    62.     function _renderStocks(record, $cell) {
    63.       // if open is higher than close value
    64.       if (record.open > record.close) return 'increased';
    65.  
    66.       return 'decreased';
    67.     }
    68.   </script>
    69. </body>
    70.  
    71. </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="Row Formatting" row-class="_renderStocks">
    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.       ]'></zg-data>
    45.   </zing-grid>
    46. </body>
    47.  
    48. </html>
    1. .increased {
    2.   background: #a5d6a7;
    3. }
    4.  
    5. .decreased {
    6.   background: #ef9a9a;
    7. }
    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. }