How To Create A Dropdown Using A Web API

[SHIH Mina]

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

[Balaji Sekar]

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> 

 

 

 

Sample link :  https://www.syncfusion.com/downloads/support/forum/150359/ze/TestSampleWebapi942029916 

 

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. 

[SHIH Mina]

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]

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