Advanced Range Selection

<!DOCTYPE html>
 <html lang="en">
<head>
    <title>Angular 2 ag-Grid starter</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style media="only screen">
        html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }
    html {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        overflow: auto;
    }
    body {
        padding: 1rem;
        overflow: auto;
    }
    </style>
    <link rel="stylesheet" href="styles.css">


    <!-- Polyfills -->
    <script src="https://unpkg.com/core-js@2.6.5/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.8.17/dist/zone.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>

    <script>
        var appLocation = '';
        var boilerplatePath = '';
        var systemJsMap = {"@ag-grid-community\/core\/dist\/styles\/ag-grid.css":"https:\/\/unpkg.com\/@ag-grid-community\/all-modules@22.1.1\/dist\/styles\/ag-grid.css","@ag-grid-community\/core\/dist\/styles\/ag-theme-balham.css":"https:\/\/unpkg.com\/@ag-grid-community\/all-modules@22.1.1\/dist\/styles\/ag-theme-balham.css","@ag-grid-community\/all-modules\/dist\/styles\/ag-grid.css":"https:\/\/unpkg.com\/@ag-grid-community\/all-modules@22.1.1\/dist\/styles\/ag-grid.css","@ag-grid-community\/all-modules\/dist\/styles\/ag-theme-balham-dark.css":"https:\/\/unpkg.com\/@ag-grid-community\/all-modules@22.1.1\/dist\/styles\/ag-theme-balham-dark.css","@ag-grid-community\/all-modules\/dist\/styles\/ag-theme-balham.css":"https:\/\/unpkg.com\/@ag-grid-community\/all-modules@22.1.1\/dist\/styles\/ag-theme-balham.css","@ag-grid-community\/all-modules\/dist\/styles\/ag-theme-blue.css":"https:\/\/unpkg.com\/@ag-grid-community\/all-modules@22.1.1\/dist\/styles\/ag-theme-blue.css","@ag-grid-community\/all-modules\/dist\/styles\/ag-theme-bootstrap.css":"https:\/\/unpkg.com\/@ag-grid-community\/all-modules@22.1.1\/dist\/styles\/ag-theme-bootstrap.css","@ag-grid-community\/all-modules\/dist\/styles\/ag-theme-dark.css":"https:\/\/unpkg.com\/@ag-grid-community\/all-modules@22.1.1\/dist\/styles\/ag-theme-dark.css","@ag-grid-community\/all-modules\/dist\/styles\/ag-theme-fresh.css":"https:\/\/unpkg.com\/@ag-grid-community\/all-modules@22.1.1\/dist\/styles\/ag-theme-fresh.css","@ag-grid-community\/all-modules\/dist\/styles\/ag-theme-material.css":"https:\/\/unpkg.com\/@ag-grid-community\/all-modules@22.1.1\/dist\/styles\/ag-theme-material.css","@ag-grid-community\/react":"npm:@ag-grid-community\/react@22.1.2\/","@ag-grid-community\/angular":"npm:@ag-grid-community\/angular@22.1.1\/","@ag-grid-community\/vue":"npm:@ag-grid-community\/vue@22.1.2\/"};
        var systemJsPaths = {"@ag-grid-community\/all-modules":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-community\/client-side-row-model":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-community\/core":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-community\/csv-export":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-community\/infinite-row-model":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-enterprise\/all-modules":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-enterprise\/charts":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-enterprise\/clipboard":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-enterprise\/column-tool-panel":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-enterprise\/core":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-enterprise\/excel-export":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-enterprise\/filter-tool-panel":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-enterprise\/master-detail":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-enterprise\/menu":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-enterprise\/range-selection":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-enterprise\/rich-select":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-enterprise\/row-grouping":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-enterprise\/server-side-row-model":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-enterprise\/set-filter":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-enterprise\/side-bar":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-enterprise\/status-bar":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js","@ag-grid-enterprise\/viewport-row-model":"https:\/\/unpkg.com\/@ag-grid-enterprise\/all-modules@22.1.2\/dist\/ag-grid-enterprise.cjs.js"};
    </script>

    <!-- leave the next line as is - is replaced when deploying to archives or production -->
    <script src="systemjs.config.js"></script>

    <script>
    System.import('main.ts').catch(function(err){ console.error(err); });
    </script>

</head>
<body>
    <my-app>Loading ag-Grid example&hellip;</my-app>
</body>
</html>

import { Component, ViewChild } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AllModules } from "@ag-grid-enterprise/all-modules";
import "@ag-grid-community/all-modules/dist/styles/ag-grid.css";
import "@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css";

