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
@model IEnumerable<DevExtreme.MVC.Demos.Models.ListItem>
<div id="list-demo">
<div class="widget-container">
@(Html.DevExtreme().List()
.ID("simpleList")
.Height(400)
.ShowSelectionControls(true)
.SelectionMode(ListSelectionMode.All)
.SelectByClick(false)
.DataSource(Model, "ID")
.ItemTemplate(@<text><%- Text %></text>)
.OnSelectionChanged(@<text>
function(data) {
$("#selectedItemKeys").text(data.component.option("selectedItemKeys").join(", "));
}
</text>)
)
<div class="selected-data">
<span class="caption">Selected IDs: </span>
<span id="selectedItemKeys"></span>
</div>
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Selection Mode</span>
@(Html.DevExtreme().SelectBox()
.Value(ListSelectionMode.All)
.InputAttr("aria-label", "Selection Mode")
.DataSource(Enum.GetValues(typeof(ListSelectionMode)))
.OnValueChanged(@<text>
function(data) {
$("#simpleList").dxList("option", "selectionMode", data.value);
$("#selectAllMode").dxSelectBox("option", "disabled", data.value !== "all");
}
</text>)
)
</div>
<div class="option">
<span>Select All Mode</span>
@(Html.DevExtreme().SelectBox()
.ID("selectAllMode")
.Disabled(false)
.InputAttr("aria-label", "Select All Mode")
.DataSource(Enum.GetValues(typeof(SelectAllMode)))
.Value(SelectAllMode.Page)
.OnValueChanged(@<text>
function(data) {
$("#simpleList").dxList("option", "selectAllMode", data.value);
}
</text>)
)
</div>
<div class="option">
<span>Select By Click</span>
@(Html.DevExtreme().CheckBox()
.ID("selectByClick")
.Value(false)
.ElementAttr("aria-label", "Selection By Click")
.OnValueChanged(@<text>
function(data) {
$("#simpleList").dxList("option", "selectByClick", data.value);
}
</text>)
)
</div>
</div>
</div>
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 ListSelection() {
return View(SampleData.ListPlainData.Take(50));
}
}
}
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"
}
};
}
}
.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 {
width: 120px;
display: inline-block;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
width: 100%;
max-width: 350px;
}
List items can display checkboxes or radio buttons. To show these controls, enable the showSelectionControls property. Otherwise, users can click or tap list items to select them. The showSelectionControls property should also be enabled when you use the "all" selectionMode to show the Select All checkbox.
When the List data is paginated, you can choose whether the Select All checkbox selects all items on all pages or only the items on the current page. To configure this functionality, set the selectAllMode property to "allPages" or "page". In this demo, you can use the drop-down Select All Mode menu to change the selectAllMode property at runtime.
To configure the initial selection or access the keys of selected items, use the selectedItemKeys array. This example shows the contents of this array in the Selected IDs section below the List.
You can also implement the onSelectionChanged event handler to perform an action when users select items.