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 is 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.html]
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...!");
}
}
}
Refer to the working sample for additional details and implementation: Sample
Output:
Conclusion
We hope you enjoyed learning about how to insert rows in the used range with predefined values using context menu option in Angular Spreadsheet.
You can refer to our Angular Spreedsheet page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Spreadsheet example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!