@Component({
  selector: "my-app",
  template: `
    <div class="test-container">
      <div class="test-header">
        <button (click)="onAddRange()">Add Range</button>
        <button (click)="onClearRange()">Clear Range</button>
        Range Count:
        <span id="lbRangeCount" style="padding-right: 20px;"></span>
        Eager Sum:
        <span id="lbEagerSum" style="padding-right: 20px;"></span>
        Lazy Sum:
        <span id="lbLazySum" style="padding-right: 20px;"></span>
      </div>
      <ag-grid-angular
        #agGrid
        style="width: 100%; height: 100%;"
        id="myGrid"
        class="ag-theme-balham"
        [modules]="modules"
        [columnDefs]="columnDefs"
        [defaultColDef]="defaultColDef"
        [enableRangeSelection]="true"
        [rowData]="rowData"
        [processCellForClipboard]="processCellForClipboard"
        [processCellFromClipboard]="processCellFromClipboard"
        (rangeSelectionChanged)="onRangeSelectionChanged($event)"
        (gridReady)="onGridReady($event)"
      ></ag-grid-angular>
    </div>
  `
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;
  public modules: Module[] = AllModules;

  private columnDefs;
  private defaultColDef;
  private processCellForClipboard;
  private processCellFromClipboard;
  private rowData: [];

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        headerName: "Athlete",
        field: "athlete",
        width: 150
      },
      {
        headerName: "Age",
        field: "age",
        width: 90
      },
      {
        headerName: "Country",
        field: "country",
        width: 120
      },
      {
        headerName: "Year",
        field: "year",
        width: 90
      },
      {
        headerName: "Date",
        field: "date",
        width: 110
      },
      {
        headerName: "Sport",
        field: "sport",
        width: 110
      },
      {
        headerName: "Gold",
        field: "gold",
        width: 100
      },
      {
        headerName: "Silver",
        field: "silver",
        width: 100
      },
      {
        headerName: "Bronze",
        field: "bronze",
        width: 100
      },
      {
        headerName: "Total",
        field: "total",
        width: 100
      }
    ];
    this.defaultColDef = { editable: true };
    this.processCellForClipboard = function(params) {
      if (params.column.getColId() === "athlete" && params.value && params.value.toUpperCase) {
        return params.value.toUpperCase();
      } else {
        return params.value;
      }
    };
    this.processCellFromClipboard = function(params) {
      if (params.column.getColId() === "athlete" && params.value && params.value.toLowerCase) {
        return params.value.toLowerCase();
      } else {
        return params.value;
      }
    };
  }

  onRangeSelectionChanged(event) {
    var lbRangeCount = document.querySelector("#lbRangeCount");
    var lbEagerSum = document.querySelector("#lbEagerSum");
    var lbLazySum = document.querySelector("#lbLazySum");
    var cellRanges = this.gridApi.getCellRanges();
    if (!cellRanges || cellRanges.length === 0) {
      lbRangeCount.innerHTML = "0";
      lbEagerSum.innerHTML = "-";
      lbLazySum.innerHTML = "-";
      return;
    }
    lbRangeCount.innerHTML = cellRanges.length;
    var firstRange = cellRanges[0];
    var sum = 0;
    var startRow = Math.min(firstRange.startRow.rowIndex, firstRange.endRow.rowIndex);
    var endRow = Math.max(firstRange.startRow.rowIndex, firstRange.endRow.rowIndex);
    var api = this.gridApi;
    for (var rowIndex = startRow; rowIndex <= endRow; rowIndex++) {
      firstRange.columns.forEach(function(column) {
        var rowModel = api.getModel();
        var rowNode = rowModel.getRow(rowIndex);
        var value = api.getValue(column, rowNode);
        if (typeof value === "number") {
          sum += value;
        }
      });
    }
    lbEagerSum.innerHTML = sum;
    if (event.started) {
      lbLazySum.innerHTML = "?";
    }
    if (event.finished) {
      lbLazySum.innerHTML = sum;
    }
  }

  onAddRange() {
    this.gridApi.addCellRange({
      rowStartIndex: 0,
      rowEndIndex: this.rowData.length-1,
      columnStart: "age",
      columnEnd: "age"
    });
  }

  onClearRange() {
    this.gridApi.clearRangeSelection();
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get(
        "https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json"
      )
      .subscribe(data => {
        this.rowData = data;
      });
  }
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms"; // <-- NgModel lives here
// HttpClient
import { HttpClientModule } from "@angular/common/http";

