Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
<div class="list-api-demo">
<div class="widget-container">
@(Html.DevExtreme().List()
.ID("simpleList")
.Height(400)
.DataSource(d => d.WebApi()
.Controller("ListEditing")
.DeleteAction(true)
.Key("ID")
)
.AllowItemDeleting(false)
.ItemDeleteMode(ListItemDeleteMode.Toggle)
.ItemTemplate(@<text><%- Text %></text>)
)
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Value(false)
.Text("Allow deletion")
.OnValueChanged("checkBox_valueChanged")
)
</div>
<div class="option">
<span>Item delete mode</span>
@(Html.DevExtreme().SelectBox()
.ID("itemDeleteMode")
.Disabled(true)
.InputAttr("aria-label", "Delete Mode")
.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);
$("#itemDeleteMode").dxSelectBox("option", "disabled", !e.value);
};
var selectBox_valueChanged = function(e) {
$("#simpleList").dxList("option", "itemDeleteMode", e.value);
};
</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 ListEditingAndAPI() {
return View();
}
}
}
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Net.Http.Formatting;
using System.Web.Http;
namespace DevExtreme.MVC.Demos.Controllers.ApiControllers {
public class ListEditingController : ApiController {
InMemoryListDataContext _data = new InMemoryListDataContext();
[HttpGet]
public HttpResponseMessage Get(DataSourceLoadOptions loadOptions) {
return Request.CreateResponse(DataSourceLoader.Load(_data.ListItems, loadOptions));
}
[HttpDelete]
public void Delete(FormDataCollection form) {
var key = Convert.ToInt32(form.Get("key"));
var listItem = _data.ListItems.First(a => a.ID == key);
_data.ListItems.Remove(listItem);
_data.SaveChanges();
}
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models {
public class InMemoryListDataContext : InMemoryDataContext<ListItem> {
public ICollection<ListItem> ListItems => ItemsInternal;
protected override IEnumerable<ListItem> Source => SampleData.SampleData.ListPlainData;
protected override int GetKey(ListItem item) => item.ID;
protected override void SetKey(ListItem item, int key) => item.ID = key;
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.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.MVC.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 Omissions"
},
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"
}
};
}
}
.options {
margin-top: 20px;
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.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%;
}
The "Deletion UI type" drop-down menu under the List allows you to switch between the different deletion behaviors described below. Menu items correspond to itemDeleteMode property values.
-
"static" (default for desktops)
Click an X button next to a list item to delete it. -
"toggle"
Click a minus icon next to a list item to display the Delete button. -
"slideButton"
Swipe left or right to show the Delete button next to the list item. The content of the list item does not move. -
"slideItem" (default for iOS)
Slide list items left. The content of the list item shifts to make space for the Delete button. -
"swipe" (default for Android)
Swipe items to delete them. -
"context"
Right-click or touch and hold the list item to call a context menu that contains the Delete option.
To get started with the DevExtreme List component, refer to the following tutorial for step-by-step instructions: Getting Started with List.