Rows and columns in ASP.NET MVC Spreadsheet control
28 Jul 202624 minutes to read
The Spreadsheet consists of rows and columns arranged in a tabular format. The intersection of a row and column is called a cell.
You can perform the following operations on rows and columns:
- Insert
- Delete
- Show and Hide
Insert
You can insert rows or columns anywhere in a spreadsheet. Use the allowInsert property to enable or disable the insert option in Spreadsheet.
Row
You can insert rows in one of the following ways:
- Select a row header, right-click it, and choose the required insert option from the context menu.
- Use the
insertRowmethod to insert rows programmatically after the Spreadsheet is rendered.
The following code example shows the options for inserting rows in the spreadsheet.
@Html.EJS().Spreadsheet("spreadsheet").ShowSheetTabs(false).Created("created").ShowRibbon(false).ShowFormulaBar(false).Sheets(sheet =>
{
sheet.Ranges(ranges =>
{
ranges.DataSource((IEnumerable<object>)ViewBag.DefaultData).StartCell("B1").Add();
}).Columns(column =>
{
column.Width(20).Add();
column.Width(90).Add();
column.Width(220).Add();
column.Width(90).Add();
column.Width(140).Add();
column.Width(90).Add();
column.Width(100).Add();
column.Width(100).Add();
}).Add();
}).Render()
<script>
function created() {
// Rows model that is going to insert dynamically
var rowsModel = [{
index: 9, // Need to specify the index for the first row collection, the specified rows will be inserted in this index.
cells: [{ value: '' }, { value: '8' }, { value: 'Northwoods Cranberry Sauce' }, { value: '3' }, { value: '12 - 12 oz jars' },
{ value: '40.00' }, { value: '6' }, { value: 'false' }]
},
{
cells: [{ value: '' }, { value: '9' }, { value: 'Mishi Kobe Niku' }, { value: '4' }, { value: '18 - 500 g pkgs.' }, { value: '97.00' }, { value: '29' }, { value: 'true' }]
}];
// Applies style formatting before inserting the rows
this.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'B1:H1');
// inserting a empty row at 0th index
this.insertRow();
// inserting 2 rows at the 9th index with data
this.insertRow(rowsModel);
// Applies style formatting after the rows are inserted
this.cellFormat({ textAlign: 'center' }, 'B3:B12');
this.cellFormat({ textAlign: 'center' }, 'D3:D12');
this.cellFormat({ textAlign: 'center' }, 'F3:H12');
}
</script>public ActionResult Index()
{
List<object> data = new List<object>()
{
new { ProductId= "1", ProductName= "Chai", SupplierId= "1", QuantityPerUnit= "10 boxes x 20 bags", UnitPrice= "18.00", UnitsInStock= "39", Discontinued= "false" },
new { ProductId= "2", ProductName= "Chang", SupplierId= "1", QuantityPerUnit= "24 - 12 oz bottles", UnitPrice= "19.00", UnitsInStock= "17", Discontinued= "true" },
new { ProductId= "3", ProductName= "Aniseed Syrup", SupplierId= "1", QuantityPerUnit= "12 - 550 ml bottles", UnitPrice= "10.00", UnitsInStock= "13", Discontinued= "false" },
new { ProductId= "4", ProductName= "Chef Anton\'s Cajun Seasoning", SupplierId= "2", QuantityPerUnit= "48 - 6 oz jars", UnitPrice= "22.00", UnitsInStock= "53", Discontinued= "true" },
new { ProductId= "5", ProductName= "Chef Anton\'s Gumbo Mix", SupplierId= "2", QuantityPerUnit= "36 boxes', 'Unit Price", UnitPrice= "21.35", UnitsInStock= "0", Discontinued= "true" },
new { ProductId= "6", ProductName= "Grandma\'s Boysenberry Spread", SupplierId= "3", QuantityPerUnit= "12 - 8 oz jars", UnitPrice= "25.00", UnitsInStock= "120", Discontinued= "false" },
new { ProductId= "7", ProductName= "Uncle Bob\'s Organic Dried Pears", SupplierId= "3", QuantityPerUnit= "12 - 1 lb pkgs.", UnitPrice= "30.00", UnitsInStock= "15", Discontinued= "true" },
new { ProductId= "10", ProductName= "Queso Cabrales", SupplierId= "5", QuantityPerUnit= "1 kg pkg.", UnitPrice= "21.00", UnitsInStock= "22", Discontinued= "false" },
};
ViewBag.DefaultData = data;
return View();
}Column
You can insert columns in one of the following ways:
- Select a column header, right-click it, and choose the required insert option from the context menu.
- Use the
insertColumnmethod to insert columns programmatically after the Spreadsheet is rendered.
The following code example shows the options for inserting columns in the spreadsheet.
@Html.EJS().Spreadsheet("spreadsheet").ShowSheetTabs(false).Created("created").ShowRibbon(false).ShowFormulaBar(false).Sheets(sheet =>
{
sheet.Ranges(ranges =>
{
ranges.DataSource((IEnumerable<object>)ViewBag.DefaultData).StartCell("A2").Add();
}).Columns(column =>
{
column.Width(90).Add();
column.Width(220).Add();
column.Width(90).Add();
column.Width(140).Add();
column.Width(90).Add();
column.Width(100).Add();
column.Width(100).Add();
}).Add();
}).Render()
<script>
function created() {
// Cells model that you are going to update in the inserted 5th column dynamically
var cellsModel = [{ value: 'UnitPrice', style: { fontWeight: 'bold', textAlign: 'center' } }, { value: '18.00' },
{ value: '19.00' }, { value: '10.00' }, { value: '22.00' }, { value: '21.35' }, { value: '25.00' }, { value: '30.00' },
{ value: '21.00' }, { value: '40.00' }, { value: '97.00' }];
// Applies style formatting before inserting the column
this.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A2:G2');
// inserting a empty column at 0th index
this.insertColumn();
// inserting 1 column at the 5th index with column model
this.insertColumn([{ index: 5, width: 90 }]);
var rowIndex = 1;
// Updating the 5th column data
cellsModel.forEach((cell) => {
this.updateCell(cell, ej.spreadsheet.getCellAddress(rowIndex, 5)); rowIndex++;
});
// Applies style formatting after the columns are inserted
this.cellFormat({ textAlign: 'center' }, 'B3:B12');
this.cellFormat({ textAlign: 'center' }, 'D3:D12');
this.cellFormat({ textAlign: 'center' }, 'F3:H12');
}
</script>public ActionResult Index()
{
List<object> data = new List<object>()
{
new { ProductId= "1", ProductName= "Chai", SupplierId= "1", QuantityPerUnit= "10 boxes x 20 bags", UnitsInStock= "39", Discontinued= "false" },
new { ProductId= "2", ProductName= "Chang", SupplierId= "1", QuantityPerUnit= "24 - 12 oz bottles", UnitsInStock= "17", Discontinued= "true" },
new { ProductId= "3", ProductName= "Aniseed Syrup", SupplierId= "1", QuantityPerUnit= "12 - 550 ml bottles", UnitsInStock= "13", Discontinued= "false" },
new { ProductId= "4", ProductName= "Chef Anton\'s Cajun Seasoning", SupplierId= "2", QuantityPerUnit= "48 - 6 oz jars", UnitsInStock= "53", Discontinued= "true" },
new { ProductId= "5", ProductName= "Chef Anton\'s Gumbo Mix", SupplierId= "2", QuantityPerUnit= "36 boxes', 'Unit Price", UnitsInStock= "0", Discontinued= "true" },
new { ProductId= "6", ProductName= "Grandma\'s Boysenberry Spread", SupplierId= "3", QuantityPerUnit= "12 - 8 oz jars", UnitsInStock= "120", Discontinued= "false" },
new { ProductId= "7", ProductName= "Uncle Bob\'s Organic Dried Pears", SupplierId= "3", QuantityPerUnit= "12 - 1 lb pkgs.", UnitsInStock= "15", Discontinued= "true" },
new { ProductId= "8", ProductName= "Queso Cabrales", SupplierId= "5", QuantityPerUnit= "1 kg pkg.", UnitsInStock= "22", Discontinued= "false" },
new { ProductId= "9", ProductName= "Northwoods Cranberry Sauce", SupplierId= "3", QuantityPerUnit= "12 - 12 oz jars", UnitsInStock= "6", Discontinued= "false" },
new { ProductId= "10", ProductName= "Mishi Kobe Niku", SupplierId= "4", QuantityPerUnit= "18 - 500 g pkgs.", UnitsInStock= "29", Discontinued= "false" },
};
ViewBag.DefaultData = data;
return View();
}Delete
Delete support provides an option for deleting the rows and columns in the spreadsheet. Use allowDelete property to enable or disable the delete option in Spreadsheet.
You can delete rows or columns in one of the following ways:
- Select the required row or column headers, right-click the selection, and choose the appropriate delete option from the context menu.
- Use the
deletemethod to delete rows or columns programmatically.
The following code example shows the delete operation of rows and columns in the spreadsheet.
@Html.EJS().Spreadsheet("spreadsheet").AllowDelete(true).Created("created").ShowRibbon(false).ShowFormulaBar(false).Sheets(sheet =>
{
sheet.Name("Sheet1").Ranges(ranges =>
{
ranges.DataSource((IEnumerable<object>)ViewBag.DefaultData).Add();
}).Columns(column =>
{
column.Width(90).Add();
column.Width(220).Add();
column.Width(90).Add();
column.Width(140).Add();
column.Width(90).Add();
column.Width(100).Add();
column.Width(100).Add();
}).Add();
sheet.Name("Sheet2").Ranges(ranges =>
{
ranges.DataSource((IEnumerable<object>)ViewBag.DefaultData).Add();
}).Columns(column =>
{
column.Width(90).Add();
column.Width(220).Add();
column.Width(90).Add();
column.Width(140).Add();
column.Width(90).Add();
column.Width(100).Add();
column.Width(100).Add();
}).Add();
}).Render()
<script>
function created() {
this.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
// deleting the rows from 8th to 10th index. To delete row, the third argument of enum type is passed as 'Row', the last argument specifies the sheet name or index in which the delete operation will perform. By default,active sheet will be considered. It is applicable only for model type Row and Column.
this.delete(8, 10, 'Row', 0); // startIndex, endIndex, Row, sheet index
// deleting the 2nd and 5th indexed columns
this.delete(2, 2, 'Column', 'Sheet2');
this.delete(5, 5, 'Column');
this.delete(0, 0, "Sheet"); // delete the first sheet. sheet index starts from 0
// Applies style formatting after deleted the rows and columns
this.cellFormat({ textAlign: 'center' }, 'A2:A8');
this.cellFormat({ textAlign: 'center' }, 'D2:G8');
}
</script>public ActionResult Index()
{
List<object> data = new List<object>()
{
new { ProductId= "1", ProductName= "Chai", SupplierId= "1", QuantityPerUnit= "10 boxes x 20 bags", UnitPrice= "18.00", UnitsInStock= "39", Discontinued= "false" },
new { ProductId= "2", ProductName= "Chang", SupplierId= "1", QuantityPerUnit= "24 - 12 oz bottles", UnitPrice= "19.00", UnitsInStock= "17", Discontinued= "true" },
new { ProductId= "3", ProductName= "Aniseed Syrup", SupplierId= "1", QuantityPerUnit= "12 - 550 ml bottles", UnitPrice= "10.00", UnitsInStock= "13", Discontinued= "false" },
new { ProductId= "4", ProductName= "Chef Anton\'s Cajun Seasoning", SupplierId= "2", QuantityPerUnit= "48 - 6 oz jars", UnitPrice= "22.00", UnitsInStock= "53", Discontinued= "true" },
new { ProductId= "5", ProductName= "Chef Anton\'s Gumbo Mix", SupplierId= "2", QuantityPerUnit= "36 boxes', 'Unit Price", UnitPrice= "21.35", UnitsInStock= "0", Discontinued= "true" },
new { ProductId= "6", ProductName= "Grandma\'s Boysenberry Spread", SupplierId= "3", QuantityPerUnit= "12 - 8 oz jars", UnitPrice= "25.00", UnitsInStock= "120", Discontinued= "false" },
new { ProductId= "7", ProductName= "Uncle Bob\'s Organic Dried Pears", SupplierId= "3", QuantityPerUnit= "12 - 1 lb pkgs.", UnitPrice= "30.00", UnitsInStock= "15", Discontinued= "true" },
new { ProductId= "8", ProductName= "Queso Cabrales", SupplierId= "5", QuantityPerUnit= "1 kg pkg.", UnitPrice= "21.00", UnitsInStock= "22", Discontinued= "false" },
new { ProductId= "9", ProductName= "Northwoods Cranberry Sauce", SupplierId= "3", QuantityPerUnit= "12 - 12 oz jars", UnitPrice= "21.00", UnitsInStock= "6", Discontinued= "false" },
new { ProductId= "10", ProductName= "Mishi Kobe Niku", SupplierId= "4", QuantityPerUnit= "18 - 500 g pkgs.", UnitPrice= "21.00", UnitsInStock= "29", Discontinued= "true" },
};
ViewBag.DefaultData = data;
return View();
}Hide and show
You can show or hide the rows and columns in the spreadsheet through property binding, method, and context menu.
Row
You can hide or show rows in one of the following ways:
- Use the
hiddenproperty in the row model to hide rows during the initial rendering. - Use the
hideRowmethod to hide or show rows programmatically. Specify the start and end row indexes, and set the finalhideargument tofalseto show hidden rows. - Right-click the row header and choose the required option from the context menu.
Column
You can hide or show columns in one of the following ways:
- Use the
hiddenproperty in the column model to hide columns during the initial rendering. - Use the
hideColumnmethod to hide or show columns programmatically. Specify the start and end column indexes, and set the finalhideargument tofalseto show hidden columns. - Right-click the column header and choose the required option from the context menu.
The following code example demonstrates how to hide and show rows and columns in the Spreadsheet.
@Html.EJS().Spreadsheet("spreadsheet").ShowSheetTabs(false).Created("created").ShowRibbon(false).ShowFormulaBar(false).Sheets(sheet =>
{
sheet.Ranges(ranges =>
{
ranges.DataSource((IEnumerable<object>)ViewBag.DefaultData).Add();
}).Rows(row =>
{
row.Index(2).Hidden(true).Add();
row.Hidden(true).Add();
}).Columns(column =>
{
column.Width(90).Add();
column.Width(220).Add();
column.Width(90).Add();
column.Width(140).Add();
column.Width(90).Add();
column.Width(100).Add();
column.Width(100).Add();
}).Add();
}).Render()
<script>
function created() {
this.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
// Unhide the 2nd index hidden column
this.hideColumn(1, 1, false);
// Unhide the 3rd index hidden row
this.hideRow(3, 3, false);
// Hiding the 6th index column
this.hideColumn(6);
// Hiding the 8th and 9th index row
this.hideRow(8, 9);
this.cellFormat({ textAlign: 'center' }, 'D2:H11');
}
</script>public ActionResult Index()
{
List<object> data = new List<object>()
{
new { ProductId= "1", ProductName= "Chai", SupplierId= "1", QuantityPerUnit= "10 boxes x 20 bags", UnitPrice= "18.00", UnitsInStock= "39", Discontinued= "false" },
new { ProductId= "2", ProductName= "Chang", SupplierId= "1", QuantityPerUnit= "24 - 12 oz bottles", UnitPrice= "19.00", UnitsInStock= "17", Discontinued= "true" },
new { ProductId= "3", ProductName= "Aniseed Syrup", SupplierId= "1", QuantityPerUnit= "12 - 550 ml bottles", UnitPrice= "10.00", UnitsInStock= "13", Discontinued= "false" },
new { ProductId= "4", ProductName= "Chef Anton\'s Cajun Seasoning", SupplierId= "2", QuantityPerUnit= "48 - 6 oz jars", UnitPrice= "22.00", UnitsInStock= "53", Discontinued= "true" },
new { ProductId= "5", ProductName= "Chef Anton\'s Gumbo Mix", SupplierId= "2", QuantityPerUnit= "36 boxes', 'Unit Price", UnitPrice= "21.35", UnitsInStock= "0", Discontinued= "true" },
new { ProductId= "6", ProductName= "Grandma\'s Boysenberry Spread", SupplierId= "3", QuantityPerUnit= "12 - 8 oz jars", UnitPrice= "25.00", UnitsInStock= "120", Discontinued= "false" },
new { ProductId= "7", ProductName= "Uncle Bob\'s Organic Dried Pears", SupplierId= "3", QuantityPerUnit= "12 - 1 lb pkgs.", UnitPrice= "30.00", UnitsInStock= "15", Discontinued= "true" },
new { ProductId= "8", ProductName= "Queso Cabrales", SupplierId= "5", QuantityPerUnit= "1 kg pkg.", UnitPrice= "21.00", UnitsInStock= "22", Discontinued= "false" },
new { ProductId= "9", ProductName= "Northwoods Cranberry Sauce", SupplierId= "3", QuantityPerUnit= "12 - 12 oz jars", UnitPrice= "21.00", UnitsInStock= "6", Discontinued= "false" },
new { ProductId= "10", ProductName= "Mishi Kobe Niku", SupplierId= "4", QuantityPerUnit= "18 - 500 g pkgs.", UnitPrice= "21.00", UnitsInStock= "29", Discontinued= "true" },
};
ViewBag.DefaultData = data;
return View();
}Size
Use the setRowsHeight and setColumnsWidth methods to change the size of rows and columns in the Spreadsheet.
Row
You can change the height of single or multiple rows by using the setRowsHeight method.
You can provide the following type of ranges to the method:
- Single-row range:
['2:2'] - Multiple-row range:
['1:100'] - Multiple rows with discontinuous range:
['1:10', '15:25', '30:40'] - Multiple rows with different sheets:
[Sheet1!1:50, 'Sheet2!1:50', 'Sheet3!1:50']
The following code example shows how to change the height for single/multiple rows in the spreadsheet.
@Html.EJS().Spreadsheet("spreadsheet").Created("created").Sheets(sheet =>
{
sheet.Ranges(ranges =>
{
ranges.DataSource((IEnumerable<object>)ViewBag.DefaultData).Add();
}).Add();
}).Render()
<script>
function created() {
// To change height for single row
this.setRowsHeight(40, ['2']);
// To change height for multiple rows
this.setRowsHeight(40, ['4:8', '10:12']);
}
</script>public ActionResult Index()
{
List<object> data = new List<object>()
{
new { ProductId= "1", ProductName= "Chai", SupplierId= "1", QuantityPerUnit= "10 boxes x 20 bags", UnitPrice= "18.00", UnitsInStock= "39", Discontinued= "false" },
new { ProductId= "2", ProductName= "Chang", SupplierId= "1", QuantityPerUnit= "24 - 12 oz bottles", UnitPrice= "19.00", UnitsInStock= "17", Discontinued= "true" },
new { ProductId= "3", ProductName= "Aniseed Syrup", SupplierId= "1", QuantityPerUnit= "12 - 550 ml bottles", UnitPrice= "10.00", UnitsInStock= "13", Discontinued= "false" },
new { ProductId= "4", ProductName= "Chef Anton\'s Cajun Seasoning", SupplierId= "2", QuantityPerUnit= "48 - 6 oz jars", UnitPrice= "22.00", UnitsInStock= "53", Discontinued= "true" },
new { ProductId= "5", ProductName= "Chef Anton\'s Gumbo Mix", SupplierId= "2", QuantityPerUnit= "36 boxes', 'Unit Price", UnitPrice= "21.35", UnitsInStock= "0", Discontinued= "true" },
new { ProductId= "6", ProductName= "Grandma\'s Boysenberry Spread", SupplierId= "3", QuantityPerUnit= "12 - 8 oz jars", UnitPrice= "25.00", UnitsInStock= "120", Discontinued= "false" },
new { ProductId= "7", ProductName= "Uncle Bob\'s Organic Dried Pears", SupplierId= "3", QuantityPerUnit= "12 - 1 lb pkgs.", UnitPrice= "30.00", UnitsInStock= "15", Discontinued= "true" },
new { ProductId= "8", ProductName= "Queso Cabrales", SupplierId= "5", QuantityPerUnit= "1 kg pkg.", UnitPrice= "21.00", UnitsInStock= "22", Discontinued= "false" },
new { ProductId= "9", ProductName= "Northwoods Cranberry Sauce", SupplierId= "3", QuantityPerUnit= "12 - 12 oz jars", UnitPrice= "21.00", UnitsInStock= "6", Discontinued= "false" },
new { ProductId= "10", ProductName= "Mishi Kobe Niku", SupplierId= "4", QuantityPerUnit= "18 - 500 g pkgs.", UnitPrice= "21.00", UnitsInStock= "29", Discontinued= "true" },
};
ViewBag.DefaultData = data;
return View();
}Column
You can change the width of single or multiple columns by using the setColumnsWidth method.
You can provide the following type of ranges to the method:
- Single-column range:
['F:F'] - Multiple-column range:
['A:F'] - Multiple columns with discontinuous range:
['A:C', 'G:I', 'K:M'] - Multiple columns with different sheets:
[Sheet1!A:H, 'Sheet2!A:H', 'Sheet3!A:H']
The following code example shows how to change the width for single/multiple columns in the spreadsheet.
@Html.EJS().Spreadsheet("spreadsheet").Created("created").Sheets(sheet =>
{
sheet.Ranges(ranges =>
{
ranges.DataSource((IEnumerable<object>)ViewBag.DefaultData).Add();
}).Add();
}).Render()
<script>
function created() {
// To change width of single column
this.setColumnsWidth(100, ['F']);
// To change width of multiple columns
this.setColumnsWidth(120, ['A:C', 'G:I', 'K:M']);
}
</script>public ActionResult Index()
{
List<object> data = new List<object>()
{
new { ProductId= "1", ProductName= "Chai", SupplierId= "1", QuantityPerUnit= "10 boxes x 20 bags", UnitPrice= "18.00", UnitsInStock= "39", Discontinued= "false" },
new { ProductId= "2", ProductName= "Chang", SupplierId= "1", QuantityPerUnit= "24 - 12 oz bottles", UnitPrice= "19.00", UnitsInStock= "17", Discontinued= "true" },
new { ProductId= "3", ProductName= "Aniseed Syrup", SupplierId= "1", QuantityPerUnit= "12 - 550 ml bottles", UnitPrice= "10.00", UnitsInStock= "13", Discontinued= "false" },
new { ProductId= "4", ProductName= "Chef Anton\'s Cajun Seasoning", SupplierId= "2", QuantityPerUnit= "48 - 6 oz jars", UnitPrice= "22.00", UnitsInStock= "53", Discontinued= "true" },
new { ProductId= "5", ProductName= "Chef Anton\'s Gumbo Mix", SupplierId= "2", QuantityPerUnit= "36 boxes', 'Unit Price", UnitPrice= "21.35", UnitsInStock= "0", Discontinued= "true" },
new { ProductId= "6", ProductName= "Grandma\'s Boysenberry Spread", SupplierId= "3", QuantityPerUnit= "12 - 8 oz jars", UnitPrice= "25.00", UnitsInStock= "120", Discontinued= "false" },
new { ProductId= "7", ProductName= "Uncle Bob\'s Organic Dried Pears", SupplierId= "3", QuantityPerUnit= "12 - 1 lb pkgs.", UnitPrice= "30.00", UnitsInStock= "15", Discontinued= "true" },
new { ProductId= "8", ProductName= "Queso Cabrales", SupplierId= "5", QuantityPerUnit= "1 kg pkg.", UnitPrice= "21.00", UnitsInStock= "22", Discontinued= "false" },
new { ProductId= "9", ProductName= "Northwoods Cranberry Sauce", SupplierId= "3", QuantityPerUnit= "12 - 12 oz jars", UnitPrice= "21.00", UnitsInStock= "6", Discontinued= "false" },
new { ProductId= "10", ProductName= "Mishi Kobe Niku", SupplierId= "4", QuantityPerUnit= "18 - 500 g pkgs.", UnitPrice= "21.00", UnitsInStock= "29", Discontinued= "true" },
};
ViewBag.DefaultData = data;
return View();
}Change text in column headers
Use the beforeCellRender event to change the column-header text. In the event handler, identify column-header elements using the e-header-cell class and update their displayed text value.
The following code example shows how to change the text in the column headers.
@Html.EJS().Spreadsheet("spreadsheet").BeforeCellRender("beforeCellRender").Render()
<script>
function beforeCellRender(args) {
// Condition to check whether the rendered element is header cell.
if (
args.colIndex >= 0 &&
args.colIndex <= 10 &&
args.element.classList.contains('e-header-cell')
) {
var text = 'custom header ' + args.colIndex.toString();
// Add the custom text to the innerText of the element.
args.element.innerText = text;
}
}
</script>Limitations of insert and delete operations
Insert and delete operations have the following limitations:
- Inserting rows or columns within formatted ranges has limited support.
- Inserting rows or columns within data-validation ranges has limited support.
- Inserting rows or columns within conditionally formatted ranges has limited support.
- Inserting or deleting rows or columns within filtered ranges has limited support.