Card View - Web API Service

To access a Web API service from the client, use the createStore method which is part of the DevExtreme.AspNet.Data extension. This extension also allows you to process data for DevExtreme components on the server.

To notify our CardView that data is processed on the server, set the remoteOperations property to true.

Backend API

@(Html.DevExtreme().CardView<DevExtreme.MVC.Demos.Models.TreeList.EmployeeTask>() .ID("cardView") .DataSource(ds => ds.WebApi() .RouteName("TreeListTasks") .LoadAction("Tasks") .UpdateAction("UpdateTask") .InsertAction("InsertTask") .DeleteAction("DeleteTask") .Key("Task_ID") ) .RemoteOperations(true) .CardsPerRow(Mode.Auto) .CardMinWidth(280) .WordWrapEnabled(true) .Columns(c => { c.AddFor(m => m.Task_Subject) .Caption("Subject") .ValidationRules( vr => vr.AddRequired() ); c.AddFor(m => m.Task_Start_Date).Caption("Start Date"); c.AddFor(m => m.Task_Due_Date).Caption("Due Date"); c.AddFor(m => m.Task_Priority).DataType(GridColumnDataType.String).Caption("Priority"); c.AddFor(m => m.Task_Status).Caption("Status"); }) .HeaderFilter(hf => hf.Visible(true)) .SearchPanel(s => s.Visible(true)) .Editing(e => { e .AllowAdding(true) .AllowUpdating(true) .AllowDeleting(true) .Popup(p => p .Width(700) .Height(400) ) .Form(f => f.Items(items => { items.AddSimpleFor(m => m.Task_Subject); items.AddSimpleFor(m => m.Task_Start_Date); items.AddSimpleFor(m => m.Task_Due_Date); items .AddSimpleFor(m => m.Task_Priority) .Editor(editor => editor .SelectBox() .DataSource(new [] {"Low", "Normal", "High", "Urgent"}) ); items.AddSimple().DataField("Task_Status"); })); }) )

using DevExtreme.MVC.Demos.Models.CardView.ColumnChooser; using DevExtreme.MVC.Demos.Models.CardView.ColumnHeaderFilter; using DevExtreme.MVC.Demos.Models.CardView.ColumnReordering; using DevExtreme.MVC.Demos.Models.CardView.DataValidation; using DevExtreme.MVC.Demos.Models.CardView.FilterPanel; using DevExtreme.MVC.Demos.Models.CardView.Overview; using DevExtreme.MVC.Demos.Models.CardView.PopupEditing; using DevExtreme.MVC.Demos.Models.CardView.SearchPanel; using DevExtreme.MVC.Demos.Models.CardView.Selection; using DevExtreme.MVC.Demos.Models.CardView.SimpleArray; using DevExtreme.MVC.Demos.Models.CardView.Sorting; using DevExtreme.MVC.Demos.Models.SampleData; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class CardViewController : Controller { public ActionResult WebAPIService() { return View(); } } }