How do I correctly return select list items from WebAPI?

[Chiara De Acetis]

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-columns>
                    <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>
                </e-columns>
</ej-grid>

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:

        [HttpGet]
        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
        };
        lista3.Add(item);
    }

}

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]

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, 

Link: http://www.syncfusion.com/downloads/support/forum/132544/ze/ASP.NETCoreGrid-609661925 

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 

[Home/Index.cshtml] 

<ej-grid id="Grid" allow-paging="true"> 

    <e-datamanager url="/api/Orders" adaptor="WebApiAdaptor"></e-datamanager> 

... 

   <e-columns> 

        ... 

        <e-column field="EmployeeID" header-text="Employee ID" width="80"> 

            <e-edit-template create="create" read="read" write="write"></e-edit-template> 

        </e-column> 

       </e-columns> 

</ej-grid> 

<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"); 

    } 

</script> 

[ValuesController] 

  // GET: api/values 

        [HttpGet] 

        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 

Link: https://help.syncfusion.com/aspnet-core/grid/editing#cell-edit-template 

Please let us know if you need further assistance 

Regards, 

Manisankar Durai.