Edit Dialog with dropdown

[Mina Len]

Hi,

I have a grid with a edit to a dialog template. 

On that dialog template i want some dropdown fields getting data from database.

I want to show the data from DB and the possibility to choose another value from the dropdownlist.  

I found some examples but This is about ej1 Instructions,How can i upgrade it to ej2?

I've a grid defined as follow:

[View]

<ejs-grid id="Grid" allowPaging="true" allowSorting="true" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Search", "ExcelExport"})" actionBegin="actionBegin" actionComplete="actionComplete">

    <e-data-manager url="/api/CountryListApi/CountryList" adaptor="WebApiAdaptor" crossdomain="true"></e-data-manager>

    <e-grid-editSettings allowAdding="true" allowDeleting="true" showDeleteConfirmDialog="true" allowEditing="true" mode="Dialog" template='#dialogtemplate' newRowPosition="Bottom"></e-grid-editSettings>

    <e-grid-columns>

        <e-grid-column field="Country" headerText="Country" width="120" editType="dropdownedit"></e-grid-column>

        <e-grid-column field="City" headerText="City" width="120" allowSorting="false"></e-grid-column>

    </e-grid-columns>

</ejs-grid>

<script id='dialogtemplate' type="text/x-template">

    <div>

        <div id="tab0" class='tab'>

            <div class="form-row">

                <div class="form-group col-md-12">

                    <div class="e-float-input e-control-wrapper">

                        <input id="Country" required name="Country" type="text" value="${if(isAdd)} '' ${else} ${Country} ${/if}" />

                        <span class="e-float-line"></span>

                        <label class="e-float-text e-label-top" for="Country">Country</label>

                    </div>

                </div>

            </div>

        </div>

    </div>

</script>

<script>

  function actionBegin(args) {

        var dataManagerCountry =

ej.DataManager

({

        url: "/api/CountryList",

        adaptor: new ej.UrlAdaptor()

        });

        if (args.requestType === 'add' ||args.requestType === 'beginEdit') {

                $("#Country").

ejDropDownList

({

                dataSource: dataManagerCountry,

                fields: { text: "City", value: "Country" },

            });

}

</script>

[Controller]

        [HttpGet("CountryList")]

        public IActionResult CountryDropDownList()

        {

             var list =

         (

             from rg in _unitOfWork.GetRepository<Country>().Get()

             join rgr in _unitOfWork.GetRepository<City>().Get() on rg.Country equals rgr.Country

             select new CountryViewModel

             {

                 Country = rgr.Country,

                 City = rgr.Country.ToString() + " " + rgr.City

             }

         ).Distinct().ToList();

            return list;

        }

        }

Thanks,

Mina.

[Balaji Sekar]

  

Hi Mina, 

 

Greetings from Syncfusion forum. 

 

By default we have prepared a sample as per requirement “ Edit Dialog with dropdown” in our demos. Please refer the below links. 

 

Demo link:  https://ej2.syncfusion.com/aspnetcore/Grid/DialogTemplate#/material 

 

Documentation link:  https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#dialoginline-template 

 

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

 

Regards, 

Balaji Sekar.