Your search did not match any results.
List

List Editing and API

Documentation

The List is a widget that represents a collection of items in a scrollable list. This demo displays different delete modes and shows how you can handle the selectionChanged event.

<div class="list-api-demo"> <div class="widget-container"> @(Html.DevExtreme().List() .ID("simpleList") .Height(400) .DataSource(d => d.Mvc() .Controller("ListEditing") .LoadAction("Get") .DeleteAction("Delete") .Key("ID") ) .AllowItemDeleting(false) .ItemDeleteMode(ListItemDeleteMode.Toggle) .ShowSelectionControls(true) .SelectionMode(ListSelectionMode.Multiple) .OnSelectionChanged("list_updateSelection") .OnItemDeleted("list_updateSelection") .ItemTemplate(@<text><%= Text %></text>) ) <div class="selected-data"> <span class="caption">Selected Tasks:</span> <span id="selectedItems"></span> </div> </div> <div class="options"> <div class="caption">Options</div> <div class="option"> @(Html.DevExtreme().CheckBox() .Value(false) .Text("Allow deleting") .OnValueChanged("checkBox_valueChanged") ) </div> <div class="option"> <span>Deleting type</span> @(Html.DevExtreme().SelectBox() .ID("deleteType") .Disabled(true) .DataSource(Enum.GetValues(typeof(ListItemDeleteMode))) .Value(ListItemDeleteMode.Toggle) .OnValueChanged("selectBox_valueChanged") ) </div> </div> </div> <script> var checkBox_valueChanged = function(e) { $("#simpleList").dxList("option", "allowItemDeleting", e.value); $("#deleteType").dxSelectBox("option", "disabled", !e.value); }; var selectBox_valueChanged = function(e) { $("#simpleList").dxList("option", "itemDeleteMode", e.value); }; var list_updateSelection = function(e) { var selectedItems = e.component.option("selectedItems"); var selectedTexts = $.map(selectedItems, function (item) { return item.Text; }); $("#selectedItems").text(selectedTexts.join(", ")); }; </script>
using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class ListController : Controller { public ActionResult ListEditingAndAPI() { return View(); } } }
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using Microsoft.Extensions.Caching.Memory; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers { [Route("api/[controller]")] public class ListEditingController : Controller { InMemoryListDataContext _data; public ListEditingController(IHttpContextAccessor httpContextAccessor, IMemoryCache memoryCache) { _data = new InMemoryListDataContext(httpContextAccessor, memoryCache); } [HttpGet] public object Get(DataSourceLoadOptions loadOptions) { return DataSourceLoader.Load(_data.ListItems, loadOptions); } [HttpDelete] public void Delete(int key) { var listItem = _data.ListItems.First(a => a.ID == key); _data.ListItems.Remove(listItem); _data.SaveChanges(); } } }
using Microsoft.AspNetCore.Http; using Microsoft.Extensions.Caching.Memory; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class InMemoryListDataContext { IHttpContextAccessor _contextAccessor; IMemoryCache _memoryCache; public InMemoryListDataContext(IHttpContextAccessor contextAccessor, IMemoryCache memoryCache) { _contextAccessor = contextAccessor; _memoryCache = memoryCache; } public ICollection<ListItem> ListItems { get { var session = _contextAccessor.HttpContext.Session; var key = session.Id + "_ListItems"; if(_memoryCache.Get(key) == null) { _memoryCache.Set<ICollection<ListItem>>(key, SampleData.SampleData.ListPlainData.ToList(), new MemoryCacheEntryOptions { SlidingExpiration = TimeSpan.FromMinutes(10) }); session.SetInt32("dirty", 1); } return _memoryCache.Get<ICollection<ListItem>>(key); } } public void SaveChanges() { foreach(var listItem in ListItems.Where(a => a.ID == 0)) { listItem.ID = ListItems.Max(a => a.ID) + 1; } } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class ListItem { public int ID { get; set; } public string Text { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static ListItem[] ListPlainData = new[] { new ListItem { ID = 1, Text = "Prepare 2016 Financial" }, new ListItem { ID = 2, Text = "Prepare 2016 Marketing Plan" }, new ListItem { ID = 3, Text = "Update Personnel Files" }, new ListItem { ID = 4, Text = "Review Health Insurance Options Under the Affordable Care Act" }, new ListItem { ID = 5, Text = "New Brochures" }, new ListItem { ID = 6, Text = "2016 Brochure Designs" }, new ListItem { ID = 7, Text = "Brochure Design Review" }, new ListItem { ID = 8, Text = "Website Re-Design Plan" }, new ListItem { ID = 9, Text = "Rollout of New Website and Marketing Brochures" }, new ListItem { ID = 10, Text = "Update Sales Strategy Documents" }, new ListItem { ID = 11, Text = "Create 2012 Sales Report" }, new ListItem { ID = 12, Text = "Direct vs Online Sales Comparison Report" }, new ListItem { ID = 13, Text = "Review 2012 Sales Report and Approve 2016 Plans" }, new ListItem { ID = 14, Text = "Deliver R&D Plans for 2016" }, new ListItem { ID = 15, Text = "Create 2016 R&D Plans" }, new ListItem { ID = 16, Text = "2013 QA Strategy Report" }, new ListItem { ID = 17, Text = "2013 Training Events" }, new ListItem { ID = 18, Text = "Approve Hiring of John Jeffers" }, new ListItem { ID = 19, Text = "Non-Compete Agreements" }, new ListItem { ID = 20, Text = "Update NDA Agreement" }, new ListItem { ID = 21, Text = "Update Employee Files with New NDA" }, new ListItem { ID = 22, Text = "Sign Updated NDA" }, new ListItem { ID = 23, Text = "Submit Questions Regarding New NDA" }, new ListItem { ID = 24, Text = "Submit Signed NDA" }, new ListItem { ID = 25, Text = "Update Revenue Projections" }, new ListItem { ID = 26, Text = "Review Revenue Projections" }, new ListItem { ID = 27, Text = "Comment on Revenue Projections" }, new ListItem { ID = 28, Text = "Provide New Health Insurance Docs" }, new ListItem { ID = 29, Text = "Review Changes to Health Insurance Coverage" }, new ListItem { ID = 30, Text = "Scan Health Insurance Forms" }, new ListItem { ID = 31, Text = "Sign Health Insurance Forms" }, new ListItem { ID = 32, Text = "Follow up with West Coast Stores" }, new ListItem { ID = 33, Text = "Follow up with East Coast Stores" }, new ListItem { ID = 34, Text = "Send Email to Customers about Recall" }, new ListItem { ID = 35, Text = "Submit Refund Report for 2016 Recall" }, new ListItem { ID = 36, Text = "Give Final Approval for Refunds" }, new ListItem { ID = 37, Text = "Prepare Product Recall Report" }, new ListItem { ID = 38, Text = "Review Product Recall Report by Engineering Team" }, new ListItem { ID = 39, Text = "Create Training Course for New TVs" }, new ListItem { ID = 40, Text = "Review Training Course for any Ommissions" }, new ListItem { ID = 41, Text = "Review Overtime Report" }, new ListItem { ID = 42, Text = "Submit Overtime Request Forms" }, new ListItem { ID = 43, Text = "Overtime Approval Guidelines" }, new ListItem { ID = 44, Text = "Refund Request Template" }, new ListItem { ID = 45, Text = "Recall Rebate Form" }, new ListItem { ID = 46, Text = "Create Report on Customer Feedback" }, new ListItem { ID = 47, Text = "Review Customer Feedback Report" }, new ListItem { ID = 48, Text = "Customer Feedback Report Analysis" }, new ListItem { ID = 49, Text = "Prepare Shipping Cost Analysis Report" }, new ListItem { ID = 50, Text = "Provide Feedback on Shippers" }, new ListItem { ID = 51, Text = "Select Preferred Shipper" }, new ListItem { ID = 52, Text = "Complete Shipper Selection Form" }, new ListItem { ID = 53, Text = "Upgrade Server Hardware" }, new ListItem { ID = 54, Text = "Upgrade Personal Computers" }, new ListItem { ID = 55, Text = "Approve Personal Computer Upgrade Plan" }, new ListItem { ID = 56, Text = "Decide on Mobile Devices to Use in the Field" }, new ListItem { ID = 57, Text = "Upgrade Apps to Windows RT or stay with WinForms" }, new ListItem { ID = 58, Text = "Estimate Time Required to Touch-Enable Apps" }, new ListItem { ID = 59, Text = "Report on Tranistion to Touch-Based Apps" }, new ListItem { ID = 60, Text = "Try New Touch-Enabled WinForms Apps" }, new ListItem { ID = 61, Text = "Rollout New Touch-Enabled WinForms Apps" }, new ListItem { ID = 62, Text = "Site Up-Time Report" }, new ListItem { ID = 63, Text = "Review Site Up-Time Report" }, new ListItem { ID = 64, Text = "Review Online Sales Report" }, new ListItem { ID = 65, Text = "Determine New Online Marketing Strategy" }, new ListItem { ID = 66, Text = "New Online Marketing Strategy" }, new ListItem { ID = 67, Text = "Approve New Online Marketing Strategy" }, new ListItem { ID = 68, Text = "Submit New Website Design" }, new ListItem { ID = 69, Text = "Create Icons for Website" }, new ListItem { ID = 70, Text = "Review PSDs for New Website" }, new ListItem { ID = 71, Text = "Create New Shopping Cart" }, new ListItem { ID = 72, Text = "Create New Product Pages" }, new ListItem { ID = 73, Text = "Review New Product Pages" }, new ListItem { ID = 74, Text = "Approve Website Launch" }, new ListItem { ID = 75, Text = "Launch New Website" }, new ListItem { ID = 76, Text = "Update Customer Shipping Profiles" }, new ListItem { ID = 77, Text = "Create New Shipping Return Labels" }, new ListItem { ID = 78, Text = "Get Design for Shipping Return Labels" }, new ListItem { ID = 79, Text = "PSD needed for Shipping Return Labels" }, new ListItem { ID = 80, Text = "Request Bandwidth Increase from ISP" }, new ListItem { ID = 81, Text = "Submit D&B Number to ISP for Credit Approval" }, new ListItem { ID = 82, Text = "Contact ISP and Discuss Payment Options" }, new ListItem { ID = 83, Text = "Prepare Year-End Support Summary Report" }, new ListItem { ID = 84, Text = "Analyze Support Traffic for 2016" }, new ListItem { ID = 85, Text = "Review New Training Material" }, new ListItem { ID = 86, Text = "Distribute Training Material to Support Staff" }, new ListItem { ID = 87, Text = "Training Material Distribution Schedule" }, new ListItem { ID = 88, Text = "Provide New Artwork to Support Team" }, new ListItem { ID = 89, Text = "Publish New Art on the Server" }, new ListItem { ID = 90, Text = "Replace Old Artwork with New Artwork" }, new ListItem { ID = 91, Text = "Ship New Brochures to Field" }, new ListItem { ID = 92, Text = "Ship Brochures to Todd Hoffman" }, new ListItem { ID = 93, Text = "Update Server with Service Packs" }, new ListItem { ID = 94, Text = "Install New Database" }, new ListItem { ID = 95, Text = "Approve Overtime for HR" }, new ListItem { ID = 96, Text = "Review New HDMI Specification" }, new ListItem { ID = 97, Text = "Approval on Converting to New HDMI Specification" }, new ListItem { ID = 98, Text = "Create New Spike for Automation Server" }, new ListItem { ID = 99, Text = "Report on Retail Sales Strategy for 2014" }, new ListItem { ID = 100, Text = "Code Review - New Automation Server" }, new ListItem { ID = 101, Text = "Feedback on New Training Course" }, new ListItem { ID = 102, Text = "Send Monthly Invoices from Shippers" }, new ListItem { ID = 103, Text = "Schedule Meeting with Sales Team" }, new ListItem { ID = 104, Text = "Confirm Availability for Sales Meeting" }, new ListItem { ID = 105, Text = "Reschedule Sales Team Meeting" }, new ListItem { ID = 106, Text = "Send 2 Remotes for Giveaways" }, new ListItem { ID = 107, Text = "Ship 2 Remotes Priority to Clark Morgan" }, new ListItem { ID = 108, Text = "Discuss Product Giveaways with Management" }, new ListItem { ID = 109, Text = "Follow Up Email with Recent Online Purchasers" }, new ListItem { ID = 110, Text = "Replace Desktops on the 3rd Floor" }, new ListItem { ID = 111, Text = "Update Database with New Leads" }, new ListItem { ID = 112, Text = "Mail New Leads for Follow Up" }, new ListItem { ID = 113, Text = "Send Territory Sales Breakdown" }, new ListItem { ID = 114, Text = "Territory Sales Breakdown Report" }, new ListItem { ID = 115, Text = "Return Merchandise Report" }, new ListItem { ID = 116, Text = "Report on the State of Engineering Dept" }, new ListItem { ID = 117, Text = "Staff Productivity Report" }, new ListItem { ID = 118, Text = "Review HR Budget Company Wide" }, new ListItem { ID = 119, Text = "Sales Dept Budget Request Report" }, new ListItem { ID = 120, Text = "Support Dept Budget Report" }, new ListItem { ID = 121, Text = "IT Dept Budget Request Report" }, new ListItem { ID = 122, Text = "Engineering Dept Budget Request Report" }, new ListItem { ID = 123, Text = "1Q Travel Spend Report" }, new ListItem { ID = 124, Text = "Approve Benefits Upgrade Package" }, new ListItem { ID = 125, Text = "Final Budget Review" }, new ListItem { ID = 126, Text = "State of Operations Report" }, new ListItem { ID = 127, Text = "Online Sales Report" }, new ListItem { ID = 128, Text = "Reprint All Shipping Labels" }, new ListItem { ID = 129, Text = "Shipping Label Artwork" }, new ListItem { ID = 130, Text = "Specs for New Shipping Label" }, new ListItem { ID = 131, Text = "Move Packaging Materials to New Warehouse" }, new ListItem { ID = 132, Text = "Move Inventory to New Warehouse" }, new ListItem { ID = 133, Text = "Take Forklift to Service Center" }, new ListItem { ID = 134, Text = "Approve Rental of Forklift" }, new ListItem { ID = 135, Text = "Give Final Approval to Rent Forklift" }, new ListItem { ID = 136, Text = "Approve Overtime Pay" }, new ListItem { ID = 137, Text = "Approve Vacation Request" }, new ListItem { ID = 138, Text = "Approve Salary Increase Request" }, new ListItem { ID = 139, Text = "Review Complaint Reports" }, new ListItem { ID = 140, Text = "Review Website Complaint Reports" }, new ListItem { ID = 141, Text = "Test New Automation App" }, new ListItem { ID = 142, Text = "Fix Synchronization Issues" }, new ListItem { ID = 143, Text = "Free Up Space for New Application Set" }, new ListItem { ID = 144, Text = "Install New Router in Dev Room" }, new ListItem { ID = 145, Text = "Update Your Profile on Website" }, new ListItem { ID = 146, Text = "Schedule Conf Call with SuperMart" }, new ListItem { ID = 147, Text = "Support Team Evaluation Report" }, new ListItem { ID = 148, Text = "Create New Installer for Company Wide App Deployment" }, new ListItem { ID = 149, Text = "Pickup Packages from the Warehouse" }, new ListItem { ID = 150, Text = "Sumit Travel Expenses for Recent Trip" }, new ListItem { ID = 151, Text = "Make Travel Arrangements for Sales Trip to San Francisco" }, new ListItem { ID = 152, Text = "Book Flights to San Fran for Sales Trip" }, new ListItem { ID = 153, Text = "Collect Customer Reviews for Website" }, new ListItem { ID = 154, Text = "Submit New W4 for Updated Exemptions" }, new ListItem { ID = 155, Text = "Get New Frequent Flier Account" }, new ListItem { ID = 156, Text = "Review New Customer Follow Up Plan" }, new ListItem { ID = 157, Text = "Submit Customer Follow Up Plan Feedback" }, new ListItem { ID = 158, Text = "Review Issue Report and Provide Workarounds" }, new ListItem { ID = 159, Text = "Contact Customers for Video Interviews" }, new ListItem { ID = 160, Text = "Resubmit Request for Expense Reimbursement" }, new ListItem { ID = 161, Text = "Approve Vacation Request Form" }, new ListItem { ID = 162, Text = "Email Test Report on New Products" }, new ListItem { ID = 163, Text = "Send Receipts for all Flights Last Month" } }; } }
.selected-data, .options { margin-top: 20px; padding: 20px; background-color: rgba(191, 191, 191, 0.15); } .selected-data .caption { font-weight: bold; font-size: 115%; } .options .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; } .option > span { margin-right: 10px; } .option > .dx-selectbox { display: inline-block; vertical-align: middle; max-width: 350px; width: 100%; }