How to insert rows in the used range with predefined values using context menu option in Angular Spreadsheet?
This article explains how to insert rows in the used range with predefined values using context menu option in Angular Spreadsheet.
When you choose the context menu option, the contextMenuItemSelect event will trigger. In this event, you will get the selected row index and chosen option text as above or below. Based on that, calculate the target row index value. After that, define the row’s model with predefined values for the target row index. Pass the defined row model as an argument to the insertRow method when target row index present within the used range of the sheet.
[app.component.html]
<div class="control-section"> <ejs-spreadsheet #default (contextMenuItemSelect)="contextMenuItemSelect($event)" > <e-sheets> <e-sheet name="Car Sales Report"> <e-ranges> <e-range [dataSource]="data"></e-range> </e-ranges> <e-columns> <e-column [width]="180"></e-column> <e-column [width]="130"></e-column> <e-column [width]="130"></e-column> <e-column [width]="180"></e-column> <e-column [width]="130"></e-column> <e-column [width]="120"></e-column> </e-columns> </e-sheet> </e-sheets> </ejs-spreadsheet> </div>
|
[app.component.ts]
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core'; import { getDefaultData } from './data'; import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet'; import { getRangeIndexes } from '@syncfusion/ej2-spreadsheet';
@Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'], encapsulation: ViewEncapsulation.None, })
export class AppComponent { constructor() {} @ViewChild('default') public spreadsheetObj: SpreadsheetComponent; public data: Object[] = getDefaultData();
public contextMenuItemSelect(args) { let selectedRange: string = this.spreadsheetObj.getActiveSheet().selectedRange; let usedRange: Object = this.spreadsheetObj.getActiveSheet().usedRange; let index: Array<number> = getRangeIndexes(selectedRange); let newIndex: Number; // Assigning newly inserted index for insert row actions. if (args.item.text == 'Above') { newIndex = index[0] - (index[2] - index[0]); } if (args.item.text == 'Below') { newIndex = index[0] + (index[2] - index[0]) + 1; } // Rows model that is going to insert dynamically, construct this model based on your need. let rowsModel = [ { index: newIndex, cells: [ { value: 'Column 1', style: { borderBottom: '1px solid', borderLeft: '1px solid', borderRight: '1px solid', borderTop: '1px solid' }, }, { value: 'Column 2', style: { borderBottom: '1px solid', borderLeft: '1px solid', borderRight: '1px solid', borderTop: '1px solid' }, }, { value: 'Column 3', style: { borderBottom: '1px solid', borderLeft: '1px solid', borderRight: '1px solid', borderTop: '1px solid' }, }, { value: 'Column 4', style: { borderBottom: '1px solid', borderLeft: '1px solid', borderRight: '1px solid', borderTop: '1px solid' }, }, { value: 'Column 5', style: { borderBottom: '1px solid', borderLeft: '1px solid', borderRight: '1px solid', borderTop: '1px solid' }, }, { value: 'Column 6', style: { borderBottom: '1px solid', borderLeft: '1px solid', borderRight: '1px solid', borderTop: '1px solid' }, }, ], }, ]; // Condition to check whether the new row inserted index is lesser or equal to used row index. if(newIndex <= usedRange.rowIndex){ if (args.item.text == 'Above' || args.item.text == 'Below') { // Cancel default insert action. args.cancel = true; // Insert the rows with pre-defined row model based on your need. this.spreadsheetObj.insertRow(rowsModel); } } else{ alert("Insert a row into the used range...!"); } }
}
|
Sample: https://stackblitz.com/edit/angular-7cwi7b-rnxu9v?file=app.component.ts
Output:
