<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) {
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;
}
}