How-to add a dropdown in a spreadsheet programmatically

[Michael Cheung]

Looks like you can only add a drop down in a template using the follow example. Is there a way to do this programmatically and add it to the cell directly?

<e-range :template="'dropdownlist'" address="C5"> <template v-slot:dropdownlist> <div> <ejs-dropdownlist placeholder="Experience" :dataSource="experience"></ejs-dropdownlist> </div> </template>

</e-range>

[Babu Periyasamy]

Hi Michael Cheung,

We have checked your reported query of rendering the Dropdowns inside the Spreadsheet cell programmatically without using the template. And it can be achieved using our beforeCellRender event of our Spreadsheet component. This event triggers before the cells are rendered, allowing us to add a Dropdown component by inserting an input element inside the Spreadsheet cell.

For your convenience, we have prepared the sample and attached below along with the code snippet for your reference,

Code snippet:

beforeCellRender: function (args) {

      if (

        args.colIndex != null &&

        args.rowIndex != null &&

        args.colIndex === 0 &&

        args.rowIndex <= 4

      ) {

        var target = args.element.firstElementChild;

        if (!target) {

          args.element.innerHTML = '';

          var inputEle = document.createElement('input');

          args.element.appendChild(inputEle);

          new DropDownList(

            {

              dataSource: this.normalData,

              value: args.cell ? args.cell.value : '',

              change: (args) => {

                this.onChange(args);

              },

            },

            args.element.firstElementChild

          );

        }

      }

    },

    onChange: function (args) {

      var value = args.value.toString();

      var spreadsheet = this.$refs.spreadsheet;

      var activeSheet = spreadsheet.ej2Instances.getActiveSheet();

      // Get the active sheet model.

      var activeCell = activeSheet.activeCell;

      // Update the cell model.

      spreadsheet.updateCell({ value: value }, activeCell);

    },

Sample link: https://stackblitz.com/edit/flvw47-i29rdi?file=src%2FApp.vue

In the above sample, we have rendered the DropDown for the first 5 cells using the beforeCellRender event and you can render based on your need. And we have restrictions like the autofill, cut/copy/paste will not work with the template in it.

For more information, please refer the below documentation link,

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

Kindly, check the above sample whether your requirement can be met. If not, please share more details about your requirement along with the screenshot. Based on that, we will check and provide you the better solution quickly.