Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Free Trial Buy
    Your search did not match any results.
    List

    Web API Service

    Documentation

    This example demonstrates the List UI component loading data from a Web API service.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    ASP.NET Core

    ASP.NET MVC

    @(Html.DevExtreme().List() .ItemTemplate(@<text> <div><%- ProductName %></div> <div><b><%- formatCurrency(UnitPrice) %></b></div> </text>) .DataSource(d => d.WebApi().Controller("ListData")) .DataSourceOptions(d => d .PageSize(1) .Sort("ProductName") .Group("Category.CategoryName") .Filter("[ 'UnitPrice', '>', '15' ]") ) .Grouped(true) .CollapsibleGroups(true) .ItemDeleteMode(ListItemDeleteMode.SlideItem) .SelectionMode(ListSelectionMode.Multiple) .ShowSelectionControls(true) .PageLoadMode(ListPageLoadMode.ScrollBottom) .Height(600) ) <script> var formatCurrency = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 2 }).format; </script>
    using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Collections.Generic; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ListController : Controller { public ActionResult WebApi() { return View(); } } }
    using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using System.Web.Http; using DevExtreme.MVC.Demos.Models.Northwind; namespace DevExtreme.MVC.Demos.Controllers.ApiControllers { public class ListDataController : ApiController { NorthwindContext _nwind = new NorthwindContext(); [HttpGet] public HttpResponseMessage Get(DataSourceLoadOptions loadOptions) { return Request.CreateResponse( DataSourceLoader.Load(_nwind.Products.Include("Category"), loadOptions) ); } } }