We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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.
Live Chat Icon For mobile
Up arrow icon