Cell Template in Spreadsheet Control
4 Jan 202321 minutes to read
Cell Template is used for adding HTML elements into Spreadsheet. You can add the cell template in spreadsheet by using the template property and specify the address using the address property inside the ranges property. You can customize the HTML elements similar to Syncfusion components (TextBox, DropDownList, RadioButton, MultiSelect, DatePicker etc) by using the beforeCellRender event. In this demo, Cell template is applied to C2:C9 and instantiated with HTML input components like TextBox, RadioButton, TextArea. You need to bind the events to perform any operations through HTML elements or Syncfusion components. Here, we have added change event in to the MultiSelect control, and we have updated the selected data into the spreadsheet cell through that change event.
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();
}