Edit Dialog with dropdown

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.

1 Reply

BS Balaji Sekar Syncfusion Team February 6, 2020 02:44 PM UTC

  
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. 
 
 
 
Please get back to us, if you need any further assistance. 
 
Regards, 
Balaji Sekar. 


Loader.
Up arrow icon