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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How do I correctly return select list items from WebAPI?

Thread ID:





132544 Sep 7,2017 03:31 PM UTC Sep 8,2017 12:15 PM UTC ASP.NET Core 1
Tags: Grid
Chiara De Acetis
Asked On September 7, 2017 03:31 PM UTC

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.

Mani Sankar Durai [Syncfusion]
Replied On 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. 


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