How To Create A Dropdown Using A Web API

SHIH Mina

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:

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

Reply | Reply with quote

Balaji Sekar [Syncfusion]

Replied On 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>

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

Still facing the issue, please share the below details.

Share your NuGet version.
Share your application.
Facing issue in any specific browser ?
Share your Syncfusion package version.
Video demonstration.
Reproduce the issue in above sample.

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

Regards,

Balaji Sekar.

Reply | Reply with quote

SHIH Mina

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?

Reply | Reply with quote

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.

Regards,

R.Dhivya

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
150359	Jan 3,2020 08:19 AM UTC	Jan 14,2020 09:31 AM UTC	ASP.NET Core - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US