Feed a dropdown in DataGrid

Question

Hi,I’m unable to populate a dropdown while in edit mode inside the DataGrid component. The dropdown only shows the available options if they already exist in the data source. For example, in my employees list I have 10 employees from England and 5 from Spain — so only those two countries appear in the dropdown.However, I need options like Italy to also be available so I can assign an employee to that country.How can I achieve this?My example: https://stackblitz.com/edit/hq9pmht5

Dineshnarasimman Muthu · Answer

Hi
Alexis,Greetings
from Syncfusion Support.We
have reviewed your query regarding adding custom dataSource to the edit form
dropdown when using the foriegnKey Column in the grid. To achieve this, we
recommend utilizing the column.edit property in conjunction with the editParams
configuration. This allows you to define a custom dataset for the dropdown
editor used during editing. We’ve covered this approach in detail in our
documentation, which you can refer to here:Documentation:
https://helpej2.syncfusion.com/vue/documentation/grid/editing/edit-types?cs-save-lang=1&cs-lang=html#provide-custom-data-source-for-dropdownlist-componentThe
code snippet and the sample has been attached for your reference.

<e-column
            field="ShipCountry"
            headerText="Ship Country"
            width="150"
            :edit="dropDownParams"
            editType="dropdownedit"
            :dataSource="paises"
            :validationRules="countryRules"
          />

dropDownParams: {
          params: {
            dataSource: [
              { countryName: 'United States' },
              { countryName: 'Australia' },
              { countryName: 'India' },
              { countryName: 'Portugal' },
              { countryName: 'Brazil' },
            ],
            fields: { text: 'countryName', value: 'countryName' },
            query: new Query(),
            actionComplete: () => false,
          },
        },

Sample: https://stackblitz.com/edit/hq9pmht5-eiovtqqo?file=src%2FApp.vuePlease
get back to us for further assistance.Regards,Dineshnarasimman
M