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.
Unfortunately, activation email could not send to your email. Please try again.

How do I correctly return select list items from WebAPI?

Thread ID:

Created:

Updated:

Platform:

Replies:

132544 Sep 7,2017 11:31 AM Sep 8,2017 08:15 AM ASP.NET Core 1
loading
Tags: Grid
Chiara De Acetis
Asked On September 7, 2017 11:31 AM

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 [Syncfusion]
Replied On September 8, 2017 08:15 AM

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 

[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 


Please let us know if you need further assistance 


Regards, 
Manisankar Durai. 



CONFIRMATION

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.

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.

;