| layout | post |
|---|---|
| title | Dynamic cell template in Angular Spreadsheet component | Syncfusion |
| description | Render dropdown templates inside cells in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. |
| control | Spreadsheet |
| platform | document-processing |
| documentation | ug |
You can add templates to cells in the Syncfusion Spreadsheet component by dynamically assigning a custom template property directly to individual cells. When a cell has this custom template property, you can use the beforeCellRender event to append the desired template element to the cell.
The following sample demonstrates how to insert a Syncfusion Dropdown component into Spreadsheet cells using this custom template property. Additionally, a custom ribbon item named "DropDown List" is included under a new "Template" ribbon tab. When this ribbon item is selected, the Spreadsheet dynamically inserts a dropdown into the currently active cell.
{% tabs %} {% highlight js tabtitle="app.ts" %} {% include code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/src/app.ts %} {% endhighlight %} {% highlight ts tabtitle="main.ts" %} {% include code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/src/main.ts %} {% endhighlight %} {% endtabs %}
{% previewsample "/document-processing/code-snippet/spreadsheet/angular/dynamic-cell-template-cs1" %}