• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingGrid: Simple Grid</title>
        <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js" defer></script>
        <style>
            .increased {
                color: #66bb6a;
            }
    
            .increased::before {
                content: '↑';
            }
    
            .decreased {
                color: #ef5350;
            }
    
            .decreased::before {
                content: '↓';
            }
    
            .highlight {
                background: #fff59d;
            }
    
            zing-grid[loading] {
                height: 128px;
            }
        </style>
    </head>
    
    <body>
        <!-- Define grid component -->
        <zing-grid caption="Method Render" layout="row" layout-controls="disabled" viewport-stop>
            <!-- Define explicit column rendering -->
            <zg-colgroup>
                <!-- this column is found at the window level scope -->
                <zg-column index="open" type="currency" cell-class="_renderStocks"></zg-column>
                <!-- these columns have been aliased and scoped -->
                <zg-column index="high" type="currency" cell-class="f1"></zg-column>
                <zg-column index="low" type="currency" cell-class="f2"></zg-column>
                <!-- standard rendered columns -->
                <zg-column index="close" type="currency"></zg-column>
                <zg-column index="volume" type="number"></zg-column>
            </zg-colgroup>
        </zing-grid>
        <script>
            // determine if we should render positive/negative
            // cell styling based on opening stock price vs when it last
            // closed
            function _renderStocks(open, cellDOMRef, cellRef) {
                // if open is higher than close value
                if (open > cellRef.record.close) return 'stock-open increased';
    
                return 'stock-open decreased';
            }
    
            // namespace to simulate an ecapsulated class or component
            const namespace1 = {
                // global vars for highlight min/max values
                gHigh: -1,
                gLow: Number.MAX_SAFE_INTEGER,
    
                // highlight cell with highest value in high column
                _highlightHigh: function(high, cellDOMRef, cellRef) {
                    if (high == Number(this.gHigh)) return 'highlight';
                },
    
                // highlight cell with lowest value in low column
                _highlightLow: function(low, cellDOMRef, cellRef) {
                    if (low == Number(this.gLow)) return 'highlight';
                },
            };
    
            // register methods to alias "f1" and "f2" where "this" references the 
            // namespace1 scope as well
            ZingGrid.registerMethod(namespace1._highlightHigh, 'f1', namespace1);
            ZingGrid.registerMethod(namespace1._highlightLow, 'f2', namespace1);
    
            // set interval to simulate realtime data
            window.addEventListener('load', () => {
                // save reference to the grid
                const zgRef = document.querySelector('zing-grid');
    
                // interval mimics real time data updates
                setInterval(() => {
                    // regenerate the same starting dataset everytime to 
                    // produce better visual results
                    let realTimeData = [{
                        open: 114.1900,
                        high: 114.4950,
                        low: 113.6800,
                        close: 114.2750,
                        volume: 7120112
                    }, {
                        open: 113.0300,
                        high: 114.9000,
                        low: 112.2175,
                        close: 114.6700,
                        volume: 27334460
                    }, {
                        open: 113.0500,
                        high: 113.3200,
                        low: 111.0350,
                        close: 111.7000,
                        volume: 21728429
                    }, {
                        open: 112.1900,
                        high: 113.6950,
                        low: 111.7200,
                        close: 113.2100,
                        volume: 22170934
                    }, {
                        open: 113.6900,
                        high: 113.7000,
                        low: 111.8600,
                        close: 112.1400,
                        volume: 20736516
                    }];
    
                    // reset global vars for highlighint min/max cells
                    namespace1.gHigh = -1;
                    namespace1.gLow = Number.MAX_SAFE_INTEGER;
    
                    // update data to mimic realtime updates
                    realTimeData.map(values => {
    
                        // randomly choose to. inc/dec values to 
                        // simulate stock exchanges
                        if (Math.round(Math.random())) {
                            values.open = (values.open - 1);
                            values.high = (values.high - 1);
                            values.low = (values.low - 1);
                            values.close = (values.close + 1);
                            values.volume = (values.volume - 100);
                        } else {
                            values.open = (values.open + Math.floor(Math.random() * 5));
                            values.high = (values.high + 1);
                            values.low = (values.low + 1);
                            values.close = (values.close - 1);
                            values.volume = (values.volume + 100);
                        }
    
                        // set new global high/low values
                        if (values.high >= namespace1.gHigh) namespace1.gHigh = values.high;
                        if (values.low <= namespace1.gLow) namespace1.gLow = values.low;
    
                        return values;
                    });
    
                    // assign data to grid
                    if (zgRef) zgRef.setData(realTimeData);
                }, 1000);
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>ZingGrid: Simple Grid</title>
        <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js" defer></script>
      </head>
      <body>
        <!-- Define grid component -->
        <zing-grid 
          caption="Method Render"
          layout="row"
          layout-controls="disabled"
          viewport-stop>
          <!-- Define explicit column rendering -->
          <zg-colgroup>
            <!-- this column is found at the window level scope -->
            <zg-column index="open" type="currency" cell-class="_renderStocks"></zg-column>
            <!-- these columns have been aliased and scoped -->
            <zg-column index="high" type="currency"  cell-class="f1"></zg-column>
            <zg-column index="low" type="currency" cell-class="f2"></zg-column>
            <!-- standard rendered columns -->
            <zg-column index="close" type="currency"></zg-column>
            <zg-column index="volume" type="number"></zg-column>
          </zg-colgroup>
        </zing-grid>
      </body>
    </html>
    .increased { color:#66bb6a; }
    .increased::before { content:'↑'; }
    
    .decreased { color:#ef5350; }
    .decreased::before { content:'↓'; }
    
    .highlight { background:#fff59d ; }
    // determine if we should render positive/negative
    // cell styling based on opening stock price vs when it last
    // closed
    function _renderStocks(open, cellDOMRef, cellRef){
      // if open is higher than close value
      if (open > cellRef.record.close) return 'stock-open increased';
    
      return 'stock-open decreased';
    }
        
    // namespace to simulate an ecapsulated class or component
    const namespace1 = {
      // global vars for highlight min/max values
      gHigh: -1,
    	gLow: Number.MAX_SAFE_INTEGER,
      
      // highlight cell with highest value in high column
      _highlightHigh: function(high, cellDOMRef, cellRef) {
        if (high == Number(this.gHigh)) return 'highlight';
      },
    
      // highlight cell with lowest value in low column
      _highlightLow: function(low, cellDOMRef, cellRef) {
        if (low == Number(this.gLow)) return 'highlight';
      },
    };
    
    // register methods to alias "f1" and "f2" where "this" references the 
    // namespace1 scope as well
    ZingGrid.registerMethod(namespace1._highlightHigh, 'f1', namespace1);
    ZingGrid.registerMethod(namespace1._highlightLow, 'f2', namespace1);
    
    // set interval to simulate realtime data
    window.addEventListener('load', () => {
      // save reference to the grid
      const zgRef = document.querySelector('zing-grid');
      
      // interval mimics real time data updates
      setInterval(() => {
        // regenerate the same starting dataset everytime to 
        // produce better visual results
        let realTimeData = [
            {
                open: 114.1900,
                high: 114.4950,
                low: 113.6800,
                close: 114.2750,
                volume: 7120112
            }, {
                open: 113.0300,
                high: 114.9000,
                low: 112.2175,
                close: 114.6700,
                volume: 27334460
            }, {
                open: 113.0500,
                high: 113.3200,
                low: 111.0350,
                close: 111.7000,
                volume: 21728429
            }, {
                open: 112.1900,
                high: 113.6950,
                low: 111.7200,
                close: 113.2100,
                volume: 22170934
            }, {
                open: 113.6900,
                high: 113.7000,
                low: 111.8600,
                close: 112.1400,
                volume: 20736516
            }
        ];
        
        // reset global vars for highlighint min/max cells
    		namespace1.gHigh = -1;
    		namespace1.gLow = Number.MAX_SAFE_INTEGER;
        
        // update data to mimic realtime updates
        realTimeData.map(values => {
          
          // randomly choose to. inc/dec values to 
          // simulate stock exchanges
          if (Math.round(Math.random())) {
            values.open = (values.open - 1);
            values.high = (values.high - 1);
            values.low = (values.low - 1);
            values.close = (values.close + 1);
            values.volume = (values.volume - 100);
          } else {
            values.open = (values.open + Math.floor(Math.random() * 5));
            values.high = (values.high + 1);
            values.low = (values.low + 1);
            values.close = (values.close - 1);
            values.volume = (values.volume + 100);
          }
    			
          // set new global high/low values
          if (values.high >= namespace1.gHigh) namespace1.gHigh = values.high;
          if (values.low <= namespace1.gLow) namespace1.gLow = values.low;
          
          return values;
        });
    
        // assign data to grid
        if (zgRef) zgRef.setData(realTimeData);    
      }, 1000);
    });