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

How To Create A Dropdown Using A Web API

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:



Controller:
    [Produces("application/json")]
    [Route("api/CountryApi/")]
    public class HomeApiController : Controller
    {
        private ICountryService _service;
        private readonly IMapper _mapper;
        public HomeApiController(ICountryService service, IMapper mapper)
        {
            this._service = service;
            this._mapper = mapper;
        }

    [HttpGet("CountryList")]
        public IActionResult CountryDropDownList()
        {
            var data = _service.getCountryList();
          
            return Json(data);
        }
}

Service:
   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
             }
         ).Distinct().ToList();

            return list;
        }

however I got this error


What i'm doing wrong?

Thanks,
Mina

3 Replies

BS Balaji Sekar Syncfusion Team January 7, 2020 12:37 PM UTC

Hi SHIH, 
 
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-columns> 
. .  . 
        <e-grid-column field="EmployeeID" headerText="Employee Name" editType="dropdownedit" edit="new {@params = DropDownList }" width="150"></e-grid-column> 
. . .  
    </e-grid-columns> 
</ejs-grid> 
 
 
 
 
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. 
 
Regards, 
Balaji Sekar. 



SM SHIH Mina 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?


DR Dhivya Rajendran Syncfusion Team 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. 

Regards, 
R.Dhivya 


Loader.
Live Chat Icon For mobile
Up arrow icon