Articles in this section

How to dynamically add the cell templates after importing the excel file in the JavaScript Spreadsheet component?

 

This article explains how to dynamically add the cell templates after importing the excel file into a JavaScript Spreadsheet.

 

Using beforeCellRender and openComplete events, you can dynamically add the cell templates after importing the Excel file in a spreadsheet. In an openComplete event, you have to provide your template element (like input, checkbox, radio button, etc.) to the sheet.ranges property. You can access that template element in the beforeCellRender event and perform your customization, as shown in the example code below.

 

[HTML]

 

  <div id="spreadsheet"></div>

 

[TS]

 

//Initialize Spreadsheet component.
let isImport: boolean = false;
let spreadsheet: Spreadsheet = new Spreadsheet({
  openUrl:
    'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open',
  saveUrl:
    'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save',
  //Initializing the input element as a template before rendering the cell.
  beforeCellRender: (args: CellRenderEventArgs): void => {
    // Condition for handling imported files alone.
    if (
      spreadsheet.activeSheetIndex === 0 &&
      isImport == true &&
      !args.element.classList.contains('e-header-cell')
    ) {
      let address: number[] = getRangeIndexes(args.address);
      // Render templates dynamically for A1:A100 range cells.
      if (address[1] == 0 && address[3] < 100) {
        let target: HTMLInputElement = args.element.firstElementChild;
         // Convert the checkbox element as an EJ2 checkbox component. 
        new CheckBox(
          {
            label: 'True',
            checked: true,
            // Change event for EJ2 checkbox and you can pass an extra parameter as a second argument.
            change: (args: ChangeEventArgs) => onChange(args, 'parameter'),
          },
          target
        );
      }
    }
  },
  // Bind the input element in the template property after importing the excel file in RangeModel.
  openComplete: (args: object): void => {
    isImport = true;
    let ranges: RangeModel = [
      {
        template: '<input type="checkbox" />',
        address: 'A1:A100', // Specify the range you want.
      },
    ];
    // Assign the template rangeModel to the range’s property.
    spreadsheet.sheets[0].ranges = ranges;
  },
});
// Function to handle the CheckBox change event.
function onChange(args, parameter):void {
  // Checked the state of the checkbox.
  console.log(args.checked);
  // Get additional parameter passed to this event
  console.log(parameter);
  // You can do your customization here.
}
spreadsheet.appendTo('#spreadsheet');
 

 

Refer to the working sample for additional details and implementation: Sample


Sample Output:

 

cell template in JavaScript Spreadsheet

 

See Also

https://help.syncfusion.com/document-processing/excel/spreadsheet/javascript-es6/open-save

https://ej2.syncfusion.com/documentation/spreadsheet/template/

 

Conclusion

We hope you enjoyed learning about how to dynamically add the cell templates after importing the excel file.

You can refer to our JavaScript Spreadsheet’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our JavaScript Spreadsheet examples to understand how to present and manipulate data. 

For current customers, you can check out our JavaScript 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 JavaScript Spreadsheet and other JavaScript components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forumsBoldDesk Support, or feedback portal. We are always happy to assist you!

 

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Access denied
Access denied