How to add DropDownList programmatically to cell

Question

In the EJ2 spreadsheet documentation, I see how you can use a cell template to render a drop down list control in a cell on creation, but how would you do that AFTER the spreadsheet has already been created? Let's say that I wanted to allow the user to insert a drop down control with options "High", "Medium" and "Low" into the current selected cell. How would I write javascript to add this?

into the current selected cell.  How would I write javascript to add this?

Gayathri KarunaiAnandam · Answer

Hi John, 

We have prepared a sample based on your requirement by using the getCell method in a button click. Please check the code snippet. 

Code: 





document.getElementById('list').onclick = () => { 
  let experience: string[] = ['High', 'Medium', 'Low']; 
  let cell = getCellIndexes(spreadsheet.getActiveSheet().activeCell); 
  new DropDownList( 
    { 
      placeholder: 'Level', 
      dataSource: experience, 
      cssClass: 'cell-dropdown', 
    }, 
    spreadsheet.getCell(cell[0], cell[1]) 
  ); 
  spreadsheet.setRowHeight(36, cell[0]); 
}; 


For your reference, please check the below sample link. 

Sample: https://stackblitz.com/edit/2idfge?file=index.ts 

Please check and get back to us, if you need further assistance. 

Regards, 
Gayathri K

John · Answer

Thank you for your response and your sample link. The example does render a dropdownlist in a cell as requested. However, the result is not exactly what I had in mind.If you inspect a "normal" cell, you will see that it is just a element in a row. But when the user begins to edit the cell, it turns into a

. This acts like an inplace editor as the div is contenteditable="true". Is there a way to template this inplace editor, as a dropdown list?In other words, the cells should display their values as normal cells with whatever cell formatting has been applied. However, when the cell enters into edit mode, I would like the inplace editor to render as a dropdownlist.Is there an event or events that I can handle that will allow this behavior?Normal mode: Edit mode:

Gayathri KarunaiAnandam · Answer

Hi John,We are validating the reported
scenario. We need to check more on this. So, we will update further details within
two business days(May 30,2022).Regards,Gayathri K

Gayathri KarunaiAnandam · Answer

Hi John,We have analyzed your requirements and we hope that data
validation support in spreadsheet will meet your requirement. Please check the
below links to know about data validation,https://ej2.syncfusion.com/documentation/spreadsheet/cell-range/#data-validationhttps://ej2.syncfusion.com/demos/#/bootstrap5/spreadsheet/data-validation.htmlWe have actionBegin event which triggers for
Spreadsheet actions (such as editing, formatting, sorting etc..)  and cellEdit
event which triggers when a cell is edited.https://ej2.syncfusion.com/documentation/api/spreadsheet/#actionbeginhttps://ej2.syncfusion.com/documentation/api/spreadsheet/#celleditIf we misunderstood your requirement, please share more
details about your use case and we will check and update promptly.Regards,Gayathri K

John · Answer

Thank you for your response and for the documentation links to the events. However, I am afraid that I will need a little more info on the best method to implement my desired behavior.

Here is my use case (current state):

I have a spreadsheet that contains many rows and columns. One of the columns is for a product code and another column is for an item price. Users can freely type into the product code cells and validation is performed, If a valid product code was input, the price is looked up and populated into the price column on the same row. If an invalid product code is entered, the old value is restored. This works fine today by using the "actionComplete" event.

Now, here is what I'd like to change (future state):

Instead of having the user enter the product code manually, I would like to provide a dropdown list so that they can select a product code. This list should only be visible when the cell is in "edit mode". The cell should display as normal, otherwise. If you look at my prior screen mockups, you can see my desired behavior.

Your initial suggestion and stackblitz example rendered a dropdown list on every cell, even when the cell was not being edited. This is not what I desire. I only want to render a drop down to one cell at a time and only when the cell has the focus. (It would also be nice if the row size didn't need to increase, as in your example, as my typical use case has 60-100 rows of these product codes).

Where I need guidance is in how to implement an actionBegin event handler that will cause the cell to render (temporarily) as a dropdown. Can you create a simple example of this?

I have thought about alternatives like using a popup menu, but I imagine that there is something a bit more elegant than that.

Thank you so much for your help on this and on my other forum questions. I am very close to finishing a large project using your EJ2 libraries and have just a few loose ends to resolve in order to create a great user experience. I look forward to your response.

Gayathri KarunaiAnandam · Answer

Hi John,We have checked your requirements. We can achieve by using
list validation. We can apply dropdownlist to the cells by using applyDataValidation
method. It will visible only on cell selection or else it shows as normal cell
value. We have prepared a sample in which we have applied validation for A2:A10
rows. Please check the code snippet and sample,

spreadsheet.addDataValidation(
        {
          type: 'List',
          inCellDropDown: true,
          value1: '1001,1002,1003,1004,1005,1006,1007,1008,1009,1010',
        },
        'A2:A10'
      );

Sample: https://stackblitz.com/edit/yhas15?file=default-data.json,index.tsUI output:API: https://ej2.syncfusion.com/documentation/api/spreadsheet/#adddatavalidationPlease let us know, if this meets your requirement.Regards,Gayathri K