// ag-grid
import { AgGridModule } from "@ag-grid-community/angular";
import { AppComponent } from "./app.component";

@NgModule({
  imports: [
    BrowserModule,
    FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
    HttpClientModule,
    AgGridModule.withComponents([])
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

.test-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.test-header {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 13px;
    margin-bottom: 5px;
}

// Angular entry point file
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from 'app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

/**
 * WEB ANGULAR VERSION
 * (based on systemjs.config.js from the angular tutorial - https://angular.io/tutorial)
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;

module.exports.translate = function(load){
  if (load.source.indexOf('moduleId') != -1) return load;

  var url = document.createElement('a');
  url.href = load.address;

  var basePathParts = url.pathname.split('/');

  basePathParts.pop();
  var basePath = basePathParts.join('/');

  var baseHref = document.createElement('a');
  baseHref.href = this.baseURL;
  baseHref = baseHref.pathname;

  if (!baseHref.startsWith('/base/')) { // it is not karma
    basePath = basePath.replace(baseHref, '');
  }

  load.source = load.source
    .replace(templateUrlRegex, function(match, quote, url){
      var resolvedUrl = url;

      if (url.startsWith('.')) {
        resolvedUrl = basePath + url.substr(1);
      }

      return 'templateUrl: "' + resolvedUrl + '"';
    })
    .replace(stylesRegex, function(match, relativeUrls) {
      var urls = [];

      while ((match = stringRegex.exec(relativeUrls)) !== null) {
        if (match[2].startsWith('.')) {
          urls.push('"' + basePath + match[2].substr(1) + '"');
        } else {
          urls.push('"' + match[2] + '"');
        }
      }

      return "styleUrls: [" + urls.join(', ') + "]";
    });

  return load;
};

/**
 * WEB ANGULAR VERSION
 * (based on systemjs.config.js from the angular tutorial - https://angular.io/tutorial)
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    var ANGULAR_VERSION = "5.1.3";
    var ANGULAR_CDK_VERSION = "5.2.5";
    var ANGULAR_MATERIAL_VERSION = "5.2.5";

    System.config({
        // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
        transpiler: "ts",
        typescriptOptions: {
            // Copy of compiler options in standard tsconfig.json
            target: "es5",
            module: "system", //gets rid of console warning
            moduleResolution: "node",
            sourceMap: true,
            emitDecoratorMetadata: true,
            experimentalDecorators: true,
            lib: ["es2015", "dom"],
            noImplicitAny: true,
            suppressImplicitAnyIndexErrors: true
        },
        meta: {
            typescript: {
                exports: "ts"
            },
            '*.css': {loader: 'css'}
        },
        paths:
            Object.assign(
                {
                    // paths serve as alias
                    "npm:": "https://unpkg.com/",
                }, systemJsPaths)
        ,
        // RxJS makes a lot of requests to unpkg. This guy addressed it:
        // https://github.com/OasisDigital/rxjs-system-bundle.
        bundles: {
            "npm:rxjs-system-bundle@5.5.5/Rx.system.js": [
                "rxjs",
                "rxjs/*",
                "rxjs/operator/*",
                "rxjs/operators/*",
                "rxjs/observable/*",
                "rxjs/scheduler/*",
                "rxjs/symbol/*",
                "rxjs/add/operator/*",
                "rxjs/add/observable/*",
                "rxjs/util/*"
            ]
        },
        // map tells the System loader where to look for things
        map: Object.assign(
            {
                // css plugin
                'css': 'npm:systemjs-plugin-css/css.js',

                // angular bundles
                "@angular/animations": "npm:@angular/animations@" + ANGULAR_VERSION + "/bundles/animations.umd.js",
                "@angular/animations/browser": "npm:@angular/animations@" + ANGULAR_VERSION + "/bundles/animations-browser.umd.js",
                "@angular/core": "npm:@angular/core@" + ANGULAR_VERSION + "/bundles/core.umd.js",
                "@angular/common": "npm:@angular/common@" + ANGULAR_VERSION + "/bundles/common.umd.js",
                "@angular/common/http": "npm:@angular/common@" + ANGULAR_VERSION + "/bundles/common-http.umd.js",
                "@angular/compiler": "npm:@angular/compiler@" + ANGULAR_VERSION + "/bundles/compiler.umd.js",
                "@angular/platform-browser": "npm:@angular/platform-browser@" + ANGULAR_VERSION + "/bundles/platform-browser.umd.js",
                "@angular/platform-browser/animations": "npm:@angular/platform-browser@" + ANGULAR_VERSION + "/bundles/platform-browser-animations.umd.js",
                "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@" + ANGULAR_VERSION + "/bundles/platform-browser-dynamic.umd.js",
                "@angular/http": "npm:@angular/http@" + ANGULAR_VERSION + "/bundles/http.umd.js",
                "@angular/router": "npm:@angular/router@" + ANGULAR_VERSION + "/bundles/router.umd.js",
                "@angular/router/upgrade": "npm:@angular/router@" + ANGULAR_VERSION + "/bundles/router-upgrade.umd.js",
                "@angular/forms": "npm:@angular/forms@" + ANGULAR_VERSION + "/bundles/forms.umd.js",
                "@angular/upgrade": "npm:@angular/upgrade@" + ANGULAR_VERSION + "/bundles/upgrade.umd.js",
                "@angular/upgrade/static": "npm:@angular/upgrade@" + ANGULAR_VERSION + "/bundles/upgrade-static.umd.js",
                "angular-in-memory-web-api": "npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js",
                // material design
                "@angular/material": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/bundles/material.umd.js",
                "@angular/cdk/platform": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-platform.umd.js",
                "@angular/cdk/bidi": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-bidi.umd.js",
                "@angular/cdk/coercion": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-coercion.umd.js",
                "@angular/cdk/keycodes": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-keycodes.umd.js",
                "@angular/cdk/a11y": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-a11y.umd.js",
                "@angular/cdk/overlay": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-overlay.umd.js",
                "@angular/cdk/portal": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-portal.umd.js",
                "@angular/cdk/observers": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-observers.umd.js",
                "@angular/cdk/collections": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-collections.umd.js",
                "@angular/cdk/accordion": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-accordion.umd.js",
                "@angular/cdk/scrolling": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-scrolling.umd.js",
                "@angular/cdk/layout": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-layout.umd.js",
                "@angular/cdk/table": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-table.umd.js",
                "@angular/cdk/text-field": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-text-field.umd.js",
                "@angular/cdk/tree": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-tree.umd.js",
                "@angular/cdk/stepper": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-stepper.umd.js",
                // ngx bootstrap
                "ngx-bootstrap": "npm:ngx-bootstrap@2.0.0-rc.0",
                // ng2 typeahead
                "ng2-typeahead": "npm:ng2-typeahead@1.2.0",

                ts: "npm:plugin-typescript@5.2.7/lib/plugin.js",
                tslib: "npm:tslib@1.7.1/tslib.js",
                typescript: "npm:typescript@2.3.2/lib/typescript.js",

                // for some of the examples
                lodash: "npm:lodash@4.17.4/lodash.js",

                // our app is within the app folder, appLocation comes from index.html
                app: appLocation + "app",

                rxjs: "npm:rxjs@6.1.0/bundles/rxjs.umd.min.js"
            },
            systemJsMap
        ),
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: "./main.ts",
                defaultExtension: "ts",
                meta: {
                    "./*.ts": {
                        loader: boilerplatePath + "systemjs-angular-loader.js"
                    }
                }
            },
            "@ag-grid-community/angular": {
                main: "./main.js",
                defaultExtension: "js"
            },
            rxjs: {
                defaultExtension: false
            }
        }
    });
})(this);