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 do I correctly return select list items from WebAPI?

Hello Syncfusion Team,
I'm trying to fetch dropdown list items for a inline-editing grid.

I'm using ASP.NET Core and WebApi to fetch data.

Here's the view code:

<ej-grid id="FlatGrid" datasource="ViewBag.dataSource" locale="it-IT" allow-paging="true">
                <e-datamanager url="/api/ListeAnagrafiche/@Model.IdLista/ElementiListeAnagrafiche" adaptor="WebApiAdaptor"></e-datamanager>
                <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="Normal"></e-edit-settings>
                <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","delete","update","cancel"}' />
                    <e-column field="id" visible="false" is-primary-key="true"></e-column>
                    <e-column field="codiceElemento" header-text="Cod."></e-column>
                    <e-column field="descrizioneElemento" header-text="Descrizione"></e-column>
                    <e-column field="prezzoIniziale" header-text="Prezzo iniziale" format="{0:N}"></e-column>
                    <e-column field="sconto" header-text="Sconto" format="{0:N}"></e-column>
                    <e-column field="tipoSconto" header-text="Tipo sconto" edit-type="DropdownEdit" ></e-column>

The field "tipoSconto" is an enum, displayed as string. The string is defined via EnumMemberAttribute.
The enum string is displayed correctly.

This is my controller action:
        public async Task<IActionResult> Get(int idLista)
            var queryString = Request.Query;
               //to catch the second call
            if (!string.IsNullOrWhiteSpace(queryString["$select"]))
                ElementoAnagraficaVM elemento = new ElementoAnagraficaVM();
                List<SelectListItem> listaTipi = elemento.TipiSconto;
                var items = listaTipi.Select(x => new DropDownItem { text = x.Text, value = x.Value }).ToList();
                return Ok(items);
            int skip = Convert.ToInt32(queryString["$skip"]);
            int take = Convert.ToInt32(queryString["$top"]);

            var elem = await _data.ElementiAnagrafica(idLista);
            ViewBag.dropObj = elem.FirstOrDefault().TipiSconto;
            return Ok(new { Result = elem.Skip(skip).Take(take), Count = elem.Count });

I've noticed that this action is called two times, first with pagination query strings, then with "$select" query string.
So, I've done the if-check.
Inspecting the Network console in browser, the second call's response result is OK (200) with the following json:
[{"text":"Nessuno","value":"None"},{"text":"Sconto percentuale","value":"Percentuale"},{"text":"Prezzo finale","value":"PrezzoFinale"},{"text":"Sconto a valore","value":"Valore"}]

The dropdown in edit mode is displayed but it's empty. I've attached a screenshot.

My question is as stated: how do I correctly return select list items from WebAPI?

My workaround at the moment is to create the data inside the .cshtml like this:

//the old object (I used a List<SelectListItem> previously)
var lista = (List<SelectListItem>)ViewData["tipiSconto"];

//I understood I need camelCase property, so the conversion of SelectListItem property without initial capital
List<object> lista3 = new List<object>();
    foreach (var t in lista)
        object item = new
            text = t.Text,
            value = t.Value

and in the grid:

<e-column field="tipoSconto" header-text="Tipo sconto" edit-type="DropdownEdit" datasource="lista3" ></e-column>

The problem with this workaround is that, when I'm in edit mode, the cell value will be empty (in a "no value selected" state).

Thank you in advance.

1 Reply

MS Mani Sankar Durai Syncfusion Team September 8, 2017 12:15 PM UTC

Hi Chiara, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we have prepared a sample based on rendering dropdown column in grid and binding the data for dropdown using WebAPI. The sample can be downloaded from the below link, 

In this sample we have bound the data to the grid using WebAPI Adaptor and rendered one dropdown column using editTemplate in grid. Using dataSource property of dropdown we have bound the data for the dropdown from WebAPI.  

Refer the code example 

<ej-grid id="Grid" allow-paging="true"> 
    <e-datamanager url="/api/Orders" adaptor="WebApiAdaptor"></e-datamanager> 
        <e-column field="EmployeeID" header-text="Employee ID" width="80"> 
            <e-edit-template create="create" read="read" write="write"></e-edit-template> 
<script type="text/javascript"> 
    var datasource = ej.DataManager({ 
        url: "/api/Values", 
        adaptor: new ej.WebApiAdaptor() 
//edit template functions in grid 
    function create() { 
        return $("<input>"); 
    function write(args) { 
        args.element.ejDropDownList({ width: "100%", change: "ValChange", dataSource: datasource, fields: { text: "EmployeeID",value: "EmployeeID"},selectedItemIndex: 0 });   //rendering the dropdown for the column 
    function read(args) { 
        return args.ejDropDownList("getSelectedValue"); 

  // GET: api/values 
        public object Get() 
            var employeeID = _content.Orders.Select(s => s.EmployeeID).Distinct().ToList(); 
            return employeeID;          //data returned for dropdown 

Refer the screenshot below 

Refer the documentation link 

Please let us know if you need further assistance 

Manisankar Durai. 

Live Chat Icon For mobile
Up arrow icon