Formulas

Formulas are used for calculation of data in sheet. You can refer the formula cell reference in following ways,

  1. Cell reference from same sheet
  2. Cell reference from different sheets

You can set formula for a cell in following ways,

  1. Initial Load
  2. Method
  3. User Interface

Initial Load

You can set formula for a cell by specifying value property in cell data binding. The following code example describes the above behavior,

  • html
  • <ej-spreadsheet id="Spreadsheet" [sheets]="spreadData"></ej-spreadsheet>
  • javascript
  • import { Component } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: 'app/app.component.html',  //give the path file for spreadsheet control html file.
    })
    export class AppComponent {
      public spreadData;
      constructor() {
         this.spreadData = [{
          rows: [{
            cells: [{
              value: 1
            }]
          },
          {
            cells: [{
              value: 2
            }]
          },
          {
            cells: [{
              value: "=SUM(A1,A2)"
            }]
          }]
        },
        {
          rows: [{
            cells: [{
              value: "=Sum(Sheet1!A1:A2)"
            }]
          }]
        }];  
      }
      }
    }

    The following output is displayed as a result of the above code example.
    Formula

    Cell Reference from Same sheet

    Formula

    Cell Reference from different sheets

    Method

    You can set formula for a cell using updateCellValue method. The following code example describes the above behavior,

  • html
  • <ej-spreadsheet #spreadsheet id="Spreadsheet" [sheets]="spreadData"></ej-spreadsheet>
  • javascript
  • import { Component, ViewChild } from '@angular/core';
    import { EJComponents } from 'ej-angular2';
    
    @Component({
      selector: 'ej-app',
      templateUrl: 'app/app.component.html',  //give the path file for spreadsheet control html file.
    })
    export class AppComponent {
      public spreadData;
      constructor() {
        this.spreadData = [{
          rows: [{
            cells: [{
              value: 1
            }]
          },
          {
            cells: [{
              value: 2
            }]
          }]
        }];
      }
      @ViewChild('spreadsheet') xlObj: EJComponents<any, any>;
      ngAfterViewInit() {
        this.xlObj.widget.XLEdit.updateCellValue({ rowIndex: 2, colIndex: 0 }, "=SUM(A1,A2)");
      }
    }

    The following output is displayed as a result of the above code example.
    Formula

    User Interface

    You can set formula for a cell by edit and save a cell through user interface using Editing feature. The following code example and screenshot describes the above behavior,

  • html
  • <ej-spreadsheet id="Spreadsheet" [sheets]="spreadData"></ej-spreadsheet>
  • javascript
  • import { Component } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: 'app/app.component.html',  //give the path file for spreadsheet control html file.
    })
    export class AppComponent {
      public spreadData;
      constructor() {
        this.spreadData = [{
          rows: [{
            cells: [{
              value: 1
            }]
          },
          {
            cells: [{
              value: 2
            }]
          }]
        }];
      }
    }

    Formula

    The following output is displayed while saving edited cell with above code example.
    Formula

    NOTE

    1. The list of supported formulas can be find in following link
    2. Constant values, cell references, formulas and named ranges can be passed as argument to formulas
    3. Selection can be used to mention cell references within formula

    User Defined Functions

    The list of formulas supported in Spreadsheet is sufficient for most of your calculations. If not, you can create and use your own function using user defined function option. You can add user defined function to Spreadsheet in following ways,

    1. Initial Load

    2. Method

    Initial Load

    You can add your own function to Spreadsheet at initial load with customFormulas API. The following code example describes the above behavior,

  • html
  • <ej-spreadsheet id="spreadsheet" [sheets] = "spreadData" [customFormulas] = "formula">
    </ej-spreadsheet>
  • javascript
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: 'app/app.component.html',  //give the path file for spreadsheet control html file.
    })
    export class AppComponent {
      public spreadData;
      public formula;
      constructor() {
        this.spreadData = [{
                    rows: [{
                        cells: [{
                            value: 1
                        }]
                        },
                        {
                        cells: [{
                            value: 2
                        }]
                        },                    
                        {
                        cells: [{
                            value: "=CUSTOMTOTAL(A1,A2,3)"
                        }]
                    }]
                }];
        this.formula=[{"formulaName":"CUSTOMTOTAL", "functionName":"customTotal"}];
      }
    }

    Place the following code in index.html,

  • html
  • <script>
    function customTotal(args) {
        var param1, param2, param3, value, xlObj = $('#spreadsheet').data("ejSpreadsheet"),
        argument = xlObj.getValueFromFormulaArg(args);
        param1 = argument["arg1"];
        param2 = argument["arg2"];
        param3 = argument["arg3"];
        value = param1 * param2 + param3;
        return value;
    }
    </script>

    The following output is displayed as a result of the above code example.
    Custom Formula

    Method

    You can add your own function to Spreadsheet using addCustomFormula method. The following code example describes the above behavior,

  • html
  • <ej-spreadsheet id="spreadsheet" [sheets] = "spreadData" (loadComplete)= loadComplete($event)>
    </ej-spreadsheet>
  • javascript
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: 'app/app.component.html',  //give the path file for spreadsheet control html file.
    })
    export class AppComponent {
      public spreadData;
      constructor() {
        this.spreadData = [{
          rows: [{
            cells: [{
              value: 1
            }]
          },
          {
            cells: [{
              value: 2
            }]
          }]
        }];
      }
      loadComplete(event) {
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        xlObj.addCustomFormula("CUSTOMTOTAL", "customTotal");
        xlObj.XLEdit.updateCellValue({ rowIndex: 2, colIndex: 0 }, "=CUSTOMTOTAL(A1,A2,3)");
      }
    }

    Place the following code in index.html,

  • html
  • <script>
    function customTotal(args) {
        var param1, param2, param3, value, xlObj = $('#spreadsheet').data("ejSpreadsheet"),
        argument = xlObj.getValueFromFormulaArg(args);
        param1 = argument["arg1"];
        param2 = argument["arg2"];
        param3 = argument["arg3"];
        value = param1 * param2 + param3;
        return value;
    }
    </script>

    The following output is displayed as a result of the above code example.
    Custom Formula

    To remove user defined function from Spreadsheet use removeCustomFormula method.

    Named Ranges

    To understand the purpose of cell reference or table, you can define a meaningful name using named ranges support. By using names, you can make your formula much easier to understand and maintain. You can add named ranges to Spreadsheet in following ways,

    1. Initial load

    2. Method

    3. User Interface

    Initial Load

    To add named ranges at initial load by using nameManager API, and also you can specify the name and address of the range by using name and refersto API. You can find the added named range list collection in Spreadsheet by accessing nameManager API.
    The following code example describes the above behavior,

  • html
  • <ej-spreadsheet id="spreadsheet" [sheets] = "spreadData" [nameManager] = "namemanager">
    </ej-spreadsheet>
  • javascript
  • import { Component, ViewEncapsulation } from '@angular/core';
    //import { SpreadsheetService } from './services/spreadsheet.service';
    
    @Component({
      selector: 'ej-app',
      templateUrl: 'app/app.component.html',  //give the path file for spreadsheet control html file.
      //providers: [SpreadsheetService]
    })
    export class AppComponent {
      public spreadData;
      public namemanager;
      constructor() {
        this.spreadData = [{
          rows: [{
            cells: [{
              value: 1
            }]
          },
          {
            cells: [{
              value: 2
            }]
          }]
        }];
      }
    }

    The following output is displayed as a result of the above code example.
    Named Ranges

    Method

    You can add named range to Spreadsheet with addNamedRange method and it can be removed with removeNamedRange method. The following code example describes the addNamedRange behavior,

  • html
  • <ej-spreadsheet id="spreadsheet" [sheets] = "spreadData" (loadComplete)= loadComplete($event)>
    </ej-spreadsheet>
  • javascript
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: 'app/app.component.html',  //give the path file for spreadsheet control html file.
    })
    export class AppComponent {
      public spreadData;
      public namemanager;
      constructor() {
        this.spreadData = [{
          rows: [{
            cells: [{
              value: 1
            }]
          },
          {
            cells: [{
              value: 2
            }]
          }]
        }];
      }
      loadComplete(event) {
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        xlObj.XLRibbon.addNamedRange("inputrange", "=Sheet1!$A$1:$A$2", "named range demo", xlObj.getActiveSheetIndex());
        xlObj.XLEdit.updateCellValue({ rowIndex: 2, colIndex: 0 }, "=SUM(inputrange)");
      }
    }

    The following output is displayed as a result of the above code example.
    Named Ranges

    User Interface

    You can define name for range of cells through user interface using Define Name option in OTHERS tab. The following screenshot describes the above behavior,
    Named Ranges

    NOTE

    Defining name for cell reference or table will be accessible across all sheets.
    Named Ranges will be displayed in Name Manger dialog box.

    Formula Bar

    Formula bar is used to edit or enter cell data in much easier way. To enable formula bar set allowFormulaBar as true.

    Auto Sum

    To sum a row or column of numbers, select a cell next to the numbers you want to sum, click AutoSum on the HOME tab and press enter. To enable auto sum set allowAutoSum API as true.
    The auto sum options in ribbon is used to perform basic operations like sum, average, count, minimum, maximum etc.