Set focus and expand ComboBox column items list after add new row

Question

Hi I have this datagrid, and need to set cursor and expand list of items in ComboBox, after user clicked add new row (Dodaj). I don't want to have to click on a cell and then have the list expand. I want it to work automatically.Is this possible?

Below is picture, what i want to have as final result.Attachment: Screenshot_20210728_at_16.30.10_cf8a8c59.zip

Thiyagu Subramani · Answer

Hi Tomasz,

Greeting from Syncfusion support.

Based on your shared information we suspect that you want to open list popup automatically when hovering the cursor without clicking the cell. Using showPopup method we have achieved this requirement in the EmployeeID column by adding mouseover event listener to the Grid DOM element. Please refer to the below code.

<ejs-grid id="Grid" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">

. . . . . . . .

<e-grid-columns>

<e-grid-column field="EmployeeID" headerText="Employee ID" foreignKeyField="EmployeeID" foreignKeyValue="ShipName" . . . . . . width="120"></e-grid-column>

. . . . . . . . . . .

</e-grid-columns>

</ejs-grid>

document.getElementById('Grid').addEventListener('mouseover', function (args) {

if (args.target.classList.contains('e-ddl')) {

if (args.target.getElementsByTagName('input')[0].getAttribute('name') === 'EmployeeID') {

args.target.getElementsByTagName('input')[0].ej2_instances[0].showPopup();

}

});

</script>

API: https://ej2.syncfusion.com/documentation/api/combo-box/#showpopup

: https://ej2.syncfusion.com/documentation/api/drop-down-list#showpopup

Note: You mentioned that you are using comboBox in your edit mode, but we didn’t find any comboBox rendering code in MaterialTradeNameId column. By default in EJ2 Grid dropdown will create in edit mode, if we are using foreign key column in Grid So, we provided the solution for dropdown editing and it will be suitable for comboBox also please ensure it. If you need to render comboBox instead of dropdown in edit mode, please revert to us with detailed code snippets.

To create custom components in edit mode, please refer the below link,

UG: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-template

Please get back to us, if you need any further assistance.

Regards,

Thiyagu S

Tomasz · Answer

HiThe solution given is interesting, but unfortunately it does not exhaust the scenario I need. I would like that after clicking "add" from the toolbar, when a new row is added to the table, the system automatically, without clicking on this record, or hovering over it, opens the cell for editing and expand the list of prompts in the ComboBox.In my code I use custom ComboBox, below the code:<e-grid-column field="MaterialTradeNameId"               edit="new {@params = new ComboBoxFiltered()}"               type="number"               headerText="Materiał"               dataSource="@Model.MaterialViewModels"               foreignKeyField="MaterialTradeNameId"               foreignKeyValue="Name">    e-grid-column>using Syncfusion.EJ2.DropDowns;namespace Components.Syncfusion{    public class ComboBoxFiltered: ComboBox    {        public ComboBoxFiltered()        {            AllowFiltering = true;            FilterType = FilterType.Contains;            BeforeOpen = "beforeOpenComboBoxFiltered";            ShowClearButton = true;        }                public static ComboBoxFiltered GetComboBoxFiltered=> new ComboBoxFiltered();    }}Are you able to help me?

Praveenkumar Gajendiran · Answer

Hi Tomasz,Thanks for your update. 
Based on your query and provided information, we could see that your requirement is to open the ComboBox popup initially while using batch editing feature in Grid. For this, we suggest you to call the ComboBox’s showPopup method in the ComboBox’s created event as demonstrated in the below code example,Code Example: 




let comboBoxObj: ComboBox = new ComboBox({ 
        popupHeight: '230px', 
        index: 2, 
        placeholder: 'Select a game', 
        created: () => { 
            comboBoxObj.showPopup(); 
          }, 
    }); 
  
Please get back to us if you need further assistance. 
  
Regards 
Praveenkumar G

Tomasz · Answer

Nice, but how to use this in .Net Core?

Praveenkumar Gajendiran · Answer

Hi Tomasz,Thanks for your update. Based on your query, we would like to inform you that by default in EJ2 Grid, we have the below list of in-built edit type’s only in the Grid, TextBox component for string data type. NumericTextBox component for integers, double, and decimal data types. DropDownList component to show all unique values related to that field. CheckBox component for boolean data type. DatePicker component for date data type. DateTimePicker component for date time data type. Please find the code example for enable inbuilt edit type < CustomerID" headerText="Customer ID" type="string" width="120">

Documentation Link: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-type-and-its-paramsWe suspect that your requirement is to use the ComboBox component to edit the column, but we are unable to render the ComboBox directly (no inbuilt editor support for ComboBox) for this we suggested you use cellEditTemplate feature of Grid to achieve your requirement. The cell edit template is used to add a custom component for a particular column by invoking the create, write, read, destroy functions. create function is used to create the element at time of initialization. write function is used to create custom component or assign default value at time of editing. read function is used to read the value from component at time of save. destroy function is used to destroy the component By using this feature, we can render the ComboBox component to edit the field. The create, write, read and destroy functions will be triggered for each time When you editing a row. Please refer the below documentation for more information on cellEditTemplate feature of Grid. Documentation Link: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-template Please get back to us if you need further assistance.Regards,Praveenkumar G