Cell Template in ASP.NET Core Spreadsheet Control
24 Jul 202621 minutes to read
Cell Template allows you to add HTML elements to the Spreadsheet. Use the template property to define a cell template and the address property within ranges to specify where the template is applied.
Use the beforeCellRender event to further customize the HTML elements or initialize Syncfusion components within templated cells. You can initialize components such as TextBox, DropDownList, RadioButton, MultiSelect, DatePicker, and TextArea.
In the following example, a cell template is applied to the C2:C9 range. Bind events to perform operations through the HTML elements or Syncfusion components. The MultiSelect change event writes the selected value to the corresponding Spreadsheet cell.
The following code example demonstrates how to apply a cell template, initialize components in the templated cells, and handle component events.
The following code example describes the above behavior.
<ejs-spreadsheet id="spreadsheet" showRibbon="false" showFormulaBar="false" allowEditing="false" created="createdHandler" beforeSelect="beforeSelectHandler" beforeCellRender="beforeCellRenderHandler">
<e-spreadsheet-scrollsettings enableVirtualization="false" isFinite="true"></e-spreadsheet-scrollsettings>
<e-spreadsheet-sheets>
<e-spreadsheet-sheet name="Registration Form" rowCount="40" colCount="30" showGridLines="false">
<e-spreadsheet-rows>
<e-spreadsheet-row height="55">
<e-spreadsheet-cells>
<e-spreadsheet-cell index="1" value="Interview Registration Form">
<e-spreadsheet-cellstyle fontWeight="Bold" textAlign="Center" verticalAlign="Middle" textDecoration="Underline" fontSize="12pt"></e-spreadsheet-cellstyle>
</e-spreadsheet-cell>
</e-spreadsheet-cells>
</e-spreadsheet-row>
<e-spreadsheet-row height="45">
<e-spreadsheet-cells>
<e-spreadsheet-cell index="1" value="Name">
</e-spreadsheet-cell>
</e-spreadsheet-cells>
</e-spreadsheet-row>
<e-spreadsheet-row height="45">
<e-spreadsheet-cells>
<e-spreadsheet-cell index="1" value="Date of Birth:">
</e-spreadsheet-cell>
</e-spreadsheet-cells>
</e-spreadsheet-row>
<e-spreadsheet-row height="45">
<e-spreadsheet-cells>
<e-spreadsheet-cell index="1" value="Gender:">
</e-spreadsheet-cell>
</e-spreadsheet-cells>
</e-spreadsheet-row>
<e-spreadsheet-row height="45">
<e-spreadsheet-cells>
<e-spreadsheet-cell index="1" value="Year of Experience:">
</e-spreadsheet-cell>
</e-spreadsheet-cells>
</e-spreadsheet-row>
<e-spreadsheet-row height="45">
<e-spreadsheet-cells>
<e-spreadsheet-cell index="1" value="Areas of Interest:">
</e-spreadsheet-cell>
</e-spreadsheet-cells>
</e-spreadsheet-row>
<e-spreadsheet-row height="45">
<e-spreadsheet-cells>
<e-spreadsheet-cell index="1" value="Mobile Number:">
</e-spreadsheet-cell>
</e-spreadsheet-cells>
</e-spreadsheet-row>
<e-spreadsheet-row height="45">
<e-spreadsheet-cells>
<e-spreadsheet-cell index="1" value="Email:">
</e-spreadsheet-cell>
</e-spreadsheet-cells>
</e-spreadsheet-row>
<e-spreadsheet-row height="82">
<e-spreadsheet-cells>
<e-spreadsheet-cell index="1" value="Address:">
</e-spreadsheet-cell>
</e-spreadsheet-cells>
</e-spreadsheet-row>
</e-spreadsheet-rows>
<e-spreadsheet-columns>
<e-spreadsheet-column index="1" width="190"></e-spreadsheet-column>
<e-spreadsheet-column width="350"></e-spreadsheet-column>
</e-spreadsheet-columns>
<e-spreadsheet-ranges>
<e-spreadsheet-range template="<input />" address="C2:C3"></e-spreadsheet-range>
<e-spreadsheet-range template='<div><input type="radio" name="gender" value="male" /><input type="radio" name="gender" value="female"/></div>' address="C4"></e-spreadsheet-range>
<e-spreadsheet-range template="<input />" address="C5:C8"></e-spreadsheet-range>
<e-spreadsheet-range template='<textarea rows="3"/>' address="C9"></e-spreadsheet-range>
<e-spreadsheet-range template='<button class="e-btn e-flat" style="float:right">Add</button>' address="C11"></e-spreadsheet-range>
</e-spreadsheet-ranges>
</e-spreadsheet-sheet>
</e-spreadsheet-sheets>
</ejs-spreadsheet>
<script>
function createdHandler() {
//Applies format to specified range
this.cellFormat({ fontWeight: 'bold' }, 'B2:B9');
}
function beforeSelectHandler(args) {
//Prevents selection
args.cancel = true;
}
function beforeCellRenderHandler(args) {
//Initializing input components before cell rendering
if (this.activeSheetIndex === 0) {
var target = args.element.firstElementChild;
switch (args.address) {
case 'B1':
args.element.colSpan = 2;
break;
case 'C2':
new ej.inputs.TextBox({ placeholder: 'Name' }, target);
break;
case 'C3':
new ej.calendars.DatePicker({ placeholder: 'DOB', }, target);
break;
case 'C4':
new ej.buttons.RadioButton({ label: 'Male' }, args.element.firstElementChild.firstElementChild);
new ej.buttons.RadioButton({ label: 'Female' }, args.element.firstElementChild.lastElementChild);
break;
case 'C5':
var experience = ['0 - 1 year', '1 - 3 years', '3 - 5 years', '5 - 10 years'];
new ej.dropdowns.DropDownList({
placeholder: 'Experience',
dataSource: experience
}, target);
break;
case 'C6':
var languages = ['JAVA', 'C#', 'SQL'];
new ej.dropdowns.MultiSelect({
showClearButton: false,
placeholder: 'Areas of Interest',
dataSource: languages,
change: function(evt) {
if (args.cell) {
debugger
args.cell.value = evt.value.toString();
} else {
var range = ej.spreadsheet.getRangeIndexes(evt.address);
spreadsheet.sheets[spreadsheet.activeSheetIndex].rows[range[0]].cells[range[1]] = { value: evt.value.toString() };
}
}
}, target);
break;
case 'C7':
new ej.inputs.TextBox({
placeholder: 'Mobile Number'
}, target);
break;
case 'C8':
new ej.inputs.TextBox({
placeholder: 'Email'
}, target);
break;
case 'C9':
new ej.inputs.TextBox(null, target);
break;
}
}
}
</script>
<style>
.e-spreadsheet .e-tab .e-tab-text {
display: inherit;
}
.e-spreadsheet .e-cell .e-radio-wrapper {
margin: 5px;
}
.e-spreadsheet .e-cell .e-radio-wrapper:first-child {
margin-left: 0;
}
.e-spreadsheet .e-cell .e-radio + label .e-label {
color: rgba(0, 0, 0, 0.87);
}
</style>public IActionResult Index()
{
return View();
}