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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How To Create A Dropdown Using A Web API

Thread ID:





150359 Jan 3,2020 08:19 AM UTC Jan 14,2020 09:31 AM UTC ASP.NET Core - EJ 2 3
Tags: DataGrid
Asked On January 6, 2020 10:17 AM UTC

Hi , 
I'm trying to add a dropdown to grid and using Web Api to get data in databass,
 i've CRUD and i want to use create dialog at dropdown 
i've a grid defined as follow:

    public class HomeApiController : Controller
        private ICountryService _service;
        private readonly IMapper _mapper;
        public HomeApiController(ICountryService service, IMapper mapper)
            this._service = service;
            this._mapper = mapper;

        public IActionResult CountryDropDownList()
            var data = _service.getCountryList();
            return Json(data);

   public List getCountryList()
            var list =
             from a in _unitOfWork.GetRepository().Get()
             join b in _unitOfWork.GetRepository().Get() on a.Country equals b.Country
             select new CountryViewModel
                 CityNo = b.CityNo,
                 Country = b.CityNo.ToString() + " " + a.Country

            return list;

however I got this error

What i'm doing wrong?


Balaji Sekar [Syncfusion]
Replied On January 7, 2020 12:37 PM UTC

Greetings from Syncfusion forum. 
We have validated and prepared a sample as per your requirement “Dropdown Using A Web API ” but unfortunately were unable to reproduce it from our end. Please refer to the below code and sample link. 
    var DropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = new Syncfusion.EJ2.DataManager() { Url = "/api/Employee", Adaptor = "WebApiAdaptor" }, Query = "new ej.data.Query()", Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "EmployeeID", Text = "EmployeeID" }}; 
<ejs-grid id="Grid" allowPaging="true . . . .> 
    <e-data-manager id="myData" url="/api/Orders" adaptor="WebApiAdaptor" crossDomain="true"></e-data-manager> 
    <e-grid-editSettings allowAdding="true" allowDeleting="true"  showDeleteConfirmDialog="true" allowEditing="true" mode="Dialog"></e-grid-editSettings> 
. .  . 
        <e-grid-column field="EmployeeID" headerText="Employee Name" editType="dropdownedit" edit="new {@params = DropDownList }" width="150"></e-grid-column> 
. . .  
Still facing the issue, please share the below details. 
  1. Share your NuGet version.
  2. Share your application.
  3. Facing issue in any specific browser ?
  4. Share your Syncfusion package version.
  5. Video demonstration.
  6. Reproduce the issue in above sample.
 Please get back to us, if you need any further assistance. 
Balaji Sekar. 

Replied On January 13, 2020 08:10 AM UTC

Hi Balaji Sekar,
Thank you for your reply. So far I was able to implement the described code.
However, I have other questions.
The filter type I want to use the grid is a checkbox ,but I don't need the search.
How can i remove it?

Dhivya Rajendran [Syncfusion]
Replied On January 14, 2020 09:31 AM UTC

Hi SHIH,  
You can hide the search bar of CheckBox filter by using the following CSS 

#Grid span.e-searchbox.e-fields { 
1.           display: none; 

Please find the screenshot for your reference. 


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



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon